<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" /> </head> <body> <style> *{ margin:0; padding:0;} body{ background:#333;} #box{ background:url(loveImg/QioA-fxehfqi8208393.jpg) no-repeat center top; width:550px; border:8px solid #fff; -webkit-box-sizing:border-box; margin:50px auto;} #example1,#example2,#example3,#example4,#example5{ margin:20px auto; width:100%; background:rgba(255,255,255,.3); padding:5px 10px; font-size:13px; color:#f1f1f1;-webkit-box-sizing:border-box; } </style> <div> <div></div> <script type="text/jsx"> React.render( //直接html <h1 className="classN1" >1 hellow 直接 html world </h1>, document.getElementById('example1') ); </script> <div></div> <script type="text/jsx"> React.render( //直接创建元素 React.createElement('h1', {className:'classN2'}, '2 Hello, 直接创建元素 world!'), document.getElementById('example2') ); </script> <div></div> <script type="text/jsx"> var CreateEl=React.createClass({ render:function(){ // return <h1>hellow 组件 创建 html world </h1> //有无括号均可 return (<h1 className='classN3' >3 hellow 组件 创建 html world </h1>); } }); React.render( //组件方式创建元素 <CreateEl/>, //或者双括号 <CreateEl></CreateEl> document.getElementById('example3') ); </script> <div></div> <script type="text/jsx"> var JsxCreateEl=React.createClass({ // 直接 jsx 方式 创建 render:function(){ return ( React.createElement('h1', {className: "classN4"},"4 Hello, 直接 jsx 方式 创建 world! ") ) } }); React.render( //组件方式创建元素 React.createElement(JsxCreateEl, null), document.getElementById('example4') ); </script> <div></div> <script type="text/jsx"> var Hello=React.createClass({ // 模板 Hello render:function(){ return (<span>{this.props.data}</span>) } }); var World=React.createClass({ // 模板 world render:function(){ return (<span> 和 World 模板拼接</span>) } }); React.render( // 2个 模板 组件方式创建元素 <h1 className="classN5" > <Hello data='5 hello' /> <World /> </h1>, document.getElementById('example5') ); </script> </div> <script src="https://www.jb51.net/build/react.min.js"></script> <script src="https://www.jb51.net/build/JSXTransformer.js"></script> </body> </html>
下面给大家补充点知识：
React 术语
React Elements
代表 HTML 元素的 JavaScript 对象。 这些 JavaScript 对象最后被编译成对应的 HTML 元素。
Components
封装 React Elements， 包含一个或者多个 React Elements。 Components 用于创建可以复用的 UI 模块，例如 分页，侧栏导航等。
JSX
JSX 是 React 定义的一种 JavaScript 语法扩展，类似于 XML 。 JSX 是可选的， 我们完全可以使用 JavaScript 来编写 React 应用， 不过 JSX 提供了一套更为简便的方式来写 React 应用。
Virtual DOM
Virtual DOM 是一个模拟 DOM 树的 JavaScript 对象。 React 使用 Virtual DOM 来渲染 UI， 同时监听 Virtual DOM 上数据的变化并自动迁移这些变化到 UI 上。
您可能感兴趣的文章: