使用create-react-app快速搭建react环境

模板网 2021-04-14
使用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

相关文章

  1. 虚拟环境-virtualenv

    在开发Python应用程序的时候,系统安装的Python3只有一个版本:3.4。所有第三方的包都会被pip安装到Python3的site-packages目录下。 如果我们要同时开发多个应用程序,那

  2. redis的安装配置

    先介绍mac的安装方法 一、安装(首先你要先安装brew工具) brew install redis 然后在终端的末尾你会发现如下: if you don't want/need a backgr

  3. 使用宝塔面板定时任务不执行问题处理

    定时任务不执行 不用宝塔自带的计划任务,因为宝塔自带的计划任务无法以www:www身份去执行任务,会导致面板无法正常写入日志 在vps中输入:crontab -e -uwww ,然后贴上 * * *

  4. python多线程

    一、介绍 多任务可以由多进程完成,也可以由一个进程内的多线程完成。 我们前面提到了进程是由若干线程组成的,一个进程至少有一个线程。 由于线程是操作系统直接支持的执行单元,因此,高级语言通常都内置多线

  5. 常见排序列表

    常见排序列表 中文名称 英文名称 平均时间复杂度 最坏时间复杂度 最好时间复杂度 空间复杂度 稳定性 选择排序 Selection n^2 n^2 n^2 1 不稳 冒泡排序 Bub

随机推荐

  1. 虚拟环境-virtualenv

    在开发Python应用程序的时候,系统安装的Python3只有一个版本:3.4。所有第三方的包都会被pip安装到Python3的site-packages目录下。 如果我们要同时开发多个应用程序,那

  2. redis的安装配置

    先介绍mac的安装方法 一、安装(首先你要先安装brew工具) brew install redis 然后在终端的末尾你会发现如下: if you don't want/need a backgr

  3. 使用宝塔面板定时任务不执行问题处理

    定时任务不执行 不用宝塔自带的计划任务,因为宝塔自带的计划任务无法以www:www身份去执行任务,会导致面板无法正常写入日志 在vps中输入:crontab -e -uwww ,然后贴上 * * *

  4. python多线程

    一、介绍 多任务可以由多进程完成,也可以由一个进程内的多线程完成。 我们前面提到了进程是由若干线程组成的,一个进程至少有一个线程。 由于线程是操作系统直接支持的执行单元,因此,高级语言通常都内置多线

  5. 常见排序列表

    常见排序列表 中文名称 英文名称 平均时间复杂度 最坏时间复杂度 最好时间复杂度 空间复杂度 稳定性 选择排序 Selection n^2 n^2 n^2 1 不稳 冒泡排序 Bub