react 入门
2017-08-24 本文已影响0人
glory_前端
React 是一个用于构建用户界面的 JAVASCRIPT 库。
React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。
React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。还有一个关注点就是React Native的跨平台的应用。
1.Hello word
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<!--React 的核心库-->
<script type="text/javascript" src="build/react.js"></script>
<!--提供与 DOM 相关的功能-->
<script type="text/javascript" src="build/react-dom.js"></script>
<!--可以将 ES6 代码转为 ES5 代码-->
<script type="text/javascript" src="build/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>
2.JSX的使用
React 使用 JSX 来替代常规的 JavaScript。JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。
注意：JSX 支持所有的 HTML 元素的事件。但要注意的是，事件名称一定要用驼峰命名方式，如果将 onClick 改成 onclick 就不起作用了。
1.我们可以在 JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中。实例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<!--React 的核心库-->
<script type="text/javascript" src="build/react.js"></script>
<!--提供与 DOM 相关的功能-->
<script type="text/javascript" src="build/react-dom.js"></script>
<!--可以将 ES6 代码转为 ES5 代码-->
<script type="text/javascript" src="build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
/*代码中嵌套多个 HTML 标签，需要使用一个标签元素包裹它*/
<div>
<p>测试环境</p>
<h1>{1+1}</h1>
</div>
,
document.getElementById('example')
);
</script>
</body>
</html>
2.创建组件
创建组件最常用的两种方式
1.React.createClass
2.React.Component
1.React.createClass形式
var InputControlES5 = React.createClass({
propTypes: {//定义传入props中的属性各种类型
initialValue: React.PropTypes.string
},
defaultProps: { //组件默认的props对象
initialValue: ''
},
// 设置 initial state
getInitialState: function() {//组件相关的状态对象
return {
text: this.props.initialValue || 'placeholder'
};
},
handleChange: function(event) {
this.setState({ //this represents react component instance
text: event.target.value
});
},
render: function() {
return (
<div>
Type something:
<input onChange={this.handleChange} value={this.state.text} />
</div>
);
}
});
2.React.Component
class InputControlES6 extends React.Component {
constructor(props) {
super(props);
// 设置 initial state
this.state = {
text: props.initialValue || 'placeholder'
};
// ES6 类中函数必须手动绑定
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({
text: event.target.value
});
}
render() {
return (
<div>
Type something:
<input onChange={this.handleChange}
value={this.state.text} />
</div>
);
}
}
InputControlES6.propTypes = {
initialValue: React.PropTypes.string
};
InputControlES6.defaultProps = {
initialValue: ''
};
4.jsx中的事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<!--React 的核心库-->
<script type="text/javascript" src="build/react.js"></script>
<!--提供与 DOM 相关的功能-->
<script type="text/javascript" src="build/react-dom.js"></script>
<!--可以将 ES6 代码转为 ES5 代码-->
<script type="text/javascript" src="build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var InputFocus=React.createClass({
handchange:function(){
this.refs.myInput.focus();
},
render :function(){
return(
<div>
<input ref="myInput" type="text" />
<input type="button" value="点击" onClick={this.handchange} />
</div>
)
}
});
ReactDOM.render(
/*代码中嵌套多个 HTML 标签，需要使用一个标签元素包裹它*/
<InputFocus />
,
document.getElementById('example')
);
</script>
</body>
</html>
