基礎部分 創建一個react的項目 創建一個react的項目 全局安裝 react 指令 使用腳手架創建應用 註意點： 1.全局安裝create react app才能使用腳手架創建應用 2.應用名稱全部為小寫字母，不能出現“TodoList”這樣的名稱 組件的使用 組件的組成 認識jsx 簡單的j ...
基礎部分
創建一個react的項目
創建一個react的項目
全局安裝 react 指令
// 全局安裝react （根據需要安裝，不是必須的） npm i -g react // 或者 yarn -global react // 全局安裝 react的腳手架 (創建react的應用，必須安裝腳手架) npm i -g create-react-app // 或者 yarn -global create-react-app使用腳手架創建應用
create-react-app 應用名稱 // 例如創建一個TodoList應用 create-react-app todo-list註意點：
1.全局安裝create-react-app才能使用腳手架創建應用 2.應用名稱全部為小寫字母，不能出現“TodoList”這樣的名稱
組件的使用
組件的組成
// React 是react組件必不可少的，用於支持jsx語法的模塊，雖然看不到引用，但是不能少 // Component 所有的react的組件都繼承於Component，它是react組件的基類 import React, { Component } from 'react'; // TodoItem 自定義的組件 import TodoItem from "./TodoItem" // 定義TodoList組件 ，該組件繼承於基類Component class TodoList extends Component { /*** * constructor 當前類的構造函數 * props 簡單的理解：是父類傳遞的參數，例如 傳遞的值 或 方法，它是一個對象 * super(props) 簡單的理解是：繼承父類中的傳遞的參數 **/ constructor(props){ super(props) // state 是 所有react變數的倉儲，簡單理解就是：當前組件的變數都放在這個對象中 this.state = { inputValue: "", List: [] } // 使用 bind綁定this，讓方法中的this永遠指向當前的組件（可根據需求改變this的指向） this.getList = this.getList.bind(this) this.inputChang = this.inputChang.bind(this) this.addItem = this.addItem.bind(this) this.delItem = this.delItem.bind(this) } // react組件必不可少的方法，return 返回的是jsx的模板，可以理解為類似html+js的模板 render() { return ( {/*在jsx中只能有一個根標簽，使用<></>(幽靈標簽)包裹，既能滿足jsx的語法格式，在瀏覽器解析時不會解析幽靈標簽，減少了dom樹結構節點 */} <> <div> <input value={this.state.inputValue} onChange={this.inputChang} /> <button onClick={this.addItem}>添加</button> </div> <ul> {this.getList()} </ul> </> ); }; // 遍歷輸出item getList() { ... } // 動態改變輸入框的值 inputChang( e ) { ... } // 添加item addItem() { ... } // 刪除item delItem(index) { ... } } // 導出TodoList export default TodoList;認識jsx
簡單的jsx的語法
... render() { return ( {/*在jsx中只能有一個根標簽，使用<></>(幽靈標簽)包裹，既能滿足jsx的語法格式，在瀏覽器解析時不會解析幽靈標簽，減少了dom樹結構節點 */} <> <div> <input value={this.state.inputValue} onChange={this.inputChang} /> <button onClick={this.addItem}>添加</button> </div> <ul> {this.getList()} </ul> </> ); }; ...在jsx中只能有一個根標簽，使用<></>(幽靈標簽)包裹，既能滿足jsx的語法格式，在瀏覽器解析時不會解析幽靈標簽，減少了dom樹結構節點,也可以使用代碼片段（Fragments ），效果和<></>相同，只是Fragments 還有更廣泛的使用，後面會有詳細說明
在jsx中使用註釋，多行使用{/* 註釋內容 */}，單行使用
// 多行 {/* 多行註釋內容 */} {/* 多行註釋內容 */} // 單行 { // 單行註釋內容 }在jsx中使用組件的變數或者方法，使用{}包裹
在jsx中綁定的方法預設this指向undefined，所以需要使用bind綁定this的指向
// 方式1： 在constructor指定this constructor(props){ super(props) this.state = { inputValue: "", List: [] } this.getList = this.getList.bind(this) this.inputChang = this.inputChang.bind(this) this.addItem = this.addItem.bind(this) this.delItem = this.delItem.bind(this) } // 方式2：綁定事件的時候指定this ... <li onClick={this.delItem.bind(this,index)}></li> ...
組件的基本通訊
最簡單的 父 ---> 子 傳值
// 父組件通過在子組件標簽上設置屬性傳遞數據 <Boy teacherName={ this.state.teacherName } /> <Girl teacherName={ this.state.teacherName } /> // 子組件通過this.props獲取父組件傳遞的數據 // this.props.teacherName 獲取老師的名稱 render(){ return ( <> <p> 我是{this.state.boyName},我的老師是{this.props.teacherName}, 我對老師很 <button onClick={()=> this.props.say(this.state.boyName,"滿意") } > 滿意 </button> </p> </> ) }最簡單的 子 ---> 父 通訊
// 父組件通過在子組件標簽上設置屬性傳遞數據 <Boy say = { this.stuSay } /> <Girl say = { this.stuSay } /> // 子組件通過this.props獲取父組件傳遞的數據 // this.props.say 獲取父組件提供的方法，通過調用父組件的方法，將傳遞的數據作為參數傳入，當父組件的方法被調用，就通過獲取當前方法參數的方式，得到了子組件傳遞的數據 render(){ return ( <> <p> 我是{this.state.boyName}, 我對老師很 <button onClick={()=> this.props.say(this.state.boyName,"滿意") } > 滿意 </button> </p> </> ) }最簡單的非父子通訊
核心思路：找到共同的父組件，同時使用父組件傳遞的值和方法
過程有些複雜，這裡省略了
teacher.js
import React,{ Component } from "react"
// 導入 Boy（男孩） 和 Girl（女孩） 組件
import Boy from "./boy"
import Girl from "./girl"
export default class Teacher extends Component {
constructor(props){
super(props)
this.state = {
teacherName: "Tom",
stuName: "",
stuSayContent: "",
boyName: "",
girlName: "",
boySayContent: "",
girlSayContent: ""
}
this.stuSay = this.stuSay.bind(this);
this.boySaySecret = this.boySaySecret.bind(this);
this.grilSaySecret = this.grilSaySecret.bind(this);
}
render(){
let evaluation = false
if (this.state.stuName!=="" && this.state.stuSayContent) {
evaluation = true
}
return (
<>
<p>我是{ this.state.teacherName }老師</p>
<div>
{
evaluation ? (<p>學生評價：{this.state.stuName}對我很{this.state.stuSayContent}</p>) : " "
}
</div>
<Boy
say = { this.stuSay }
teacherName={ this.state.teacherName }
boySaySecret = {this.boySaySecret}
girlSayContent = {this.state.girlSayContent}
/>
<Girl
say = { this.stuSay }
teacherName={ this.state.teacherName }
grilSaySecret = {this.grilSaySecret}
boySayContent = {this.state.boySayContent}
/>
</>
)
}
stuSay(stuName,stuSayContent){
this.setState(()=>{
return {
stuSayContent,
stuName
}
})
}
boySaySecret(constent){
this.setState(()=>{
return {
boySayContent : constent
}
})
}
grilSaySecret(constent){
this.setState(()=>{
return {
girlSayContent : constent
}
})
}
}
boy.js
import React,{ Component } from "react"
export default class Boy extends Component {
constructor(props){
super(props)
this.state = {
boyName: "龍震天"
}
}
render(){
return (
<>
<p>
我是{this.state.boyName},我的老師是{this.props.teacherName},
我對老師很
<button onClick={()=> this.props.say(this.state.boyName,"滿意") } >
滿意
</button>,
我想對女孩說：<button onClick={()=> this.props.boySaySecret("我喜歡你")}>悄悄話</button>，
她對我說：{this.props.girlSayContent}
</p>
</>
)
}
}
gril.js
import React,{ Component } from "react"
export default class Boy extends Component {
constructor(props){
super(props)
this.state = {
girlName: "憐香玉"
}
}
render(){
return (
<>
<p>
我是{this.state.girlName}，我的老師是{this.props.teacherName},
我對老師很
<button onClick={()=> this.props.say(this.state.girlName,"不滿意") } >
不滿意
</button>,
我想對男孩說：<button onClick={() => this.props.grilSaySecret("我也是")}>悄悄話</button>，
他對我說：{this.props.boySayContent}
</p>
</>
)
}
}
高級部分
待續....
