react.js 20150828

React.jsA JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES

2015/08/28李佳駿

React.js1. 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.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);

JSX.jsvar 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/2009/04/21/8118.aspx

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.

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

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'}} />

VIRTUAL DOMvar 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({ render: function() { return ( <div className="commentList"> Hello, world! I am a CommentList. </div> ); }});

Composing components-1

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


var CommentBox = React.createClass({ render: function() { 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>

); } });


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

http://ithelp.ithome.com.tw/question/10156062

react.js 20150828

Technology