用create-react-app来快速配置react
最近在学react,然后感觉自己之前用的express+gulp+webpack+ejs的工作环境还是基于html+js+css这种三层架构的应用,完全跟react不是一回事。
愚蠢的我居然在原先的这个环境上又搭建了react的环境。好吧,写是能写,但是作为服务端的架构就显得驴唇不对马嘴。不免对环境的配置感到迷茫。我也知道redux,但是才刚学react,react还没熟,暂时还不想了解那个框架,然后我发现了create-react-app。
可以用这个直接为自己搭建脚手架,方便的eb,这里记录一下
首先安装这个包
npm install -g create-react-app
然后就跟用express “appname”一样,键入
create-react-app appname
来创建新的项目。比如我创建的名为“react-learn-1”的项目目录如下。

其中之前习惯放在根目录下的webpack构建配置文件被放在了node_modules下的react-scripts中。好像是因为觉得构建配置文件都大同小异,于是就直接藏起来了,到时候有一些小需求的时候可以去改。
创建成功之后它会告诉你怎么启动项目
npm start
Starts the development server. npm run build
Bundles the app into static files for production. npm test
Starts the test runner. npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
ok,就这么简单
用create-react-app来快速配置react的更多相关文章
- 如何扩展 Create React App 的 Webpack 配置
如何扩展 Create React App 的 Webpack 配置 原文地址https://zhaozhiming.github.io/blog/2018/01/08/create-react-a ...
- 教你怎么快速配置 React
导读 React 是一个构建用户界面的库,而它只是组成一个应用的一部分.应用还有其他的部分——风格.路由器.npm 模块.ES6 代码.捆绑和更多——这就是为什么使用它们的开发者不断流失的原因.这被称 ...
- 前端快闪三:多环境灵活配置react
你已经使用Create React App脚手架搭建了React应用,现在该部署了. 一般会使用npm run build或者yarn build构建出静态资源, 由web服务器承载. 您会体验到 多 ...
- 利用 Create React Native App 快速创建 React Native 应用
本文介绍的 Create-React-Native-App 是非常 Awesome 的工具,而其背后的 Expo 整个平台也让笔者感觉非常的不错.笔者目前公司是采用 APICloud 进行移动应用开发 ...
- Create React App
Facebook开源了React前端框架(MIT Licence),也同时提供了React脚手架 - create-react-app. create-react-app遵循约定优于配置(Coc)的原 ...
- 深入 Create React App 核心概念
本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...
- 使用create-react-app 快速构建 React 开发环境以及react-router 4.x路由配置
create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境. create-react-app 自动创建的项目是基于 Webpack + E ...
- 在 .NET Core 5 中集成 Create React app
翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] Camilo Reyes ...
- tap news:week5 0.0 create react app
参考https://blog.csdn.net/qtfying/article/details/78665664 先创建文件夹 安装create react app 这个脚手架(facebook官方提 ...
随机推荐
- LAMP环境搭建Wordpress个人博客
LAMP简要介绍 L:LinuxA:Apache(httpd)M:MySQL , MariadbP:php, perl , python 静态资源:图片,文档,视频,HTML代码,CSS代码,js代码 ...
- TClientDataSet[5]: 读取数据
本例用到: TClientDataSet.Fields[]; { 字段集合; 它比 FieldList 有更多功能, 如可获取嵌套字段 } TClientDataSet.FieldL ...
- jenkins配置slave节点 构建项目并执行操作
1.新建与配置结点 [系统管理]-> [管理结点]-> [新建结点] 2.配置slave 说明: Name: 定义slave的唯一名称标识,可以是任意字符串,通常设置为slave主机名.i ...
- 采用FPGA实现UART转SPI
应用笔记 V1.1 2015/2/10 采用FPGA实现UART转SPI 概述 本文提供了实现UART转SPI的Verilog代码的功能描述.这份笔记将介绍UART和SPI的基本知识,代码设计 ...
- BZOJ 2007 海拔(平面图最小割转对偶图最短路)
首先注意到,把一个点的海拔定为>1的数是毫无意义的.实际上,可以转化为把这些点的海拔要么定为0,要么定为1. 其次,如果一个点周围的点的海拔没有和它相同的,那么这个点的海拔也是可以优化的,即把这 ...
- QString::QString 中文乱码
QString::QString 中文乱码 处理方法: 1. QString str = QString::fromLocal8Bit("中文"); // vs2008 vs200 ...
- 【刷题】洛谷 P3806【模板】点分治1
题目背景 感谢hzwer的点分治互测. 题目描述 给定一棵有n个点的树 询问树上距离为k的点对是否存在. 输入输出格式 输入格式: n,m 接下来n-1条边a,b,c描述a到b有一条长度为c的路径 接 ...
- [AT2364] [agc012_d] Colorful Balls
题目链接 AtCoder:https://agc012.contest.atcoder.jp/tasks/agc012_d 洛谷:https://www.luogu.org/problemnew/sh ...
- 我是一个CPU:这个世界慢!死!了!
最近小编看到一篇十分有意思的文章,多方位.无死角的讲解了CPU关于处理速度的理解,看完之后真是豁然开朗.IOT时代,随着科技的发展CPU芯片的处理能力越来越强,强大的程度已经超乎了我们的想象.今天就把 ...
- Redis学习笔记一:Redis安装
Redis安装 1.下载进入redis官网下载redis-xxx.tar.gz包 2.将redis-xxx.tar.gz拷贝到Linux某一目录下并对其进行解压 tar -zxvf Redis-xxx ...