一、引入React

1、從CDN引入（比較麻煩）

先引入 React: https:// .../react.x.min.js

再引入 ReactDOM: https://.../react-dom.x.min.js

cjs和umd的區(qū)別

• cjs全稱CommonJS，是 Node.js支持的模塊規(guī)范
• umd是統(tǒng)一模塊定義，兼容各種模塊規(guī)范(含瀏覽器)
• 理論上優(yōu)先使用umd，同時支持Node.js和瀏覽器
• 最新的模塊規(guī)范是使用import和export關(guān)鍵字

2、通過webpack引入React

import ... from ...

• yarn add create react-dom
• import React from 'react'
• import ReactDOM from 'react-dom'
• 注意大小寫，盡量保持一致

可用create-react-app代替

yarn global add create-react-app create-react-app react-demo-1 cd react-demo-1 yarn start

例1：

hardcore-swanson-cwmvu - CodeSandbox?codesandbox.io

失敗是因為App = React.create...只執(zhí)行了一次

要改成函數(shù)，才可以讓它重新渲染執(zhí)行

普通代碼立即求值，讀取當(dāng)前值

函數(shù)會等調(diào)用時再求值，即延遲求值。且求值時才會讀取最新值

對比React元素和函數(shù)組件

App1 = React.createElement( 'div' , null，n)App1是一個 React元素

App2 = ()=>React.createElement( 'div' , null, n)App2是一個React函數(shù)組件

函數(shù)App2是延遲執(zhí)行的代碼，會在被調(diào)用的時候執(zhí)行，這里指的是代碼的執(zhí)行時機，沒有說同步和異步，同步和異步是得到結(jié)果的時機

二、React元素和React函數(shù)組件

React元素

React.createElement(1,2,3)三個參數(shù)為，標(biāo)簽名、屬性名、子屬性

• createElement的返回值element可以代表一個div，本身不是一個對象無法直接插入到頁面中
• 但element并不是真正的div (DOM對象)
• 所以我們一般稱element為虛擬DOM對象

()=> React元素

• 返回element的函數(shù)，也可以代表一個 div
• 這個函數(shù)可以多次執(zhí)行，每次得到最新的虛擬div
• React會對比兩個虛擬div，找出不同，局部更新視圖
• 找不同的算法叫做DOM Diff 算法

三、JSX

JSX就是JS的拓展版

方法一: CDN

• 引入 babel.min.js
• 把<script>改成<script type="text/babel">
• babel會自動進行轉(zhuǎn)譯(可以理解為翻譯)，此處畫圖
• 這種方式似乎并不支持src

goofy-sky-fmnhd - CodeSandbox?codesandbox.io

• 所有的標(biāo)簽用標(biāo)簽的形式寫，如果要插入js變量或js函數(shù)就用花括號包起來

注意

• 永遠不要再生產(chǎn)環(huán)境使用方法一，因為效率太低
• 它要下載一個babel.min.js
• 它還要在瀏覽器端把JSX翻譯成JS

方法二：webpack + babel-loader

方法三:使用create-react-app

跟@vue/cli用法類似

• 全局安裝yarn global add create-react-app
• 初始化目錄create-react-app react-demo-1
• 進入目錄cd react-demo-1

為了方便學(xué)習(xí)，src目錄只留下兩個文件

為了方便學(xué)習(xí)，把 public/index.html中多余的刪掉

• 開始開發(fā)yarn start
• App.js默認(rèn)就使用了jsx語法，因為webpack讓JS默認(rèn)走babel-loader

使用JSX的注意事項

1、注意className

<div className="red">n</div>被轉(zhuǎn)譯為

React.createElement('div', {className:'red'}, "n")

2、插入變量

• 標(biāo)簽里面的所有JS代碼都要用抱起來
• 如果你需要變量n，那么就用把n包起來
• 如果你需要對象,那么就要用把對象包起來，如{{name:'frank'} }

3、習(xí)慣return后面加()

JSX的條件判斷

還可以寫成

還可以寫成

結(jié)論：在Vue里只能用Vue提供的語法寫條件判斷，在React里想怎么寫就怎么寫，就是寫JS

React循環(huán)語句

還可以寫成

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的react 引入html文件_React起手式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。