react入门概念的理解

1.什么是React？
    React是一个前端框架，来自于facebook，适合于大型项目，效率高，基于组件化的方式开发。
    
    React是一个基于组件化开发的前端框架，是facebook于13年5月开始开源的一个框架，效率非常高，
    适合于大型项目，用于制作单页面SPA应用。
2.React环境搭建
    1）传统<script>标签引入资源（适合初学者入门）
    2）手动npm安装
    3）yeoman脚手架（推荐）
        安装yeoman cnpm i -g yo
        安装生成器   cnpm i -g generator-react-webpack
        创建  yo react-webpack
        终止默认安装依赖，安装依赖 cnpm i
    4）运行项目  npm start  //自动查找当前目录下的package.json中的start命令，执行该命令
        npm run dist  //打包命令，将制作完成的项目导出
    
3.JSX语法
    1).什么是JSX?
    JSX是React中的特殊语法，是js的一种补充，可以直接在js代码中编写html标签，并不能直接运行，
    需要使用babel编译成ES5代码后才能执行。
    2).JSX表达式
        <h1>hello</h1>
        <h1>{str}</h1>
        <h1>{运算符}</h1>
        <h1 {展开运行符}></h1>
        <h1 style={样式对象}></h1>
        {/* JS的注释*/}
    3).注意事项
        1.渲染组件或html元素时，html元素首字母必须小写，组件首字母必须大写
        2.class属性要写成   className   for属性转成htmlFor
        3.JSX的语句只能有一个顶级标签，如果有多个标签并列时必须使用一个顶级标签包围
        4.JSX编写的标签并不是原生的html标签，只是React组件对象，是一个虚拟DOM
        5.如果要使用事件，必须使用on+事件名称的格式，事件名必须首字母大写，如onClick
        
4.组件开发
    1).什么是组件？
    组件就是实现某一个功能的html片段
    2).编写组件
        var React = require('react');
        var 组件名 = React.createClass({
            render:function(){
                return()
            }
        })
        module.exports=组件名;

5.属性传递
    1)什么是属性传递？
    属性传递是指在调用组件时，可以为组件标签设置自定义属性，可以在组件内部接收到该值
    2）属性传值的用法
        a.设置传值
            <组件名 属性名=属性值>内容</组件名>
        b.接收传值
            在组件内部接收外部传入的值
            this.props.属性名;
            this.props.children;  //接收标签对中间的内容
        c.设置属性的默认值
            在组件内部设置属性的默认值
            getDefaultProps:function(){
                return {默认值对象};
            }
6.列表组件
    核心：如何将数组显示到页面上
    var data = [];
    data.map(function(v,i){
        return <li>{v.title}</li>
    });
7.父子组件
    核心：在父组件内部引用子组件
    var 子组件=require('子组件');
    var Form=React.createClass({
        render：function(){
            return(
                <子组件/>
            )
        }
    })
8.状态传递
    1).什么是状态？
        状态是组件内部对数据进行设置，共享，使用的一种机制，在内部进行数据传递。
    
    2).组件状态的用法
        a.设置默认组件状态
        getInitState:function(){
            return {状态对象}
        }
        b.获取状态值
            this.state.状态名
            
        c.修改状态值
            this.setState({状态对象});
            
    3).状态和属性的区别
        状态state：数据从组件内部传到内部，实现组件内部的数据传递，可以初始化、获取、修改
        属性props：数据从组件调用处传到内部，实现组件数据从外部传到内部，可以初始化，获取，不能在内部修改
        refs ：获取页面元素