-
JSX 1、js的一種語法擴展 2、jsx代替 React.createElement()方法，書寫方便 3、jsx返回的是一個element對象 4、注意: 屬性的倆處區別: ……className代替class 屬性 ……htmlfor 代替 for屬性查看全部
-
flag,點贊按鈕
查看全部 -
props屬性是由上到下 單向傳遞的
context提供了在組件中共享此類值的方法
設計目的：共享對于組件來說的全局數據
不要為了僅僅避免在幾個層級下的組件傳遞props而使用context
查看全部 -
狀態提升：
將共享的狀態提升至最近的父組件進行管理
自上而下的數據流 top-down data flow
任何可變數據只有一個數據源，在數據源對數據進行管理
和雙向綁定的區別：
需使用回調函數
便于尋找debug
查看全部 -
實例分析?
組件：
評論列表 CommentList.js
留下評論 CommentBox.js
狀態：
狀態提升—>父組件管理 App.js
State: {comments: []}
數據流向：單向數據流Top-down flow。從父組件流入子組件
查看全部 -
表單元素和其他DOM元素的區別
Controlled Components - 受控組件
例：留言框
非受控組件：表單的替代技術 保存到dom，更容易集成
查看全部 -
組件初始化
constructor componentDidMount
組件更新
New props setState() forceUpdate() —>render ?componentDidUpdate
組件卸載
componentWillUnmount
舉例：電子鐘表
初始化當前時間
組件添加定時器
組件刪除
查看全部 -
屬性：不可變，外部傳入
狀態（state）：可變，私有
組件內部的數據可以動態改變
This.setState()是更新state的唯一途徑
例：點贊按鈕
查看全部 -
Props（屬性）
組件—函數，輸入—輸出
V = f(props)
例： 一張名片
樣式：bootstrap foo，通過npm安裝在my-first-react工程文件夾中
在index.js中引用bootstrap
屬性是只讀的
純函數：不改變函數的值
非純函數
jsx只支持純函數
查看全部 -
這奇怪的HTML被編譯成什么？
BABEL在線編譯工具
一種語法糖，替代React.createElement()
返回的是ReactElement對象，此對象的屬性比較復雜，本質上是Object
查看全部 -
JSX ?javascript語法擴展
基本語法
花括號內添加 JavaScript表達式
例：{’String’} 直接輸出
創建一個List實現Repeat{12 + 2}計算后可直接輸出
{[1, 2, 3]}類似Repeat
Render(){
const todoList = [‘Learn React’, ‘Learn Redux’]
Return(
<div>
<h1> Hello React</h1>
<ul>
{
todoList.map(item =>
<li>{item}</li>?
)
}
</ul>
實現三元表達式</div>
)
}
Render(){
const isLogin = true
return(
<div>
<h1>Hello React</h1>
{isLogin ? <p>你已經登錄</p> :<p>請登錄</p>}
</div>
)
}
兩個特殊屬性
class ? className
for ? ?htmlFor
其他屬性與HTML屬性一致
查看全部 -
#Readme
項目文檔
#package.json
項目依賴、命令
#public公共文件
index.html：主頁 root節點是程序的主入口
#src文件
app文件與樣式文件
#新建組建(使用es6的語法)
1，src文件夾下，創建Welcome.js
2，引入依賴 import
3，新建類 extends React.component
4，新建render(){}方法，顯示結果
????return <h1> Hello React</h1>
5，導出整個類
????export default Welcome
6，把Welcome component掛在到節點上
????打開index.js，使用ReactDOM進行掛載
查看全部 -
1，進入剛才創建的代碼
cd my-first-react
2，查看package.json文件
cat pakcage.json
發現已內置npm命令（npm start, npm build, npm test, npm eject）
3，npm start
terminal自動化啟動并在chrome中打開localhost:3000
查看全部 -
# 準備開發環境
1，官方腳手架工具 create-react-app
所需工具：terminal，node（版本大于6.5），npm
npm install create-react-app -g
2，創建項目
create-react-app my-first-react
開始自動安裝依賴，耗時大概幾分鐘。
查看全部 -
JSX，其實是一種語法糖——React.createElement()，它返回的是ReactElement對象。
查看全部
舉報