CDN引入方式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>react 4-27</title>
<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
<script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
</script>
</body>
</html>
说明
- script中需要用 type="text/babel"。
这是react独有的 JSX 语法，与JavaScript 不兼容 - 引用的三个库：
react.js ： react 核心库
react-dom.js ： 提供与DOM相关的功能 - browser.js ： 将JSX语法转换成JavaScript语法【浏览器完成，很耗时间，实际上线的时候要把它放到服务器完成】
JavaScript知识补充
- 点击事件：获取当前点击对象 event.target.value
http://www.w3school.com.cn/jsref/dom_obj_event.asp
react注意事项
【v0.12>v0.13版本迁移修改】：http://www.cnblogs.com/youngBrain1893/p/5959278.html
中文文档：http://wiki.jikexueyuan.com/project/react/thinking-in-react.html
React 直接操作DOM【ref】
点击控制显示与隐藏
<input ref="refInput"/>
this.refs.refInput.focus();
this.refs.refInput ==> 直接返回“ref = refInput” 的DOM节点元素
<div id="exam7-2"></div>
<script type="text/babel">
class RefCom extends React.Component{
constructor(props){
super(props);
this.state={
clickShow: true
}
}
handleClick(){
if(this.state.clickShow){
this.refs.reftTextInput.style.display = "none";
this.setState({
clickShow:!this.state.clickShow
});
}else{
this.refs.reftTextInput.style.display = "inline-block";
this.setState({
clickShow : !this.state.clickShow
});
}
}
render(){
return(
<div>
<input type="text" ref="reftTextInput"/>
<input type="button" value="showOrHide" onClick={this.handleClick.bind(this)}/>
</div>
);
}
}
ReactDOM.render(
<RefCom />,
document.getElementById('exam7-2')
);
</script>
React对于表单元素的交互操作【event.target】
<div id="exam9"></div>
<script type="text/babel">
var Input = React.createClass({
getInitialState:function(){
return {value:'Hello!'};
},
handleChange:function(event){
this.setState({
value:event.target.value
});
},
selectChange:function(event){
console.log(event.target.value)
},
render:function(){
var value = this.state.value;
return (
<div>
<input type="text" value={value} onChange={this.handleChange}/>
<select onChange={this.selectChange}>
<option value="1">1111</option>
<option value="2">22222</option>
<option value="3">333311</option>
</select>
</div>
);
}
});
ReactDOM.render(
<Input />,
document.getElementById('exam9')
);
</script>
antd dva+react
$ npm install dva-cli -g
$ dva new demo //创建一个dva应用
$ cd demo
$ npm start
- 若中途遇见端口占用的情况，则在package.json中修改start配置项
"start" : set PORT=8099 && roadhog server
网友评论