react介紹 環境搭建 demo執行例項

react官網:

cnpm**:

1、react介紹

react來自於facebook公司的開源專案

react 可以開發單頁面應用       spa（單頁面應用）
react 元件化模組化  開發模式
react通過對dom的模擬(虛擬dom)，最大限度地減少與dom的互動  （資料繫結）
react靈活  react可以與已知的庫或框架很好地配合。
react 基於jsx的語法，jsx是react的核心組成部分，它使用xml標記的方式去直接宣告介面。

2、react環境搭建

搭建react開發環境之前的準備工作。

1、必須安裝nodejs      注意：安裝nodejs穩定版本
2、安裝cnpm用cnpm替代npm
安裝cnpm:
3、用yarn替代npm
yarn的安裝：
第一種方法：參考官方文件https:
第二種方法：cnpm install -g yarn  或者 npm install -g yarn

3、react簡單demo建立與執行

a)方式一　　　

1、必須要安裝nodejs     注意：安裝nodejs穩定版本      教程中的nodejs版本:v8.11.2            教程中的npm版本:v5.6.0

2.安裝腳手架工具   （單檔案元件專案生成工具）   只需要安裝一次
3.建立專案   （可能建立多次）
找到專案要建立的目錄：
4.cd  到專案裡面    
cd  reactdemo
npm start             yarn start執行專案
npm run build         yarn build 生成專案
5.執行localhost:3000

b)方式二

1、必須要安裝nodejs     注意：安裝nodejs穩定版本      教程中的nodejs版本:v8.11.2            教程中的npm版本:v5.6.0

2.安裝腳手架工具並建立專案
找到專案要建立的目錄執行：
4.cd  到專案裡面    
cd  reactdemo
npm start  執行專案（除錯）
npm run build 生成專案（發布）
5.執行localhost:3000

4、npx介紹

npm v5.2

.0引入的一條命令（npx），引入這個命令的目的是為了提公升開發者使用包內提供的命令列工具的體驗。
中。下次再執行，還是會重新臨時安裝。npx 會幫你執行依賴包裡的二進位制檔案。
再比如 npx http-server 可以一句話幫你開啟乙個靜態伺服器

react環境搭建

react webpack資料夾是開發目錄,在此目錄下執行命令,假設你已經正確安裝了 nodejs 一 參照教程搭建環境 以下模式請用 超級管理員來執行 npm install g yo 安裝 yeoman 可選 npm install g generator react webpack 安裝生成器...

React環境搭建

從早上8點多搞到現在 15 03 結果發現是因為我網路太差，所以遲遲沒安裝好。先總結下步驟，非常簡單，我感覺。1 安裝node.js 2 安裝 的cnpm 我的網速比較慢 這也是導致我乙個小時也沒安裝好乙個專案的原因，瘋掉 選擇使用 的cnpm，同時設定映象位址 npm install g cnpm...

react 搭建react開發環境

搭建react開發環境有兩種 1 必須要安裝nodejs 注意 安裝nodejs穩定版本 2.安裝腳手架工具 單檔案元件專案生成工具 只需要安裝一次 3.建立專案 可能建立多次 找到專案要建立的目錄 4.cd 到專案裡面 cd reactdemo npm start yarn start執行專案 n...