初識React?
React是一個用于構建用戶界面的 JavaScript 庫，由 Facebook 開發和維護。
官網文檔：React 官方中文文檔
特點
1.聲明式編程
2.組件化開發
3.多平臺適配
開發依賴
開發React必須依賴三個庫：
1.react：包含react所必須的核心代碼
2.react-dom：react渲染在不同平臺所需要的核心代碼
3.babel：將jsx轉換成React代碼的工具
引入依賴的方式：
1.CDN引入
<!-- CDN引入 -->
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>2.下載后，添加本地依賴
3.npm管理
案例-普通方式實現
注意：React18前后，渲染組件的書寫方式較為不同
React18之前：使用 ReactDOM.render() 方法來渲染組件
React18之后：使用 ReactDOM.createRoot() 方法來渲染組件
<body><div id="root"></div><!-- 1.引入依賴 --><script src="https://unpkg.com/react@18/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script><!-- 編寫React代碼 --><script type="text/babel">// React18之前：ReactDOM.render()// ReactDOM.render(<h2>Hello World</h2>,document.getElementById('root'))// React18之后：createRootconst root = ReactDOM.createRoot(document.getElementById('root'))/* 要修改文本內容step1:將文本定義成變量*/let message = 'Hello World'//step2:監聽按鈕的點擊function btnClick() {// 2.1修改數據message = 'Hello React'// 2.2重新渲染界面rootRender()}rootRender()// step3.封裝一個渲染函數function rootRender( ){// 第一個（）表示方法；第二個()表示它是一個整體root.render((<div><h1>{message}</h1><button onClick={btnClick}>修改文本</button></div>))}</script>
</body>案例-組件化開發
可使用類的方式，將其封裝成一個組件
<body><div id="root"></div><script src="../lib/react.js"></script><script src="../lib/react-dom.js"></script><script src="../lib/babel.js"></script><script type="text/babel">// 使用組件重構代碼// 1.類組件-類名必須大寫！！// 2.函數式組件class App extends React.Component {// 組件數據constructor() {super()//this.state = {定義的數據}this.state = {message:"Hello World"}}// 組件方法(實例方法)btnClick() {//該函數默認this指向為undefined——改變其this指向// 內部完成兩件事：1.將state中的值修改掉 2.自動重新執行render函數this.setState({message:"Hello React"})}// render中返回的jsx內容即root根節點渲染內容render() {// console.log("render",this);//此處this-App組件實例return (<div><h2>{this.state.message}</h2><button onClick={this.btnClick.bind(this)}>修改文本</button></div>)}}// 將組件渲染到界面上const root = ReactDOM.createRoot(document.getElementById('root'))root.render(<App />)</script>
</body>JSX語法解析
jsx書寫規范
render(){const {message} = this.state/* 書寫規范：1.JSX結構中只有一個根元素2.JSX結構通常包裹一個（）—— 將整個jsx當成一個整體，實現換行、3.jsx可以是單標簽，也可以是雙標簽，但是單標簽必須以/>結尾*/return (<div><h1>{ message }</h1><br/></div>)
}jsx注釋寫法
render(){const {message} = this.statereturn (<div>{/* jsx注釋寫法 */}<h1>{ message }</h1></div>)
}jsx插入內容
<body><div id="root"></div><script src="../lib/react.js"></script><script src="../lib/react-dom.js"></script><script src="../lib/babel.js"></script><script type="text/babel">//1.創建rootconst root = ReactDOM.createRoot(document.getElementById('root'))//2..定義App根組件class App extends React.Component {constructor() {super()this.state = {message:"Hello World",names:[ 'Jack', 'Tom', 'Lucy' ],count:100,aaa:undefined,bbb:null,ccc:true,friend:{name:'lucy', age:22},firstNmae:'張',lastName:'三',age:20,movies:["哪吒","唐探","三體"]}}render(){// 1.插入標識符const {message, names,count} = this.stateconst { aaa, bbb, ccc} = this.stateconst {friend} = this.state// 2.對內容進行運算后顯示(插入表達式)const {firstNmae, lastName} = this.stateconst fullName = firstNmae + "" + lastNameconst {age} = this.stateconst ageStr = age > 18 ? '成年人' : '未成年人'const {movies} = this.stateconst items = movies.map(item => <li>{item}</li>)// 3.返回jsx的內容return (<div>{/* 1.Number/String/Array直接顯示處理 */}<h1>{ message }</h1><h2> {names} </h2><h2> {count} </h2>{/* 2.undefined/null/Boolean頁面什么都不顯示-取值為空 */}<h2>{aaa}</h2><h2>{bbb}</h2><h3>{ccc}</h3>{/* 3.Object類型不能作為子元素顯示 */}{/* <h2>{friend}</h2> */}<h2>{Object.keys(friend)}</h2>{/* 4.可插入對應的表達式 */}<h2>{ 10 + 20 }</h2><h2>{firstNmae + "" + lastName}</h2><h2>{fullName}</h2>{/* 5.插入三元運算符 */}<h2>{ageStr}</h2><h2>{age >=18 ? "成年" : "未成年"}</h2>{/* 可以調用方法獲取結果 */}<ul>{items}</ul><ul>{movies.map(item => <li>{item}</li>)}</ul><ul>{this.getMovies()}</ul></div>)}getMovies(){const liEls = this.state.movies.map(item => <li>{item}</li>)return liEls}}// 3.將App組件渲染到root上root.render(<App />)</script>
</body>jsx綁定屬性
<body><div id="root"></div><script src="../lib/react.js"></script><script src="../lib/react-dom.js"></script><script src="../lib/babel.js"></script><script type="text/babel">//1.創建rootconst root = ReactDOM.createRoot(document.getElementById('root'))//2..定義App根組件class App extends React.Component {constructor() {super()this.state = {title:"學習第一天",imgURL:"https://p1.ssl.qhmsg.com/t0143b426aee3bb03cb.jpg",link:"htttp://www.baidu.com",isActive:true,objStyle:{color:"red", fontSize:"30px"}}}render(){const {title, imgURL,link,isActive,objStyle} = this.state// 需求：isActive為true時，添加active類名// 寫法一：const className = `abc cba ${isActive? "active" : ""}`// 寫法二：const classList = ["abc","cba"]if(isActive) {classList.push("active")}return (<div>{/* 1.基本屬性綁定 */}<h1 title={title}>我是h1元素</h1>{/* <img src={imgURL} alt=""/> */}<a href={link}>百度一下</a>{/* 2.綁定class屬性 */}<h2 className={className}>哈哈哈哈哈</h2><h2 className={classList.join(" ")}>哈哈哈哈哈</h2>{/* 3.綁定style屬性:綁定對象類型 */}<h2 style={{color:"red", fontSize:"30px"}}>11111</h2><h2 style= {objStyle}>888</h2></div>)}}// 3.將App組件渲染到root上root.render(<App />)</script>
</body>
)
