React的学习

一、React的来源：

react来源：facebook。angulr来源google boststrap来源twiter.
React 中completement(组件)是最基本的单元，每个组件都有自己的状态（state）;
react不是一个完整的MVC框架 着重于V.目的是组件不是单页面应用，但是也可以做单页面应用，有React-route.

二、React的起步

bower是前端界的npm npm有npm install bower也有 bower install.yarn是和bower一样的

1.安装步骤：

1.git(因为bower需要从github上面下载);
2.有node环境，安装npm.
3.npm install -g -bower.

bower的应用：可以从github上安装一些前端的依赖。

      eg:bower install jquery(默认的安装到：) 如果想使用版本号 bower install jquery#1.12.*;

常出现的问题: git is not installed or not in the PATH。解决方案：将git的安装路径添加到环境变量path里面。

常见命令：bower install 安装，bower uninstall 卸载 bower init创建一个bower.json文件，里面列出前端依赖，bower update 更新.

项目使用步骤：

 1.copy con .bowerr创建文件。  内容：{        "directory" : "js", //制定以后下载的插件放在那里。        "json"      : "",        "endpoint"  : "",        "searchpath"  : "",        "shorthand_resolver" : "" } 2.bower init 创建bower.json文件， 3.bower install jquery --save就可以将下载的文件写入到bower.json的依赖。 4.bower只是负责下载前端插件，不负责后端的。

2. babel和jsx

babel:是一个comlpiler()编译器
babel将ECMAScript2016->ECMAScript2015.
比如：（a,b）=>{
return a+b;
}
翻译为：function (a,b){
return a+b;
}

React

1.ReactDOM.render(“….”,document.getElementById(“box”));

2.React是为了创建一个组件component,和angular里面的directive是一样的。

创建组件方法1：用简单函数定义

用ReactDom.render() 呈递组件的时候，可以将组件组合使用，甚至可以嵌套。
用类的定义创建组件。

创建组件方法2：用类来定义

学习es6，不要买书，直接看阮一峰的博客。简单的类：class People{//真是一个类                    constructor(name,age,sex){                        this.name=name;                         this.sex=sex;                         this.age=age;                          }                    sayhello(){                         alert("我是"+this.name);                                             }                    chifan(fan){                     alert("我吃"+fan);                    }               } //实例化 var xiaomi=new People("小明","18","男"); //然后小明可以调用这个类的方法 xiaomi.sayhello(); xiaomi.chifan("饺子");

用类定义一个组件<script type="text/babel">    class  MyComponent extends React.Component{        render(){            return <p>我是一个好的前端工程师，我现在正在学习React,已经{3+4}天了</p>        }    }     ReactDOM.render(         <div>             <MyComponent/>             <MyComponent/>             <MyComponent/>             <MyComponent/>         </div>         ,document.querySelector(".box"));</script>//注意MyComponent复用的时候一定要加一个父盒子包裹一下。

3.创建组件方法3（React.createClasss）

//React.createClasss好像在最新的版本废除了 var MyComponent=React.createClass({        render:function () {            return <p>我是一个前端工程师，工作{2+3}年了</p>        }    });    ReactDOM.render(        <div>            <MyComponent/>            <MyComponent/>            <MyComponent/>        </div>        ,document.querySelector(".box"));

总结一下：组件是什么？如何创建？如何使用？

• 组件就是一组自定义标签，有上述三种方法。
• 使用ReactDOM.render()

4.组件自定义属性。

React属性是唯一的进出通道。所以React直观轻量。

class MyComponent extends React.Component{    render(){        return <p>{this.props.a}</p>//this是指调用它的那个标签,props就是身上的属性。    }}ReactDOM.render(    <div>        <MyComponent a="11"/>        <MyComponent a="22"/>        <MyComponent a="33"/>    </div>    ,document.querySelector(".box"));

5.组件的混合。

<script type=text/babel>//    定义一个网站导航    //定义的大组件    class Webtabs extends React.Component{        render(){            return (                <div>                    <h1>{this.props.info}</h1>                    <Href data-href={this.props['data-href']}/>                </div>//注意使用多个标签的时候需要一个父盒子包裹            )        }    }    //定义一个子组件    class Href extends React.Component{        render(){            return <a href={this.props['data-href']}>查看</a>        }    }    ReactDOM.render(        <div>            <Webtabs info="爱前端" data-href="http://www.aiqianduan.cn"/>            <Webtabs info="百度" data-href="http://www.baidu.com"/>            <Webtabs info="淘宝" data-href="http://www.taobao.com"/>            //使用自定义标签的时候最好加上data-,以防将本身的属性混淆        </div>        ,document.querySelector(".box"))</script>

6.类名的获取

如果要获取标签的类名，使用this.props.className(避讳js的一些关键字);