1. 使用create-react-app建立react項目

create-react-app

全局安裝create-react-app

npm install -g create-react-app

使用create-react-app建立一個項目

$ create-react-app your-app 注意命名方式

Creating a new React app in /dir/your-app.

Installing packages. This might take a couple of minutes. 安裝過程較慢，
Installing react, react-dom, and react-scripts...

若是不想全局安裝，能夠直接使用npx

$ npx create-react-app your-app    也能夠實現相同的效果

這須要等待一段時間，這個過程實際上會安裝三個東西

• react: react的頂級庫
• react-dom: 由於react有不少的運行環境，好比app端的react-native, 咱們要在web上運行就使用react-dom
• react-scripts: 包含運行和打包react應用程序的全部腳本及配置

出現下面的界面，表示建立項目成功:

Success! Created your-app at /dir/your-app
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd your-app
  npm start

Happy hacking!

根據上面的提示，經過cd your-app命令進入目錄並運行npm start便可運行項目。
生成項目的目錄結構以下：

├── README.md                            使用方法的文檔
├── node_modules                    全部的依賴安裝的目錄
├── package-lock.json            鎖定安裝時的包的版本號,保證團隊的依賴能保證一致。
├── package.json                    
├── public                                靜態公共目錄
└── src                                        開發用的源代碼目錄

代碼的入口是項目目錄下的index.js