React.js 20150828
-
Upload
learningtech -
Category
Technology
-
view
358 -
download
0
Transcript of React.js 20150828
![Page 1: React.js 20150828](https://reader035.fdocuments.net/reader035/viewer/2022081604/58d16e4f1a28abed798b47af/html5/thumbnails/1.jpg)
React.jsA JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES
2015/08/28李佳駿
![Page 2: React.js 20150828](https://reader035.fdocuments.net/reader035/viewer/2022081604/58d16e4f1a28abed798b47af/html5/thumbnails/2.jpg)
React.js1. JUST THE UI
2. JSX
3. VIRTUAL DOM
4. DATA FLOW
![Page 3: React.js 20150828](https://reader035.fdocuments.net/reader035/viewer/2022081604/58d16e4f1a28abed798b47af/html5/thumbnails/3.jpg)
JSX.js JSX is a JavaScript syntax extension that looks
similar to XML. You can use a simple JSX syntactic transform
with React .
![Page 4: React.js 20150828](https://reader035.fdocuments.net/reader035/viewer/2022081604/58d16e4f1a28abed798b47af/html5/thumbnails/4.jpg)
JSX.js透過 React 建立元件有兩種方式 React.DOM.div();
React.createElement('div');
![Page 5: React.js 20150828](https://reader035.fdocuments.net/reader035/viewer/2022081604/58d16e4f1a28abed798b47af/html5/thumbnails/5.jpg)
JSX.js<div id="myd">23</div>
React.DOM.div({id: 'myId'}, 23);
React.createElement('div', {id: 'myId'},23);
Use JSX.js :
<div>Hello John</div>
![Page 6: React.js 20150828](https://reader035.fdocuments.net/reader035/viewer/2022081604/58d16e4f1a28abed798b47af/html5/thumbnails/6.jpg)
JSX.jsvar HelloMessage =React.createClass({displayName: "HelloMessage", render: function()
{ return React.createElement("div",
null, "Hello ", this.props.name); }});React.render(
React.createElement(HelloMessage, {name: "John"}), mountNode);
![Page 7: React.js 20150828](https://reader035.fdocuments.net/reader035/viewer/2022081604/58d16e4f1a28abed798b47af/html5/thumbnails/7.jpg)
JSX.jsvar HelloMessage =
React.createClass({
render: function()
{
return <div>Hello {this.props.name}</div>;
}
});
React.render(<HelloMessage name="John" />, mountNode);
![Page 8: React.js 20150828](https://reader035.fdocuments.net/reader035/viewer/2022081604/58d16e4f1a28abed798b47af/html5/thumbnails/8.jpg)
XSS 攻擊 XSS 的攻擊手法就是透過在我們的網頁中植入他想要執行的指令碼,所以這個駭客手段才會被稱為跨網站的指令碼 (Cross-Site-Scripting)
http://www.dotblogs.com.tw/jimmyyu/archive/2009/04/21/8118.aspx
![Page 9: React.js 20150828](https://reader035.fdocuments.net/reader035/viewer/2022081604/58d16e4f1a28abed798b47af/html5/thumbnails/9.jpg)
JSX GotchasYou can insert HTML entities within literal text in JSX:
First Second‧<div>First · Second</div>
If you want to display an HTML entity within dynamic content, you will run into double escaping issues as React escapes all the strings you are displaying in order to prevent a wide range of XSS attacks by default.
![Page 10: React.js 20150828](https://reader035.fdocuments.net/reader035/viewer/2022081604/58d16e4f1a28abed798b47af/html5/thumbnails/10.jpg)
JSX Gotchas<div>{'First · Second'}</div> // Bad: It displays "First · Second"
1. You need to make sure that the file is saved as UTF-8 and that the proper UTF-8 directives are set so the browser will display it correctly.
<div>{'First Second'}</div> ‧
![Page 11: React.js 20150828](https://reader035.fdocuments.net/reader035/viewer/2022081604/58d16e4f1a28abed798b47af/html5/thumbnails/11.jpg)
JSX Gotchas2. A safer alternative is to find the unicode number
corresponding to the entity and use it inside of a JavaScript string.
<div>{'First \u00b7 Second'}</div>
<div>{'First ' + String .fromCharCode(183) + 'Second'}</div>
![Page 12: React.js 20150828](https://reader035.fdocuments.net/reader035/viewer/2022081604/58d16e4f1a28abed798b47af/html5/thumbnails/12.jpg)
JSX Gotchas3. You can use mixed arrays with strings and JSX
elements. <div>{['First ',
<span>·</span>, ' Second']}</div>
4. As a last resort, you always have the ability to insert raw HTML. <div dangerouslySetInnerHTML=
{{__html: 'First · Second'}} />
![Page 13: React.js 20150828](https://reader035.fdocuments.net/reader035/viewer/2022081604/58d16e4f1a28abed798b47af/html5/thumbnails/13.jpg)
VIRTUAL DOMvar HelloMessage =
React.createClass({
render: function()
{
return <div>Hello {this.props.name}</div>;
}
});
React.render(<HelloMessage name="John" />, mountNode);
![Page 14: React.js 20150828](https://reader035.fdocuments.net/reader035/viewer/2022081604/58d16e4f1a28abed798b47af/html5/thumbnails/14.jpg)
傳統的網頁應用程式中,我們如果要增加互動性時勢必廣泛的操作 DOM 元素,一般來說現在最普遍的技術是使用 jQuery:
![Page 15: React.js 20150828](https://reader035.fdocuments.net/reader035/viewer/2022081604/58d16e4f1a28abed798b47af/html5/thumbnails/15.jpg)
React 的主要目標就是提供一種不同且更有效率的方式去執行關於操作更新 DOM 這個部分,最終這個方式會取代我們直接操作 DOM 的方法。
![Page 16: React.js 20150828](https://reader035.fdocuments.net/reader035/viewer/2022081604/58d16e4f1a28abed798b47af/html5/thumbnails/16.jpg)
<html><head><script src="https://code.jquery.com/jquery-1.9.1.js"></script><script src="//fb.me/react-0.13.1.js"></script> <meta charset="utf-8"> <title>JS Bin</title></head><body>
<div id = "content"></div></body></html>
React-1
![Page 17: React.js 20150828](https://reader035.fdocuments.net/reader035/viewer/2022081604/58d16e4f1a28abed798b47af/html5/thumbnails/17.jpg)
var CommentBox = React.createClass({ render: function() { return ( <div className="commentBox"> Hello, world! I am a CommentBox. </div> ); }});
React.render( <CommentBox />, document.getElementById('content'));
React-2
Jquery : $('#content')[0]
![Page 18: React.js 20150828](https://reader035.fdocuments.net/reader035/viewer/2022081604/58d16e4f1a28abed798b47af/html5/thumbnails/18.jpg)
React-3
Hello, world! I am a CommentBox.
![Page 19: React.js 20150828](https://reader035.fdocuments.net/reader035/viewer/2022081604/58d16e4f1a28abed798b47af/html5/thumbnails/19.jpg)
var CommentList = React.createClass({ render: function() { return ( <div className="commentList"> Hello, world! I am a CommentList. </div> ); }});
Composing components-1
![Page 20: React.js 20150828](https://reader035.fdocuments.net/reader035/viewer/2022081604/58d16e4f1a28abed798b47af/html5/thumbnails/20.jpg)
var CommentForm = React.createClass({ render: function() { return ( <div className="commentForm"> Hello, world! I am a CommentForm. </div> ); }});
Composing components-2
![Page 21: React.js 20150828](https://reader035.fdocuments.net/reader035/viewer/2022081604/58d16e4f1a28abed798b47af/html5/thumbnails/21.jpg)
var CommentBox = React.createClass({ render: function() { return ( <div className="commentBox"> <h1>Comments</h1> <CommentList /> <CommentForm /> </div> ); }});
Composing components-3
![Page 22: React.js 20150828](https://reader035.fdocuments.net/reader035/viewer/2022081604/58d16e4f1a28abed798b47af/html5/thumbnails/22.jpg)
Composing components-4
![Page 23: React.js 20150828](https://reader035.fdocuments.net/reader035/viewer/2022081604/58d16e4f1a28abed798b47af/html5/thumbnails/23.jpg)
var CommentList = React.createClass({ render: function() { return (
<div className="commentList"> <Comment author="Pete Hunt">comment</Comment> <Comment author="Jordan Walke">another</Comment>
</div> ); } });
Component Properties-1
![Page 24: React.js 20150828](https://reader035.fdocuments.net/reader035/viewer/2022081604/58d16e4f1a28abed798b47af/html5/thumbnails/24.jpg)
var Comment = React.createClass({ render: function() { return (
<div className="comment"> <h2 className="commentAuthor">
{this.props.author} </h2>
{this.props.children} </div>
); } });
Component Properties-2
![Page 25: React.js 20150828](https://reader035.fdocuments.net/reader035/viewer/2022081604/58d16e4f1a28abed798b47af/html5/thumbnails/25.jpg)
Component Properties-3
![Page 26: React.js 20150828](https://reader035.fdocuments.net/reader035/viewer/2022081604/58d16e4f1a28abed798b47af/html5/thumbnails/26.jpg)
http://jamestw.logdown.com/posts/248317-react-one-step-at-a-time
http://ithelp.ithome.com.tw/question/10156062
http://docs.reactjs-china.com/react/docs/jsx-gotchas.html