一、使用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" },