React.js 20150828

React.js
A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES
2015/08/28
李佳駿

React.js
1. JUST THE UI
2. JSX
3. VIRTUAL DOM
4. DATA FLOW

JSX.js
JSX is a JavaScript syntax extension that looks
similar to XML.
You can use a simple JSX syntactic transform
with React .

JSX.js
透過 React 建立元件有兩種方式
React.DOM.div();
React.createElement('div');

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>

JSX.js
var HelloMessage =
React.createClass({displayName: "HelloMessage",
render: function()
{
return React.createElement("div",
null, "Hello ", this.props.name);
}
});
React.render(
React.createElement(
HelloMessage, {name: "John"}), mountNode);

JSX.js
var HelloMessage =
React.createClass({
render: function()
{
return <div>Hello {this.props.name}</div>;
}
});
React.render(<HelloMessage name="John" />, mountNode);

XSS 攻擊
XSS 的攻擊手法就是透過在我們的網頁中植入他
想要執行的指令碼，所以這個駭客手段才會被
稱為跨網站的指令碼 (Cross-Site-Scripting)
http://www.dotblogs.com.tw/jimmyyu/archive/20
09/04/21/8118.aspx

JSX Gotchas
You 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.

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>‧

JSX Gotchas
2. 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>

JSX Gotchas
3. 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'}} />

VIRTUAL DOM
var HelloMessage =
React.createClass({
render: function()
{
return <div>Hello {this.props.name}</div>;
}
});
React.render(<HelloMessage name="John" />, mountNode);

傳統的網頁應用程式中，我們如果要增加互動性時勢
必廣泛的操作 DOM 元素，一般來說現在最普遍的技
術是使用 jQuery:

React 的主要目標就是提供一種不同且更有效率的方式去執
行關於操作更新 DOM 這個部分，最終這個方式會取代我們
直接操作 DOM 的方法。

<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

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]

React-3
Hello, world! I am a CommentBox.

var CommentList = React.createClass({
return (
<div className="commentList">
Hello, world! I am a CommentList.
</div>
);
}
});
Composing components-1

var CommentForm = React.createClass({
return (
<div className="commentForm">
Hello, world! I am a CommentForm.
</div>
);
}
});

var CommentBox = React.createClass({
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList />
<CommentForm />
</div>
);
}});

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

var Comment = React.createClass({
render: function() { return (
<div className="comment">
<h2 className="commentAuthor">
{this.props.author}
</h2>
{this.props.children}
</div>
); } });
Component Properties-2

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

React.js 20150828

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (14)

Similar to React.js 20150828

Similar to React.js 20150828 (20)

More from LearningTech

More from LearningTech (20)

Recently uploaded

Recently uploaded (20)

React.js 20150828

Editor's Notes