React入門
阿新 • • 發佈：2017-05-09
array 多個 dom john 包含 min 生成 實例 解析
http://www.ruanyifeng.com/blog/2015/03/react.html
ReactDOM.render 是React的最基本的方法，用於將模板轉為HTML語言，並插入制定的DOM節點中。<!DOCTYPE html><html><head><scriptsrc="../build/react.js"></script><scriptsrc="../build/react-dom.js"></script><scriptsrc="../build/browser.min.js"></script></head><body><divid="example"></div><scripttype="text/babel"><!--React獨有的JSX語法，需要的type 為text/babel 凡是使用JSX語法的 type都是這個-->ReactDOM.render(<h1>Hello, world!</h1>,document.getElementById(‘example‘));</script></body></html>
<script type="text/babel">var names =[‘Alice‘,‘Emily‘,‘Kate‘];ReactDOM.render(<div>{names.map(function(name){return<div>Hello,{name}!</div>})}</div>,document.getElementById(‘example‘));</script>
<script type="text/babel">var arr =[<h1>Hello world!</h1>,<h2>React is awesome</h2>,];ReactDOM.render(<div>{arr}</div>,document.getElementById(‘example‘));</script>
<script type="text/babel">varHelloMessage=React.createClass({render:function(){return<h1>Hello{this.props.name}</h1>;}});ReactDOM.render(<HelloMessage name="John"/>,document.getElementById(‘example‘));</script>
<script type="text/babel">varNotesList=React.createClass({render:function(){return(<ol>{React.Children.map(this.props.children,function(child){return<li>{child}</li>;})}</ol>);}});ReactDOM.render(<NotesList><span>hello</span><span>world</span></NotesList>,document.getElementById(‘example‘));</script>
React入門