只要懂 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 introJSX 是一種在 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()

var Hello = React.createClass({render: function() {

return(<h1>Hello World!</h1>);}});

•寫 react component 宣告變數用大寫的開頭

React.render()

React.render(<Hello />,document.getElementById(‘containe

r’));

•用 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

var Hello = React.createClass({render: function() {

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

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

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:render: function() { return ( ... <button className="..." disabled>Tweet</button> ... );}

實作 - handle event

jQuery:$("textarea").on("input", function() { ...}

React: React.createClass({ handleChange: function(event) { }, render: function() { ... }});

react 裡面提供自訂 method 這裏我們寫作 handleChange()

實作 - handle eventReact: <textarea className="form-control"

onChange={this.handleChange}></textarea>

我們在 render function 裡面<textarea> 多一個屬性 onChange 來傳遞事件

handleChange: function(event) { 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

handleChange: function(event) { 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>

結果： <button className="btn btn-primary pull-right" disabled={true}>Tweet</button>

所以我們可以這麼改 , 加入判斷式

<button className="btn btn-primary pull-right" 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 的做法 ....

$("textarea").on("input", function() { $("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” button2. 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"

$("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")

實作 - 加入照片按鈕 (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 判斷是否被按下

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

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

所以其實 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()

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

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

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

We’re done

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

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