react入门教程一

2016-11-23 本文已影响242人彬哥头发多

react入门

一、react是什么？

还是直接上原话吧

A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES

翻译成人话，react是用来构建前端界面的，稍微专业一点，澄清一个可能被大家误解的概念，react不是mvc框架，

而是构建mvc里面view这部分的库，至于其他部分采用什么技术react并不限制。

一句话，react就是构建用户界面的。

二、为啥用它

1.因为它火，学它能找好工作涨工资

2.那么为啥它火？因为他牛逼，为啥牛逼，我们下面就说。

三、怎么用？

既然说了它牛逼，那么我们就从三个部分去说说。

1.react初探

涉及到简单的基础知识，比如安装，配置，基础知识和简要的小例子

2.react实际应用

实际上线react应该如何做，比如使用可以构建版本的react，模块化，和压缩等。

3.react 本地应用

我们研究下看看react如何实习它说的用js写原生应用。

四、正式开始

1.react 基础知识

官网：http://reactjs.cn/ （这个知识更新很慢，适合入门）

推荐：https://facebook.github.io/react/（适合开发）

我们开始第一个例子，老规矩hello world

    
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="js/react.js"></script>
    <script src="js/react-dom.js"></script>
    <script src="js/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('root')
      );
    </script>
  </body>
</html>

说明：

1.react 运行需要三个库，而且这三个文件顺序不能变。

2.例子中那一坨不像js也不像html得恶心玩意是啥？这个是FB（facebook）自己搞的JSX语法，相当的简单，只要注意几点就行。

a).<script type="text/babel"> 这里类型是babel,babel是什么？把ES6-ES5的工具，这里先知道就好，我们在实际应用中，详细解释。

b).ReactDOM.render(标签，把前面的标签放到哪里)

c).React 需要确保一个组件只能有一个根节点

3.事件和其他

这里我把事件和其它注意事项从2里面单拎出来，因为太重要而且容易犯错

      ReactDOM.render(
        <input type = "button" value ="按钮" onClick ={show} />,
        document.getElementById('root')  
      );

注意事项：

1.单标签闭合

2.事件写法 onclick,onDoubleClick 驼峰命名法

3.函数用 {show} 注意外面不加引号，里面

第二个例子，点击计数

var count = 0;
function fnCLick(){
    count++;
    ReactDOM.render(
        <div>
            <input type = "button" value ="按钮" onClick ={fnCLick} />
            <br/>
            总共点击了{count}次
        </div>,
        document.getElementById('root')  
    );
}
fnCLick();

2.react 类

第三个例子，react是基于状态，时钟，热身

        function tick(){
           var oDate = new Date();
            ReactDOM.render(
                <div>
                    {oDate.getHours()}:{oDate.getMinutes()}:{oDate.getSeconds()}
                </div>,
                document.getElementById('root')  
            );
        }
        setInterval(tick);

开始正式的例子

        var B = React.createClass({
            a:12,
            b:5,
            getInitialState:function(){return {count:0}},
            render:function () {
               return (
                       <h2>{parseInt(this.props.c)+parseInt(this.props.d)}</h2>
               );
            }

        });

        ReactDOM.render(
                <B c ="3" d="8"/>,
                document.getElementById('root')
        );

注意几点·

1.类不是必须的，但是最好用类，因为组件化。

2.render的返回值的括号可以去掉，但是fb说了，最好加上，看着好看。

3.react中的类不用实例化。

3.react数据交互

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="js/react.js"></script>
    <script src="js/react-dom.js"></script>
    <script src="js/babel.min.js"></script>
    <script src="js/ajax.js"></script>
    <script type="text/babel">

        var A = React.createClass({

            getInitialState:function(){
                return {status:'等待登录'}
            },
            render:function(){
                return (
                    <div>
                        用户：<input type="text" id="txt1" /><br/>
                        密码：<input type="password" id="txt2" /><br/>
                        <span style={{color:'red'}}>{this.state.status}</span><br/>
                        <input type="button" value="注册" onClick={this.reg}/>
                        <input type="button" value="登录" onClick = {this.login}/>
                    </div>
                );
            },
            reg:function(){
                var _this = this;
                var oT=document.getElementById('txt1');
                var oT2=document.getElementById('txt2');
                ajax({
                    url:'user.php',
                    data:{
                       act:'add',
                       user:oT.value,
                       pass:oT2.value
                    },
                    success:function(str){
                        var json = eval('('+str+')');
                        _this.setState({status:json.desc});
                        
                    }
                });     
            },
            login:function(){
                //登录一样就不写了
            }
        });

        ReactDOM.render(
            <A />,
            document.getElementById('root')
        );

    </script>
</head>

<body>
    <div id="root"></div>

</body>
</html>

react只是展示层的东西，跟你用什么数据层没关系，你可以像我一样自己写原生ajax，也可以用jquery或者angular做数据交互。

到此为止，我们基本的angular入门就够用了，但是离实际项目上线还差很远，下面我们说一下实际项目中怎么更精细的使用react和一些全新的技术。