Más contenido relacionado Similar a 只需要懂Jquery也能學react js (19) 只需要懂Jquery也能學react js3. Why react.js ?
1. write once use anywhere.
learn once write anywhere
2. high performance
3. Component are the future of the web
development
4. It’s awesome for SEO
(前後端都吃同一份JSX)
5. facebook maintaining this project
5. The bad part?
1. JSX: A working solution, but it needs more
work.
(比較起來寫 angular 的template比較輕鬆)
2. …
(等寫多了再補充)
6. JSX intro
JSX 是一種在 Javascript 中使用的 XML 語法,目的是用
來轉換成原生的 Javascript。React 官方推薦使用。
官方推薦的理由如下:
• 可以輕易的檢視整個 DOM 的
結構,就跟你使用 HTML 一樣。
• 方便維護修改。
• 概念上非常相似于 XML。
var Hello = React.createClass({
render: function() {
return (
<div className='Hello'>
Hello World!
</div>
)
}
});
7. use sublime text
<script src="http://fb.me/react-0.13.3.js"></script>
<script src="http://fb.me/JSXTransformer-0.13.3.js"></script>
<script type="text/jsx">
/** @jsx React.DOM */
/* JSX 程式碼從這邊開始寫 */
</script>
直接開啟一個html文件來寫吧:
8. description
•第一個 js是 react js 核心
•第二個JSXTransformer
顧名思義就是 jsx 轉 js 的函式庫
• type=“text/jsx"
•/** @jsx React.DOM */
給瀏覽器看的,讓瀏覽器以jsx 來編譯成js
9. Let’s Hello World !
1. React.createClass()
2. React.render()
用下列兩個method 來寫吧!
註:react v0.13 以前用的是 React.renderComponent()
寫Hello World之前,有些事情必須先知道。
透過React.JS寫網頁時,
我們並不會直接寫HTML Tag,而是寫React Component
12. Online Editor - JSBin
1. http://jsbin.com/panuyu/
edit?html,js,output
• javascript 的分頁下拉選單
選擇”JSX(React)” 就可以
編輯 JSX
13. Online Editor - jsfiddle
1. https://jsfiddle.net/reactjs/69z2wepo/
JSFiddle 官方twitter 提供支援react.js
14. jsx 保留字
• class 需要轉為 className
• for 需要轉為 htmlFor
var Hello = React.createClass({
render: function() {
return(<h1 className=“hello”>Hello World!</h1>);
}
});
15. Overview:We’re going to Build a
“Tweet Box”
• 1個textarea 上限140個字
• 1個Tweet Button
• 按下 “Add photo” 按鈕會再減少23個字元
• 使用bootstrap 樣式
17. Thinking…. use jQuery
• 建立UI : button, textarea
• button 初始化時設為disable
• textarea 綁定event:
1.計算輸入的字串長度
2.收到event 把 button disable設為 false
• 按下 “Add photo” 按鈕會再減少23個字元
18. Build - UI
step 1.先建立<button>
step 2.加入 library 最新版本的 bootstrap
step 3. Add classes on <button>btn btn-primary
<button class=“btn btn-primary”>button</button>
19. Build - UI
button 已經加入了 bootstrap 樣式
<div class="well clearfix">
<textarea class="form-control"></textarea><br/>
<button class="btn btn-primary pull-right">Tweet</button>
</div>
修改html 如上面的程式碼, 建立tweet box 的layout
20. Build - UI
We’re done!
以上步驟無關 react !
但是會使我們的 UI 更好看
http://jsbin.com/jofivi/1/edit?html,output
22. jQuery - 按鈕初始化 disable
$("textarea").on("input", function() {
if ($(this).val().length > 0) {
$("button").prop("disabled", false);
} else {
$("button").prop("disabled", true);
}
});
字數大於0時,
disabled設為false
反之為true
jQuery: http://jsbin.com/wewimu/2/edit?js,output
25. Live Coding - 建立元件
樣板:jsbin.com/jofivi/1/edit?html,output
完成:jsbin.com/curuzo/11/edit?js,output
26. React 的寫作要點
• 使用 className 取代 class
• <br> 需要改為有斜線結尾 <br />
• 發現output 畫面空白的畫面
需要仔細檢查程式碼有沒有錯誤
27. 實作 -按鈕初始化 disable
jQuery: $("button").prop("disabled", true);
React:
render: function() {
return (
...
<button className="..." disabled>Tweet</button>
...
);
}
28. 實作 - handle event
jQuery:
$("textarea").on("input", function() {
...
}
React:
React.createClass({
handleChange: function(event) {
},
render: function() {
...
}
});
react 裡面提供自訂method 這裏我們寫作 handleChange()
29. 實作 - handle event
React: <textarea className="form-control"
onChange={this.handleChange}></textarea>
我們在render function 裡面
<textarea> 多一個屬性 onChange 來傳遞事件
handleChange: function(event) {
console.log(event.target.value);
},
React:
我們把 log 印出來
30. 實作 - 狀態改變
在react 我們不會直接去變更dom
我們改變 “state” 讓 react 自己更新
這個方法叫做 this.setState()
31. 實作 - 狀態改變
每當 state 更新的時候
render() 會被call 一次
你可以在 render() 裡面拿到 state
32. 實作 - 狀態改變
這裏介紹特殊的方法叫做 getInitialState
var TweetBox = React.createClass({
getInitialState: function() {
return {
text: ""
};
},
handleChange: ...
render: ...
});
他會回傳一個js object,我們把物件成員們初始狀態寫在這裡
33. 實作 - 狀態改變
接著,我們來修改 event handler
handleChange: function(event) {
this.setState({ text: event.target.value });
},
我們透過 setState 這個方法
並且傳入一個要更新的 key-value
<br/>
{this.state.text}
我們在 render function 加入一段測試code 把結果印出來
34. 實作 - Enable/Disable Button
<button className="btn btn-primary pull-right"
disabled={this.state.text.length === 0}>Tweet</button>
結果:
<button className="btn btn-primary pull-right"
disabled={true}>Tweet</button>
所以我們可以這麼改, 加入判斷式
<button className="btn btn-primary pull-right"
disabled={false}>Tweet</button>
結果:
35. Live Coding - 事件觸發, button
樣板:jsbin.com/curuzo/edit?js,output
完成:jsbin.com/curuzo/11/edit?js,output
37. 實作 - 剩餘字數計算(jQuery)
<textarea ...></textarea><br>
<span>140</span>
<button ...>Tweet</button>
我們先在view上面增加這一段(黑色粗體)
如果是jQuery 的做法....
$("textarea").on("input", function() {
$("span").text(140 - $(this).val().length);
...
});
39. 實作 -加入照片按鈕
140-117 = 23
1. 建立”Add Photo” button
2. button 是一個可以切換on/off 狀態
3. 如果是on 將會再減去23 個字元
4. 當然如果是on,
就算沒輸入文字 Tweet Buton 會是enable的狀態
JQuery example: http://jsbin.com/xupice/2/edit
40. 實作 -加入照片按鈕 (jQuery)
...
<button class="js-tweet-button btn btn-primary pull-right" disabled>Tweet</button>
<button class="js-add-photo-button btn btn-default pull-right">Add Photo</button>
...
我們先在view上面增加這一段
一個class=“js-tweet-button ” 一個class=“js-add-photo-button"
$("textarea").on("input", function() {
$("span").text(140 - $(this).val().length);
if ($(this).val().length > 0) {
$(".js-tweet-button").prop("disabled", false);
} else {
$(".js-tweet-button").prop("disabled", true);
}
});
然後改寫jQuery
原先:
$("button")
41. 實作 -加入照片按鈕 (jQuery)
$("textarea").on("input", function() {
...
});
$(".js-add-photo-button").on("click", function() {
if ($(this).hasClass("is-on")) {
$(this)
.removeClass("is-on")
.text("Add Photo");
} else {
$(this)
.addClass("is-on")
.text("✓ Photo Added");
}
});
加入photo 這一段 jQuery
jQuery的部分我們用”is-on”
這個class 當作 flag
判斷是否被按下
42. 實作 -加入照片按鈕 (jQuery)
$("textarea").on("input", function() {
if ($(".js-add-photo-button").hasClass("is-on"))
{
$("span").text(140 - 23 - $(this).val().length);
} else {
$("span").text(140 - $(this).val().length);
}
if (...) {
...
});
接著我們要改判斷字數的部分
“is-on” 的狀態下
需要多扣掉23個字元
43. 實作 -加入照片按鈕 (jQuery)
$(".js-add-photo-button").on("click", function() {
if ($(this).hasClass("is-on")) {
...
if ($("textarea").val().length === 0) {
$(".js-tweet-button").prop("disabled",
true);
}
} else {
...
$(".js-tweet-button").prop("disabled", false);
}
});
最後還要加入判斷:
Add-photo button
“is-on” 的狀態下
假如textarea 是沒有輸入字元的
Tweet button 是enable 的狀態
45. 實作 -加入照片按鈕 (React)
<button ...>Tweet</button>
<button className="btn btn-default pull-right">Add Photo</button>
我們來修改JSX
在state 增加一個變數: photoAdd
更新render() or
增加addPhoto 的 clicke event handler()
46. 實作 -加入照片按鈕 (React)
<button className="btn btn-default pull-right">
{this.state.photoAdded ? "✓ Photo Added" : "Add Photo" }
</button>
getInitialState: function() {
return {
text: "",
photoAdded: false
};
},
修改getInitialState
我們來修改JSX photoAdded 的狀態
47. 實作 -加入照片按鈕 (React)
<button className="btn btn-default pull-right"
onClick={this.togglePhoto}>
{this.state.photoAdded ? "✓ Photo Added" : "Add Photo" }
</button>
增加click event handler()
togglePhoto: function(event) {
this.setState({ photoAdded: !this.state.photoAdded });
},
click後反轉 this.state.photoAdded 的變數
48. 實作 -加入照片按鈕 (React)
<span>{140 - this.state.text.length}</span>
剩餘字數的部分
<span>{ this.remainingCharacters() }</span>
我們改用一個 function來改寫, 讓他好閱讀一點
remainingCharacters: function() {
if (this.state.photoAdded) {
return 140 - 23 - this.state.text.length;
} else {
return 140 - this.state.text.length;
}
},