文章目錄

? ? ? ?React是什么？

為什么要學(xué)習(xí)React?

React開發(fā)前準(zhǔn)備?

創(chuàng)建React項(xiàng)目?

React項(xiàng)目結(jié)構(gòu)簡介?

React組件化

初識(shí)JSX?

渲染JSX描述的頁面

?JSX語法

JSX的Class與Style屬性

JSX生成的React元素

條件渲染（一）

條件渲染 （二）

列表渲染

?事件處理

---

React是什么？

React 起源于 Facebook 的內(nèi)部項(xiàng)目，于2013年5月公開發(fā)布。
用于構(gòu)建用戶界面的 JavaScript 庫。

React 特點(diǎn)

1、聲明式 ? 以聲明式編寫 UI，我們只需要編寫代碼描述UI，當(dāng)數(shù)據(jù)變動(dòng)時(shí) React 能高效更新并渲染合適的組件

2、JSX ? JSX 是 JavaScript 語法的擴(kuò)展。React 開發(fā)不一定使用 JSX ，但我們建議使用它。

3、高效 ?React通過對(duì)DOM的模擬，最大限度地減少與DOM的交互。

4、組件 ? 通過 React 構(gòu)建組件，使得代碼更加容易得到復(fù)用，能夠很好的應(yīng)用在大項(xiàng)目的開發(fā)中。

5、單向響應(yīng)的數(shù)據(jù)流 ? React 實(shí)現(xiàn)了單向響應(yīng)的數(shù)據(jù)流，從而減少了重復(fù)代碼，這也是它為什么比傳統(tǒng)數(shù)據(jù)綁定更簡單。

為什么要學(xué)習(xí)React?

1、React是目前前端最火的框架之一

2、React是目前企業(yè)技術(shù)棧中要求的知識(shí)點(diǎn)

3、React可以提升開發(fā)體驗(yàn)

4、...

React開發(fā)前準(zhǔn)備?

?React官方參考文檔：https://zh-hans.reactjs.org/

創(chuàng)建React項(xiàng)目?

使用集成的工具鏈，以實(shí)現(xiàn)最佳的用戶和開發(fā)人員體驗(yàn)。

Create React App工具鏈

Create React App 是用 React 創(chuàng)建新應(yīng)用的最佳方式，它會(huì)配置你的開發(fā)環(huán)境，以便使你能夠使用最新的 JavaScript 特性，提供良好的開發(fā)體驗(yàn)。

npx create-react-app my-app?

溫馨提示?

1、需要在你的機(jī)器上安裝 Node >= 14.0.0 和 npm >= 5.6

2、項(xiàng)目名稱不能存在大寫字母，可以使用橫杠(-)連接多個(gè)詞匯

運(yùn)行項(xiàng)目

項(xiàng)目創(chuàng)建完成之后，啟動(dòng)方式也是有他的專屬方式

// 第一步：進(jìn)入項(xiàng)目的根目錄
cd my-app
// 第二步：啟動(dòng)項(xiàng)目
npm start

啟動(dòng)成功效果：

?VSCode快捷鍵

vsCode有很多針對(duì)React快捷鍵，這里我推薦： ES7

React/Redux/GraphQL/React-Native snippets

React項(xiàng)目結(jié)構(gòu)簡介?

?了解React項(xiàng)目的項(xiàng)目結(jié)構(gòu)對(duì)我們繼續(xù)開發(fā)是很有必要的

node_modules：React項(xiàng)目需要的依賴包，注意：此文件夾不可以移動(dòng)壓縮復(fù)制等操作public：React項(xiàng)目靜態(tài)資源文件夾，包含 index.html 入口文件、圖片、 manifest.json 配置文件等src：源碼文件夾，我們開發(fā)主要在這里編寫代碼 .gitignore：git忽略文件package-lock.json：完整依賴包的信息文件package.json：定義項(xiàng)目所需要的各種模塊名稱、版本信息等README.md：markdown文件，項(xiàng)目的注釋或描述文件

src 文件夾下的文件

App.css：App組件對(duì)應(yīng)的css文件App.js：App組件，主入口組件App.test.js：App組件測試文件index.css：index主入口文件對(duì)應(yīng)css文件，也是公共css文件logo.svg：logo圖片reportWebVitals.js：檢測文件。包含三個(gè)關(guān)鍵指標(biāo)（CLS、FID、LCP）和兩個(gè)輔助指標(biāo)（FCP、TTFB）setupTests.js：測試文件，針對(duì)項(xiàng)目編寫測試用例使用

React組件化

?組件

在React應(yīng)用中，我們把一個(gè)頁面看作是由一個(gè)個(gè)組件構(gòu)成的。每一個(gè)組件可以包含自己的頁面結(jié)構(gòu)（HTML）與頁面邏輯（JavaScript）

?組件化

組件化開發(fā)，帶來了全新的開發(fā)體驗(yàn)，也帶來了全新的編碼方式。
在React中，構(gòu)建管理自身狀態(tài)的封裝組件，然后對(duì)其組合以構(gòu)成復(fù)雜的 UI。

由于組件邏輯使用 JavaScript 編寫而非模板，因此你可以輕松地在應(yīng)用中傳遞數(shù)據(jù)，并保持狀態(tài)與 DOM 分離。
比如：App組件

初識(shí)JSX?

?JSX的作用

?我們使用JSX來實(shí)現(xiàn)組件中的頁面結(jié)構(gòu)。

什么是JSX

