1. 程式人生 > >react介紹、環境搭建、demo運行實例

react介紹、環境搭建、demo運行實例

eat yarn tcs host 腳手架 重新 pan 二進制文件 部分

React官網:https://reactjs.org/docs/create-a-new-react-app.html

cnpm網址:http://npm.taobao.org/

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
        地址:http://npm.taobao.org/
        安裝cnpm:
            npm install -g cnpm --registry=https://registry.npm.taobao.org

    3、用yarn替代npm
        yarn的安裝:
            第一種方法:參考官方文檔https://yarn.bootcss.com/
            第二種方法:cnpm install -g yarn  或者 npm install -g yarn

3、react簡單demo創建與運行

  a)方式一   

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

    2.安裝腳手架工具   (單文件組件項目生成工具)   只需要安裝一次
        npm install -g create-react-app   /  cnpm install -g create-react-app
    
    3.創建項目   (可能創建多次)

        找到項目要創建的目錄:
        create
-react-app reactdemo 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.安裝腳手架工具並創建項目
        找到項目要創建的目錄執行:
        npx create-react-app reactdemo

    4.cd  到項目裏面    
        cd  reactdemo
        npm start  運行項目(調試)
        npm run build 生成項目(發布)
  
   5.執行localhost:3000

4、npx介紹

    npm v5.2.0引入的一條命令(npx),引入這個命令的目的是為了提升開發者使用包內提供的命令行工具的體驗。

    npx create-react-app reactdemo這條命令會臨時安裝 create-react-app 包,命令完成後create-react-app 會刪掉,不會出現在 global 中。下次再執行,還是會重新臨時安裝。npx 會幫你執行依賴包裏的二進制文件。

    再比如 npx http-server 可以一句話幫你開啟一個靜態服務器

react介紹、環境搭建、demo運行實例