一、使用create-react-app创建可执行的初始项目
1.npx创建(npm版本5.2+)
npx create-react-app my-react-app
2.npm创建(npm版本6+)
npm init react-app my-react-app
3.yarn创建
yarn create react-app my-react-app
二、工程结构
my-react-app/
node_modules/
package.json
public/
index.html 页面模板
favicon.ico
src/
App.css
App.js
App.test.js
index.css
index.js 入口文件
logo.svg
- 其中public/index.html和src/index.js必须存在;
- 只有在public目录下的文件才能被public/index.html使用;
- 只有在src目录下的文件才会被webpack打包,所以要把js、css文件放在src目录下
三、可执行命令
/* package.json */
"scripts": {
"start": "react-scripts start", 开发环境运行,默认监听3000端口
"build": "react-scripts build", 生产环境运行,进行项目打包,默认打包到build目录
"test": "react-scripts test",
"eject": "react-scripts eject"
},
npm run eject
如果create-react-app中的webpack配置满足不了需求,可以运行这个命令将所有webpack配置以及服务移到项目目录中,这样修改起来就很灵活了,但是这个命令是不可回退的,以下运行后的目录结构:
my-react-app/
config/
jest/
cssTransform.js
fileTransform.js
env.js
paths.js
webpack.config.dev.js
webpack.config.prod.js
webpackDevServer.config.js
scripts/
build.js
start.js
test.js
node_modules/
package.json
public/
index.html 页面模板
favicon.ico
src/
App.css
App.js
App.test.js
index.css
index.js 入口文件
logo.svg
/* package.json */
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js"
},
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。