React 入门实例教程

目录

1. html模板
2. ReactDOM.render()
3. JSX 语法
4. 组件 & props
5. props & 纯函数
6. 事件
7. 列表渲染
8. 条件渲染
9. this.state
10. style和class
11. 生命周期
12. 表单
13. 获取真实的DOM节点
14. this.props.children

一、html模板

  




  
  
    

    // script的类型必须是text/babel
    
  

二、ReactDOM.render()

作用: 编译模板,把模板挂载到指定的节点上

三、JSX 语法

说明: jsx语法html代码和js代码可以混写而不需要加引号,可以这样做的原因是React和到jsx代码后会进行编译,使代码正确运行.当然jsx也是有它自己本身的规则:

1. js代码需要用{}括起来
2. React编译规则: 遇到<开头就看作是html,遇到{开头则视为js

四、组件

1. 用es5定义一个react组件

2. es6的class和class继承

3. 用es6定义个react组件

    
    
    
    
    



    



        

            
姓名: 
            
年龄: 
        
    

五、props和纯函数

1. 相同的输入有相同的输出,输入可以确定输出,这就是纯函数
2. 对待props就像对待纯函数一样,遵循可以通过输入确定输出

六、绑定事件

1. 事件绑定的函数的this的指向会改变,需要使用bind来绑定函数的指向

2. 事件传参的方式
   react可以在{} 里面执行一个函数的调用

七、列表渲染

八、条件渲染

1. 通过 if 来控制渲染内容

2. 通过三目运算符来判断
   使用三目运算符判断变量isLogin的值来决定显示什么内容

3. 通过与运算符 && 进行控制
   相当于if没有else的情况

九、this.state和this.setState

例1

例2

十、样式和属性

1. class使用className代替
2. style需要用{{}},外面的{}代表这是js代码,里面的{}则是个js对象
3. 属性是个变量加上{}即可

十一、生命周期

十二、表单

1. 单个input标签输入,让输入的数据与react数据流同步

2. 多个input表单输入
   如果有多个input标签输入,我们是否需要为每一个input绑定一个事件呢,会不会太麻烦了,
   其实不用,我们可以像下面这样来处理

十三、获取真实的DOM节点

通过ref可以获取真实dom节点,需要确保节点已经挂载

十四、this.props.children

this.props 对象的属性与组件的属性一一对应，但是有一个例外，就是 this.props.children 属性。它表示组件的所有子节点

demo地址:

参考:
React 入门实例教程 http://www.ruanyifeng.com/blog/2015/03/react.html
React中文文档 https://react.docschina.org/docs/hello-world.html