只需要懂Jquery也能學react js

只要懂jQuery
也能學會react js
（react js入門篇）
Justin @ 2015 Aug

原文出處
http://reactfordesigners.com/labs/reactjs-
introduction-for-people-who-know-just-enough-
jquery-to-get-by/

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

react.js 使用情境?
1. 寫web 應用程式
2. 寫web component/ module
3. 寫native app

The bad part?
1. JSX: A working solution, but it needs more
work.
(比較起來寫 angular 的template比較輕鬆)
2. …
(等寫多了再補充)

JSX intro
JSX 是一種在 Javascript 中使用的 XML 語法，目的是用
來轉換成原生的 Javascript。React 官方推薦使用。
官方推薦的理由如下:
• 可以輕易的檢視整個 DOM 的
結構，就跟你使用 HTML 一樣。
• 方便維護修改。
• 概念上非常相似于 XML。
var Hello = React.createClass({
render: function() {
return (
<div className='Hello'>
Hello World!
</div>
)
}
});

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文件來寫吧：

description
•第一個 js是 react js 核心
•第二個JSXTransformer
顧名思義就是 jsx 轉 js 的函式庫
• type=“text/jsx"
•/** @jsx React.DOM */
給瀏覽器看的，讓瀏覽器以jsx 來編譯成js

Let’s Hello World !
1. React.createClass()
2. React.render()
用下列兩個method 來寫吧！
註：react v0.13 以前用的是 React.renderComponent()
寫Hello World之前，有些事情必須先知道。
透過React.JS寫網頁時，
我們並不會直接寫HTML Tag，而是寫React Component

React.creatClass()
return(<h1>Hello World!</h1>);
}
});
•寫react component 宣告變數用大寫的開頭

React.render()
React.render(
<Hello />,
document.getElementById(‘container’)
);
•用render() 顯示元件
• 第三行是元件在html的parent
也可以用document.body

Online Editor - JSBin
1. http://jsbin.com/panuyu/
edit?html,js,output
• javascript 的分頁下拉選單
選擇”JSX(React)” 就可以
編輯 JSX

Online Editor - jsfiddle
1. https://jsfiddle.net/reactjs/69z2wepo/
JSFiddle 官方twitter 提供支援react.js

jsx 保留字
• class 需要轉為 className
• for 需要轉為 htmlFor
return(<h1 className=“hello”>Hello World!</h1>);
}
});

Overview:We’re going to Build a
“Tweet Box”
• 1個textarea 上限140個字
• 1個Tweet Button
• 按下 “Add photo” 按鈕會再減少23個字元
• 使用bootstrap 樣式

Thinking…. use jQuery
• 建立UI : button, textarea
• button 初始化時設為disable
• textarea 綁定event：
1.計算輸入的字串長度
2.收到event 把 button disable設為 false
• 按下 “Add photo” 按鈕會再減少23個字元

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>

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

Build - UI
Ｗe’re done!
以上步驟無關 react ！
但是會使我們的 UI 更好看
http://jsbin.com/jofivi/1/edit?html,output

implement - 按鈕初始化 disable
$("button").prop("disabled", true);

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

Thinking…. use React
1. React.createClass()
2. React.render()
用下列兩個method 來寫元件吧！

Live Coding - 建立元件
樣板：jsbin.com/jofivi/1/edit?html,output
完成：jsbin.com/curuzo/11/edit?js,output

React 的寫作要點
• 使用 className 取代 class
• <br> 需要改為有斜線結尾 <br />
• 發現output 畫面空白的畫面
需要仔細檢查程式碼有沒有錯誤

實作 -按鈕初始化 disable
jQuery: $("button").prop("disabled", true);
React:
return (
...
<button className="..." disabled>Tweet</button>
...
);
}

實作 - handle event
jQuery:
...
}
React:
React.createClass({
handleChange: function(event) {
},
...
}
});
react 裡面提供自訂method 這裏我們寫作 handleChange()

