比较了半天VUE、Angular、React，最终选择React，下面从几个例子开始React的学习，先从单个的index.html，引用react.js开始
一.最简单的纯JS的代码
<!DOCTYPE html> <html> <head> <title>react直接引用js</title> <script src="https://cdn.staticfile.org/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdn.staticfile.org/react-dom/16.6.3/umd/react-dom.production.min.js"></script> </head> <body> <div id="root"></div> <script type="text/javascript"> window.onload = function() { var h1 = React.createElement("h1", null, "hello REACT!"); ReactDOM.render(h1, document.getElementById("root")); }; </script> </body> </html>
二、使用JSX的语法
JSX是React提供的语法，React会把JSX编译成JS，这个编译器使用了一个组件babel
<!DOCTYPE html> <html> <head> <title>react直接引用js</title> <script src="https://cdn.staticfile.org/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdn.staticfile.org/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <!-- 生产环境中不建议使用 --> <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script> </head> <body> <div id="root"></div> <script type="text/babel"> window.onload = function() { ReactDOM.render( <h1>Hello, REACT!</h1>, document.getElementById("root") ); }; </script> </body> </html>
三、通过组件的方式添加元素
<!DOCTYPE html> <html> <head> <title>react直接引用js</title> <script src="https://cdn.staticfile.org/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdn.staticfile.org/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <!-- 生产环境中不建议使用 --> <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script> </head> <body> <div id="root"></div> <script type="text/babel"> class Welcome extends React.Component{ render(){ return <h1>Hello, REACT!</h1> } } window.onload = function() { ReactDOM.render(<Welcome />, document.getElementById("root") ); }; </script> </body> </html>
四、给组件添加属性功能
<!DOCTYPE html> <html> <head> <title>react直接引用js</title> <script src="https://cdn.staticfile.org/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdn.staticfile.org/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <!-- 生产环境中不建议使用 --> <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script> </head> <body> <div id="root"></div> <script type="text/babel"> class Welcome extends React.Component{ render(){ return <h1>Hello, {this.props.name}!</h1> } } window.onload = function() { ReactDOM.render(<Welcome name='react16.3'/>, document.getElementById("root") ); }; </script> </body> </html>