共计 3123 个字符，预计需要花费 8 分钟才能阅读完成。
React
引用 jspang 的资源
入门案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="reactContainer"></div>
<script src="./common/react.js"></script>
<script src="./common/react-dom.js"></script>
<script>
var HelloComponent =React.createClass({render:function(){return React.createElement('h1',null,'Hello world');
}
});
ReactDOM.render(React.createElement(HelloComponent,null),
document.getElementById('reactContainer')
)
</script>
</body>
</html>JSX
JSX 即 Javascript XML，它使用 XML 标记来创建虚拟 DOM 和声明组件。
JSX 如果要使用 JSX 语法的支持，你可以使用 Babel 来进行转换，但是为了方便我们这里直接引入 Babel 的核心文件 browser.min.js。你可以去网上提供的静态资源库引用（http://www.bootcdn.cn/），也可以自己下载。
JSX 入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./common/react.js"></script>
<script src="./common/react-dom.js"></script>
<script src="http://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"></script>
</head>
<body>
<div id="reactContainer"></div>
<script type="text/babel">
var HelloComponent =React.createClass({render:function(){return <h1>Hello World</h1>;}
});
ReactDOM.render(
<HelloComponent/>,
document.getElementById('reactContainer')
)
</script>
</body>
</html>
JSX 渲染数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./common/react.js"></script>
<script src="./common/react-dom.js"></script>
<script src="http://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"></script>
</head>
<body>
<div id="reactContainer"></div>
<script type="text/babel">
let names = ['JSPang','技术胖','React']; var HelloComponent =React.createClass({render:function(){ return
<div>
{names.map(function(name){ return
<div key={name}>Hello,{name}!</div>
}) }
</div>
} }); ReactDOM.render(<HelloComponent name="jspang" />, document.getElementById('reactContainer') )
</script>
</body>
</html>JSX 允许直接在模版插入 JavaScript 变量。如果这个变量是一个数组，则会展开这个数组的所有成员。
let arr=[
<h1 key="1">Hello world!</h1>,
<h2 key="2"> React is awesome</h2>
];
ReactDOM.render(<div>{arr}</div>, document.getElementById('reactContainer') )React 组件 – state
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./common/react.js"></script>
<script src="./common/react-dom.js"></script>
<script src="http://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"></script>
</head>
<body>
<div id="reactContainer"></div>
<script type="text/babel">
var TextBoxComponent = React.createClass({getInitialState:function(){return {enable:false}
},
handleClick:function(event){this.setState({enable:!this.state.enable})
},
render:function(){
return (
<p>
<input type="text" disabled={this.state.enable} />
<button onClick={this.handleClick}> 改变 textbox 状态 </button>
</p>
)
}
});
ReactDOM.render(<TextBoxComponent/>,document.getElementById("reactContainer"));
</script>
</body>
</html>
正文完
