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