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>
发表回复