react學習1
阿新 • • 發佈：2018-11-30
今天學了前端比較熱的框架react 總結如下
<!DOCTYPE html> <html> <head> <script src="../build/react.js"></script> <script src="../build/react-dom.js"></script> <script src="../build/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> // ** Our code goes here! ** </script> </body> </html>
引入
最後一個script標籤type屬性為text/babel 這是因為react的jsx語法 跟 js語法不相容 browser.js作用是將jsx語法轉化為js的語法 應放在伺服器
最簡單的 reactDOM,render 用於將模板轉化為html語言 並植入指定的html元素
ReactDOM.render(
<h1>hello,world</h1>,
document.getElementById("example1")
)jsx的語法 碰到程式碼變{ 碰到html標籤變<div>
var names = ["Alice","Emily","Kate"]; ReactDOM.render( <div> { names.map(function (name) { return <div>Hello,{name}</div> }) } </div>, document.getElementById("example2") )
var arr = [
<h1>Hello World!</h1>,
<h2>React is awesome</h2>
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById("example3")
);4元件 把程式碼封裝成元件 隨後插入到html中 要記住元件類的第一個字母必須大寫 每一個元件有render 用於輸出
var HelloMessage = React.createClass({
render: function() {
return <h1>Hello {this.props.className}</h1>;
}
});
ReactDOM.render(
<HelloMessage className="John2" />,
document.getElementById('example4')
);5 this.props.children 用於表示元件所有的子節點
var NotesList = 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.body
);