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

1、使用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

2、工程结构

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目录下

3、可执行命令

/* 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...