一.安裝node.js
官方下載地址https://nodejs.org/en/
盡量安裝最新的穩(wěn)定版,react對node.js有版本要求
Node.js? is a JavaScript runtime built on Chrome's V8 JavaScript engine.
JavaScript一般都是在瀏覽器中執(zhí)行的淑趾,而node.js就是提供了一個可獨立執(zhí)行JavaScript的環(huán)境抓半,這樣我們就有了一個可以獨立部署的前端工程。
通過以下命令檢查是否安裝成功
node -v
npm -v
二.npm包管理工具 基本使用
NPM是隨同NodeJS一起安裝的包管理工具嵌牺,能解決NodeJS代碼部署上的很多問題肴楷,常見的使用場景有以下幾種:
1.允許用戶從NPM服務(wù)器下載別人編寫的第三方包到本地使用鸟妙。
2.允許用戶從NPM服務(wù)器下載并安裝別人編寫的命令行程序到本地使用。
3.允許用戶將自己編寫的包或命令行程序上傳到NPM服務(wù)器供別人使用奶甘。
本地安裝
npm install 包名@版本號
uninstall同理
- 將安裝包放在 ./node_modules 下(運行 npm 命令時所在的目錄
)篷店,如果沒有 node_modules 目錄,會在當(dāng)前執(zhí)行 npm 命令的目錄
下生成 node_modules 目錄臭家。
全局安裝
npm install -g 包名@版本號
uninstall同理
- 將安裝包放在 /usr/local 下或者你 node 的安裝目錄疲陕。
- 可以直接在命令行里使用。
其他常見命令:
npm list -g 查看安裝的包列表
npm list grunt
三.創(chuàng)建并運行react項目
npm install -g create-react-app 安裝官方提供的生成react項目demo工具
create-react-app hello-react 在當(dāng)前目錄下創(chuàng)建名為hello-react的項目
如果安裝包太慢钉赁,可以改為國內(nèi)的淘寶源
npm config set registry https://registry.npm.taobao.org
cd hello-react 進(jìn)入項目目錄
npm start 運行
四.項目目錄結(jié)構(gòu)介紹
yarn.lock 安裝包版本號
package.json 運行npm start 命令就是運行該文件里的內(nèi)容
node_modules 外部包文件
public/index.html 頁面上顯示的html的內(nèi)容
public/manfest.json PWA 如果是作為一個app蹄殃,定義app的圖標(biāo),主體
src /index.js 項目的執(zhí)行入口