企业🤖AI Agent构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
# 下载 如果你不准备用npm,你可以下载包含着预编译过的React和React Dom 的起步套件。 [Download Starter Kit 0.14.3](https://facebook.github.io/react/downloads/react-0.14.3.zip) #在线编译 ~~~ <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello React!</title> <script src="build/react.js"></script> <script src="build/react-dom.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') ); </script> </body> </html> ~~~ #独立文件 Your React JSX code can live in a separate file. Create the following src/helloworld.js. ~~~ ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') ); ~~~ Then reference it from helloworld.html: `<script type="text/babel" src="src/helloworld.js"></script>` Note that some browsers (Chrome, e.g.) will fail to load the file unless it's served via HTTP. # 离线转换 First install the Babel command-line tools (requires npm): ~~~ npm install --global babel-cli npm install babel-preset-react ~~~ Then, translate your src/helloworld.js file to plain JavaScript: `babel --presets react src --watch --out-dir build` Note: >If you are using ES2015, you will want to also use the babel-preset-es2015 package. 离线转换后的html ~~~ <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello React!</title> <script src="build/react.js"></script> <script src="build/react-dom.js"></script> <!-- No need for Babel! --> </head> <body> <div id="example"></div> <script src="build/helloworld.js"></script> </body> </html> ~~~ # React.Dom ## ReactDOM.render(vm, node) # React ## ReactElement.createElement = function (type, config, children) ## React.createClass ## React.createFactory ## React.DOM.p # React使用注意的问题 - visualDom里的元素事件onClick 里传参不能用this, clickHandle里获取 属性和状态 用this.props 和this.state - ``React has been successfully running for ${seconds} seconds.`;` es6的模板 - this.refs.modal 通过refs属性来查找替换后的原生dom ## React组件的生命周期