react工程搭建系列之---基于create-react-app创建初始项目

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

项目地址：https://github.com/SuRuiGit/m...