使用create-react-app快速搭建react环境
使用create-react-app快速搭建react环境
npm install create-react-app -g
cd test_dir
create-react-app demo_react
cd demo_react
npm start
react的组件中的state必须是一个javascript对象
1.环境
依次引入一下文件
<!-- react 框架核心文件 -->
<script src='react.js'></script>
<!-- react 与DOM操作相关 -->
<script src='react-dom.js'></script>
<!-- 将jsx语法转换为javascript语法 -->
<script src='browser.min.js'></script>
2.ReactDOM.render
<div id='box'></div>
<!-- 注意这里的type类型是babel -->
<script type='text/babel'>
ReactDOM.render(
<h1>hello react!</h1>,
document.getElementById('box')
)
</script>
3.{}支持javascript语法解析
<div id='box'></div>
<script type='text/babel'>
var names=['Tom','James','Leo','Alice','Green'];
ReactDOM.render(
<div>
{
names.map(function(name)
{
return <div>hello name</div>
})
}
</div>
)
</script>
4.组件
<div id='box'></div>
<script type='text/babel'>
// 组件的首字母必须大写
var Hello=React.createClass({
render:function(){
return <h1>hello {this.props.name}</h1>
}
})
ReactDOM.render(
<Hello name='llz'></Hello>,
document.getElementById('box')
)
</script>
5.this.props.children
<div id='box'></div>
<script type='text/babel'>
var Name=React.createClass({
render:function(){
return <ul>
{
React.Children.map(this.props.children,function(child){
return <li>{child}</li>
})
}
</ul>
}
})
ReactDOM.render(
<Name>
<span>llz</span>
<span>ljw</span>
<span>dsb</span>
</Name>,
document.getElementById('box')
)
</script>
6.PropTypes
<div id='box'></div>
<script type='text/babel'>
var Hello=React.createClass({
<!-- 设置属性的验证机制 -->
propTypes:{
<!-- 如果title属性的值不是字符串类型则会报错 -->
title:React.PropTypes.string.isRequired
},
render:function(){
return <h1>{this.props.title}</h1>
}
})
ReactDOM.render(
<Hello title={'test'}></Hello>,
document.getElementById('box)
)
</script>
7.getDefaultProps
<div id='box'></div>
<script type='text/babel'>
var Hello=React.createClass({
<!-- 设置属性的默认值 -->
getDefaultProps:function(){
return {title:'test'}
},
render:function(){
return <h1>{this.props.title}</h1>
}
})
ReactDOM.render(
<Hello></Hello>,
document.getElementById('box')
)
</script>
8.refs
<div id='box'></div>
<script type='text/babel'>
var Hello=React.createClass({
handleClick:function(){
<!-- 根据ref获取对应的真实DOM -->
this.refs.text.value=1;
},
render:function(){
return <div>
<input type="text" ref='test'>
<button onClick={this.handleClick}>click</button>
</div>
}
})
ReactDOM.render(
<Hello></Hello>,
document.getElmentById('box')
)
</script>
9.state
<div id='box'></div>
<script type='text/babel'>
var Say=React.createClass({
<!-- 初始化状态 -->
getInitialState:function(){
return {word:false}
},
handleClick:function(){
this.setState({word:!this.state.word})
},
render:function(){
return <div>
<h1>say {this.state.word?'yes':'no'}</h1>
<button onClick={this.handleClick}>change</button>
</div>
}
})
ReactDOM.render(
<Say></Say>,
document.getElementById('box')
)
</script>
10.表单
<div id='box'></div>
<script type='text/babel'>
var Say=React.createClass({
getInitialState:function(){
return {word:'hello'}
},
handleClick:function(event){
this.setState({word:event.target.value})
},
render:function(){
return <div>
<input type="text" onChange={this.handleClick} />
<h1>say {this.state.word}</h1>
</div>
}
})
ReactDOM.render(
<Say></Say>,
document.getElementById('box')
)
</script>
11.组件的生命周期
- constructor
组件整个生命周期第一个被调用的构造函数
在es6中,类的成员函数在执行时的this并不是和类实例自动绑定的, 而在构造函数中this就是当前组件实例,所以为方便后期调用, 往往在构造函数中对特定函数绑定this: this.onClick=this.onClick.bind(this)
getInitialState
&getInitialProps
两者只在使用React.createClass创建组件时可用 在es6中: Sample.defaultProps={return {sampleProp:0}}
componentWillMount
&componentDidMount
``` componentWillMount在render函数被调用前执行 componentDidMount在render函数执行完,组件装载在DOM树上后执行,如果同时引入多个该组件,那么 该函数会在所有组件的render执行完成挂载后才会依次执行。
以上两个函数只在初次渲染时执行一次。
```
12.ajax
相关文章
- 虚拟环境-virtualenv
在开发Python应用程序的时候,系统安装的Python3只有一个版本:3.4。所有第三方的包都会被pip安装到Python3的site-packages目录下。 如果我们要同时开发多个应用程序,那
- redis的安装配置
先介绍mac的安装方法 一、安装(首先你要先安装brew工具) brew install redis 然后在终端的末尾你会发现如下: if you don't want/need a backgr
- 使用宝塔面板定时任务不执行问题处理
定时任务不执行 不用宝塔自带的计划任务,因为宝塔自带的计划任务无法以www:www身份去执行任务,会导致面板无法正常写入日志 在vps中输入:crontab -e -uwww ,然后贴上 * * *
- python多线程
一、介绍 多任务可以由多进程完成,也可以由一个进程内的多线程完成。 我们前面提到了进程是由若干线程组成的,一个进程至少有一个线程。 由于线程是操作系统直接支持的执行单元,因此,高级语言通常都内置多线
- 常见排序列表
常见排序列表 中文名称 英文名称 平均时间复杂度 最坏时间复杂度 最好时间复杂度 空间复杂度 稳定性 选择排序 Selection n^2 n^2 n^2 1 不稳 冒泡排序 Bub
随机推荐
- 虚拟环境-virtualenv
在开发Python应用程序的时候,系统安装的Python3只有一个版本:3.4。所有第三方的包都会被pip安装到Python3的site-packages目录下。 如果我们要同时开发多个应用程序,那
- redis的安装配置
先介绍mac的安装方法 一、安装(首先你要先安装brew工具) brew install redis 然后在终端的末尾你会发现如下: if you don't want/need a backgr
- 使用宝塔面板定时任务不执行问题处理
定时任务不执行 不用宝塔自带的计划任务,因为宝塔自带的计划任务无法以www:www身份去执行任务,会导致面板无法正常写入日志 在vps中输入:crontab -e -uwww ,然后贴上 * * *
- python多线程
一、介绍 多任务可以由多进程完成,也可以由一个进程内的多线程完成。 我们前面提到了进程是由若干线程组成的,一个进程至少有一个线程。 由于线程是操作系统直接支持的执行单元,因此,高级语言通常都内置多线
- 常见排序列表
常见排序列表 中文名称 英文名称 平均时间复杂度 最坏时间复杂度 最好时间复杂度 空间复杂度 稳定性 选择排序 Selection n^2 n^2 n^2 1 不稳 冒泡排序 Bub