使用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. php自建邮局下邮件无法正常发送问题解决

    产生问题 自建邮局发邮件时提示错误信息:stream_set_blocking()... 这是因为PHP 5.6+版本强制要求验证服务器的有效性 PHP 5.6+特性 Stream wrappers

  2. solr性能优化

    一、简介 Solr性能优化是一个很复杂的任务,也是一个长期与之斗争的过程。在开始之前,首先要对影响Solr性能的基本因素有个大致的认知。影响Solr性能的一个主要因素就是内存。Solr需要有足够的内

  3. 递归和分治思想

    一、斐波那契数列 1 1 2 3 5 8 13 21 34 55 89 144 ...... 我们可以用数学函数来定义: |0,当n = 0 F(n) = |1,当n = 1

  4. redis aof日志持久化

    一、aof的原理 问题: 1、每个命令重写一次aof? 2、某个key修改100次,产生100行记录,aof文件会很大,怎么解决? aof重写(简化) 二、aof的配置 appendfsync

  5. 反向代理缓存

    一、传统代理 很久以前,我们通常需要通过代理服务器来访问互联网上的Web站点,代理服务器本身接入了互联网,而我们通过内部网络与代理服务器相连。即便是现在,有些时候为了访问一些由于某种原因无法直接访问

随机推荐

  1. php自建邮局下邮件无法正常发送问题解决

    产生问题 自建邮局发邮件时提示错误信息:stream_set_blocking()... 这是因为PHP 5.6+版本强制要求验证服务器的有效性 PHP 5.6+特性 Stream wrappers

  2. solr性能优化

    一、简介 Solr性能优化是一个很复杂的任务,也是一个长期与之斗争的过程。在开始之前,首先要对影响Solr性能的基本因素有个大致的认知。影响Solr性能的一个主要因素就是内存。Solr需要有足够的内

  3. 递归和分治思想

    一、斐波那契数列 1 1 2 3 5 8 13 21 34 55 89 144 ...... 我们可以用数学函数来定义: |0,当n = 0 F(n) = |1,当n = 1

  4. redis aof日志持久化

    一、aof的原理 问题: 1、每个命令重写一次aof? 2、某个key修改100次,产生100行记录,aof文件会很大,怎么解决? aof重写(简化) 二、aof的配置 appendfsync

  5. 反向代理缓存

    一、传统代理 很久以前,我们通常需要通过代理服务器来访问互联网上的Web站点,代理服务器本身接入了互联网,而我们通过内部网络与代理服务器相连。即便是现在,有些时候为了访问一些由于某种原因无法直接访问