狠狠撸
Submit Search
只需要懂Jquery也能學react js
?
Download as PPTX, PDF
?
23 likes
?
7,477 views
Justin Wu
Follow
React.js introduction for people who know just enough jquery to get by
Read less
Read more
1 of 50
Download now
Downloaded 59 times
More Related Content
只需要懂Jquery也能學react js
1.
只要懂jQuery 也能學會react js (react js入門篇) Justin
@ 2015 Aug
2.
原文出處 http://reactfordesigners.com/labs/reactjs- introduction-for-people-who-know-just-enough- jquery-to-get-by/
3.
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
4.
react.js 使用情境? 1. 寫web
應用程式 2. 寫web component/ module 3. 寫native app
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=/slideshow/j-queryreact-js/52005617/"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
10.
React.creatClass() var Hello =
React.createClass({ render: function() { return(<h1>Hello World!</h1>); } }); ?寫react component 宣告變數用大寫的開頭
11.
React.render() React.render( <Hello />, document.getElementById(‘container’) ); ?用render() 顯示元件 ?
第三行是元件在html的parent 也可以用document.body
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 樣式
16.
Thinking…. use jQuery
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
21.
implement - 按鈕初始化
disable $("button").prop("disabled", true);
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
23.
Thinking…. use React
24.
Thinking…. use React 1.
React.createClass() 2. React.render() 用下列兩個method 來寫元件吧!
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
36.
實作 - 剩餘字數計算
37.
實作 - 剩餘字數計算(jQuery) <textarea
...></textarea><br> <span>140</span> <button ...>Tweet</button> 我們先在view上面增加這一段(黑色粗體) 如果是jQuery 的做法.... $("textarea").on("input", function() { $("span").text(140 - $(this).val().length); ... });
38.
實作 - 剩餘字數計算(React) 如果是React的做法.... <span>{
140 - this.state.text.length} </span> 我們只要在render()裡面修改 不必更新 getInitialState() 或 handleChange() 記得把<br> 改成 </br> 避免出錯
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 的狀態
44.
所以其實 jQuery 也是會帶來一些困 擾 回顧一下先前提到的這張圖: 如果只有單純 一個event
handle 一個dom 是非常簡單的 如果有多個event handler 要改變多個dom 那code 會非常的醜
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; } },
49.
We’re done 樣板:jsbin.com/curuzo/10/edit?js,output 完成:jsbin.com/ratobilaju/2/edit?js,output
50.
jQuery V.S React jQuery:
初期怎麼寫都很快, 後期不易維護 React : 初期寫元件很麻煩, 後期很容易維護
Download