create-react-app
全局安裝create-react-app
npm install -g create-react-app
使用create-react-app創(chuàng)建一個(gè)項(xiàng)目
$ 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 也可以實(shí)現(xiàn)相同的效果
這需要等待一段時(shí)間，這個(gè)過程實(shí)際上會(huì)安裝三個(gè)東西
- react: react的頂級(jí)庫
- react-dom: 因?yàn)閞eact有很多的運(yùn)行環(huán)境，比如app端的react-native, 我們要在web上運(yùn)行就使用react-dom
- react-scripts: 包含運(yùn)行和打包react應(yīng)用程序的所有腳本及配置
出現(xiàn)下面的界面，表示創(chuàng)建項(xiàng)目成功:
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!
根據(jù)上面的提示，通過cd your-app命令進(jìn)入目錄并運(yùn)行npm start即可運(yùn)行項(xiàng)目。
生成項(xiàng)目的目錄結(jié)構(gòu)如下：文章來源：http://www.zghlxwxcb.cn/news/detail-678463.html
├── README.md 使用方法的文檔 ├── node_modules 所有的依賴安裝的目錄 ├── package-lock.json 鎖定安裝時(shí)的包的版本號(hào),保證團(tuán)隊(duì)的依賴能保證一致。 ├── package.json ├── public 靜態(tài)公共目錄 └── src 開發(fā)用的源代碼目錄
代碼的入口是項(xiàng)目目錄下的index.js文章來源地址http://www.zghlxwxcb.cn/news/detail-678463.html
到了這里，關(guān)于使用create-react-app創(chuàng)建react項(xiàng)目的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
