新公司的项目前端架构用的是react.js 之前孤陋寡闻并没听说过，想着后期开发和维护多少要会点前端的东西，就简单研究一下。个人的学习习惯能写代码的就不写文字，必要的地方加两行注释，代码一行行敲下去，运行过有问题及时发现，存档当作日后小问题备查的工具。感觉前端尤如玄学，标点啥的处处要留心，一个后台的多少懂点吧。
代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello React!</title> <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script> <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script> <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> /** function tick() { const element = ( <div> <h1>Hello, world!</h1> <h2>现在是 {new Date().toLocaleTimeString()}.</h2> </div> ) ReactDOM.render( element, document.getElementById('example') ) } setInterval(tick, 1000); */ /*自定义方法标签 < Clock date = {new Date()} />, date为其中一参数，可理解为属性*/ /** function Clock(props){ return( <div> <h1>Hello, world!</h1> <h2>现在是 {props.date.toLocaleTimeString()} {props.name}.</h2> </div> ) } function tick() { ReactDOM.render( <Clock date={new Date()} name='slowcity' />, document.getElementById('example') ); } setInterval(tick, 1000); */ /*自定义类标签 < Clock date = {new Date()} />, date为类对象*/ /** class Clock extends React.Component{ render(){ return( <div> <h1>hello world </h1> <h2>现在是{ this.props.date.toLocaleTimeString()}</h2> </div> ) } } function tick(){ ReactDOM.render( < Clock date = {new Date()} />, document.getElementById('example') ) } setInterval(tick,1000) */ /*当element有多个标签时，多个标签放在div标签内部 React 推荐使用内联样式。我们可以使用 camelCase 语法来设置内联样式. React 会在指定元素数字后自动添加 px 添加myStyle内联样式 */ var i = 3; var myStyle = { fontSize: 20, color: '#FF0000' }; const element = ( <div> {/*注释需要写在花括号中... react不支持ifelse 但支持三元运算*/} <h1>Hello, world! { i==2?'ture':'false'}</h1> <h1 style = {myStyle}>Hello, world! { i==2?1+1:4}</h1> <h1>Hello, world! { i==3?'ture':'false'}</h1> </div> ) ReactDOM.render( element, document.getElementById('example') ); </script> </body> </html>