React入门与组件创建-优快云博客

本文链接：https://blog.youkuaiyun.com/isxixi/article/details/78677659

一、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>