一個(gè) JavaScript 的語法擴(kuò)展，JSX 可以生成 React “元素”，React元素用來描述頁面應(yīng)該長什么樣子。

?index.js

?App.js

?

渲染JSX描述的頁面

?應(yīng)用渲染界面的過程：

index.js

?App.js

這段jsx描述了界面長什么樣子

?最終生成的頁面DOM

?嘗試自己寫一段JSX，代替App組件的界面

<h1>hello，xiaotong</h1> 

觀察最終生成的DOM結(jié)構(gòu)?

?JSX語法

?最簡單的一段jsx

<h1>Hello, xiaotong</h1>

在JSX中嵌入表達(dá)式

在 {} 大括號(hào)內(nèi)放置任何有效的 JavaScript 表達(dá)式

const name = 'xiaotong';
const element = <h1>Hello, {name}</h1>;

JSX中指定屬性

如果是靜態(tài)值，則直接使用引號(hào)，如果是動(dòng)態(tài)值，則使用 { js表達(dá)式 }

const element = <img src="https://www.baidu.com/img/flexible/logo/pc/result.png"></img>;

const avatarUrl='https://www.baidu.com/img/flexible/logo/pc/result.png'
const element = <img src={avatarUrl}></img>;

JSX子元素嵌套

<div><h1>Hello!</h1><h2>小童</h2></div>

JSX的Class與Style屬性

?設(shè)置元素的類名

提示：
在jsx中，需要將 class 修改為 className

import React, { Component } from 'react'
import "./App.css"
export default class App extends Component {render() {return (<div className='box'></div>)}
}

.box{width: 200px;height: 200px;background-color: red;
}

設(shè)置元素的style

JSX中style的值是一個(gè)對(duì)象。

import React, { Component } from 'react'
export default class App extends Component
{render() {return (<div style={{width:"200px",height:"200px",background:"green" }}></div>)}
}

JSX生成的React元素

?1、JSX最終生成一個(gè)React元素。

const element=<h1 className="con">hello，xiaotong</h1>

JSX被編譯后變成這樣一段JS代碼：

const element = React.createElement('h1', {className: 'con'},'hello，xiaotong'
);

React.createElement 返回的對(duì)象長這個(gè)樣子，這個(gè)對(duì)象用來描述界面應(yīng)該長什么樣子，我們就把這個(gè)對(duì)象稱為 React元素 。

//簡化版
const element = {type: 'h1',props: {className: 'con',children: 'hello，baizhan'}
};

可以打印一下，查看完整的React元素

console.log(<h1 className="con">hello，xiaotong</h1>)

?之后 React DOM 會(huì)根據(jù)這個(gè)對(duì)象描述的信息生成 真正的DOM元素 。

條件渲染（一）

?我們可以根據(jù)不同的條件，渲染不同的界面。

1、使用 if

const flag=trueif(flag){return <div>生存吧</div>
}return <div>毀滅吧</div>

2、三目運(yùn)算符 condition ? true : false

const flag = true
return flag ? <div>生存吧</div> : <div>毀滅吧</div>

或者

const flag = true
const element=flag ? <div>生存吧</div> : <div>毀滅吧</div>
return element

條件渲染 （二）

?1、與運(yùn)算符 &&

const flag=true
return flag && <div>生存吧</div>

const flag=true
return <div>?{flag && "生存吧"} </div>

提示：
在 JavaScript 中， true && expression 總是會(huì)返回 expression , 而 false && expression 總是會(huì)返回 false 。
因此，如果條件是 true ， && 右側(cè)的元素就會(huì)被渲染，如果是 false ，React 會(huì)忽略并跳過它。

2、使用 null?

如果返回 null ，則React什么都不渲染

const flag=true
return {flag ?<div>生存吧</div> :null}

列表渲染

?列表是頁面常見的展示效果

?可以通過使用 {} 在 JSX 內(nèi)構(gòu)建一個(gè)元素集合。

return ?<ul>{["前端團(tuán)隊(duì)","后端團(tuán)隊(duì)","設(shè)計(jì)團(tuán)隊(duì)"].map((item,index) =>{return <li key={ index }>{ item } </li>})}</ul>

復(fù)雜數(shù)據(jù)列表渲染

const list = [{"id": 2208287,"desc": "鄞州：家有富礦，博物館的美好力量，你get到了嗎？ “21世紀(jì)的博物館擁有巨大的","title": "果小桃"},{"id": 2208760,"desc": "梅里雪山北坡|我的第二次重裝徒步·附攻略1 篇1? \t 字?jǐn)?shù)限制🚫詳細(xì)攻略會(huì)分","title": "小蘑豬zcy"},{"id": 2208882,"desc": "? 巴塞羅那觀賞日落的好去處 巴塞羅那，一座地中海城市，融合了羅馬、中世紀(jì)的風(fēng)格","title": "Go旅城通票"}
]return <ul>{list.map((item, index) => {return (<li key={item.id}><h3>{item.title}</h3><p>{item.desc}</p></li>)})}</ul>

提示：
key 幫助 React 識(shí)別哪些元素改變了，比如被添加或刪除。因此你應(yīng)當(dāng)給數(shù)組中的每一個(gè)元素賦予一個(gè)確定的標(biāo)識(shí)。

?事件處理

?React 元素的事件處理和 DOM 元素的很相似，但是有一點(diǎn)語法上的不同：

1、React 事件的命名采用小駝峰式（camelCase），而不是純小寫。
2、使用 JSX 語法時(shí)你需要傳入一個(gè)函數(shù)作為事件處理函數(shù)，而不是一個(gè)字符串。