實作 - handle event
React: <textarea className="form-control"
onChange={this.handleChange}></textarea>
我們在render function 裡面
<textarea> 多一個屬性 onChange 來傳遞事件
console.log(event.target.value);
},
React:
我們把 log 印出來

實作 - 狀態改變
在react 我們不會直接去變更dom
我們改變 “state” 讓 react 自己更新
這個方法叫做 this.setState()

每當 state 更新的時候
render() 會被call 一次
你可以在 render() 裡面拿到 state

這裏介紹特殊的方法叫做 getInitialState
var TweetBox = React.createClass({
getInitialState: function() {
return {
text: ""
};
},
handleChange: ...
render: ...
});
他會回傳一個js object，我們把物件成員們初始狀態寫在這裡

接著,我們來修改 event handler
this.setState({ text: event.target.value });
},
我們透過 setState 這個方法
並且傳入一個要更新的 key-value
<br/>
{this.state.text}
我們在 render function 加入一段測試code 把結果印出來

實作 - Enable/Disable Button
<button className="btn btn-primary pull-right"
disabled={this.state.text.length === 0}>Tweet</button>
結果：
disabled={true}>Tweet</button>
所以我們可以這麼改, 加入判斷式
disabled={false}>Tweet</button>
結果：

Live Coding - 事件觸發, button
樣板：jsbin.com/curuzo/edit?js,output
完成：jsbin.com/curuzo/11/edit?js,output

實作 - 剩餘字數計算(jQuery)
<textarea ...></textarea><br>
<span>140</span>
<button ...>Tweet</button>
我們先在view上面增加這一段(黑色粗體)
如果是jQuery 的做法....
$("span").text(140 - $(this).val().length);
...
});

實作 - 剩餘字數計算(React)
如果是React的做法....
<span>{ 140 - this.state.text.length} </span>
我們只要在render()裡面修改
不必更新 getInitialState() 或 handleChange()
記得把<br> 改成 </br> 避免出錯

實作 -加入照片按鈕
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

實作 -加入照片按鈕 (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"
if ($(this).val().length > 0) {
$(".js-tweet-button").prop("disabled", false);
} else {
$(".js-tweet-button").prop("disabled", true);
}
});
然後改寫jQuery
原先：
$("button")

...
});
$(".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
判斷是否被按下

if ($(".js-add-photo-button").hasClass("is-on"))
{
$("span").text(140 - 23 - $(this).val().length);
} else {
}
if (...) {
...
});
接著我們要改判斷字數的部分
“is-on” 的狀態下
需要多扣掉23個字元

$(".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 的狀態

所以其實 jQuery 也是會帶來一些困
擾
回顧一下先前提到的這張圖:
如果只有單純
一個event handle
一個dom
是非常簡單的
如果有多個event handler
要改變多個dom
那code 會非常的醜

實作 -加入照片按鈕 (React)
<button ...>Tweet</button>
<button className="btn btn-default pull-right">Add Photo</button>
我們來修改JSX
在state 增加一個變數： photoAdd
更新render() or
增加addPhoto 的 clicke event handler()

<button className="btn btn-default pull-right">
{this.state.photoAdded ? "✓ Photo Added" : "Add Photo" }
</button>
getInitialState: function() {
return {
text: "",
photoAdded: false
};
},
修改getInitialState
我們來修改JSX photoAdded 的狀態

<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 的變數

<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;
}
},

We’re done
樣板：jsbin.com/curuzo/10/edit?js,output
完成：jsbin.com/ratobilaju/2/edit?js,output

jQuery V.S React
jQuery: 初期怎麼寫都很快, 後期不易維護
React : 初期寫元件很麻煩, 後期很容易維護

只需要懂Jquery也能學react js

More Related Content

Viewers also liked (17)

Similar to 只需要懂Jquery也能學react js (19)

只需要懂Jquery也能學react js