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