React开发入门

目录:

一、前言

二、什么是React

叁 、开发条件搭建

④ 、预备知识

五 、最不难易行的React小程序

六 、基础语法介绍

七、总结

捌 、参考资料

 

一、前言

近段日子看看学长集团招聘React
Native工程师,当时可比好奇,就招来了一下,然后刚好需求种种月买一本书看看,所以就买了一本《Reactive
Native 开发指南》。

然则看看里边的预备知识的时候,发现首先最棒内需先精晓一下React(书中写道:我们固然你对React已经有了某个摸底),心想是否还要买一本React的图书,后来心想干脆直接从网上搜搜教程吧,由此开首去研讨,最终找到了多个链接的情节讲的React基本上能用,二个是阮一峰的博客,一个是合法文档,一个是React概览。阮一峰的博客和React概览都以华语的,而且写的相比较便于精通,而官方文书档案是英文的,讲解的都比较详细。所以借使协调英文好的话能够一直看官方文书档案。

 

二、什么是React

React是二个JavaScript库,是由FaceBook和Instagram开发的,首要用以用户创立图形化界面。

 

③ 、开发环境的搭建

做任何付出环境,小编都会想着首先供给搭建一个条件来支付。就像假使开发iOS,你须要有苹果电脑,然后从AppStore下载Xcode,然后就足以如数家珍二个Xcode,看看文档,就能够初步支付了;就像是假诺开发Android,你须要安装Android
Studio,然后须求安装Java环境,然后就能够实行支付了。对于React,经过询问,作者发觉别的叁个工具,比如Sublime
Text,英特尔liJ
IDEA等等都得以,你照旧一向能够选择文本编辑器等等。那当中小编使用的是速龙liJ
IDEA。

          壹 、安装3个AMDlJ
IDEA就足以开展开发了。

         
贰 、一个浏览器(那其间我使用的是Chrome)

          ③ 、下载相关库(下载链接

 

肆 、预备知识

其一博客主假设介绍的React,作者也要是一下:你必要对HTML,CSS,JavaScript有一定的领会,因为代码超过八分之四都以用那么些来拓展开发的。

 

伍 、最简单易行的React小程序

自己学任何语言的时候第二个程序都是贰个Hello,World!。未来就让大家来利用React来写多个最简便易行的Hello,World!

直白上代码:

 

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

然后用浏览器打开就足以了(这里假设你已经会使用AMDlJ
IDEA,借使不会就先利用Sublime
Text),然后在浏览器里面就能够看出你尤其熟谙的Hello,World!了。

简单易行解析一下以此程序,首先,head里面引入了多少个js文件。前八个是react的js文件,你能够在目录三内部的下载相关Curry面拿。还有二个是browser.min.js,为何要引入这么些js能够参考那么些提问,其实是为了将JSX语法转换来JavaScript语法。能够百度谷歌时而,下载该文件,也得以一直引用网上资源。然后就在html里面写了3个script代码块:

<script type="text/babel">
   ReactDOM.render(
         <h1>Hello,World!</h1>,
         document.getElementById('example')
   );
</script> 

此处须求注意:首先,/h1>前面是其余,从前小编们也许利用的是type是text/javascript,未来我们利用的text/babel。那是因为React独有的JSX语法,跟JavaScript不包容,凡是利用JSX的地点,都要抬高type
= “text/babel”。

是或不是现已开放蒙圈了,刚才提了少数个JSX,什么是JSX呢?React官方文书档案里面包车型客车分解是:XML语法内部含有JavaScript被誉为JSX。但是作者清楚的相应是大家一向在JS里面嵌入了HTML,这些就是React提出的名叫JSX的语法吧。那样做的便宜便是1个零部件的费用进度中,HTML是必备的一有的,能够将HTML封装起来才是组件的完全体。JSX语法的发生,让前者达成组件化成为了大概。

JSX的大旨语法规则:蒙受HTML标签(以<起初),就用HTML规则解析;境遇代码块(以{起先),就用JavaScript规则解析。

在ReactDOM.render里面写了两行,他们的功用正是将h1题目插入example节点。

您也足以一向新建多个js文件,然后将body里script里面包车型客车代码直接放到里面,大家得以命名为helloworld.js,然后在head里面导入即可。笔者比较倾向于那种做法,因为至少html文件不会瞅着太大,而且方便引入管理。如若别的html也急需改代码块,直接引入即可。
 

 

⑥ 、基础语法介绍

1、ReactDOM.render( )

ReactDOM.render是React最核心的语法,用于将模板转换来HTML语言,并插入钦点的DOM节点。

ReactDOM.render(
    <h1>Hello,World!</h1>,
    document.getElementById('example')
);

运维结果如下:

图片 1

2、map(遍历)

将数组中的元素遍历赋值

 

var animals = ['dog','cat','pig'];
ReactDOM.render(
    <div>
        {
            animals.map(function(animal) {
              return <h1>{animal}</h1>
            })
        }
    </div>,
    document.getElementById('example')
);

从此间开首都以讲React代码放到了.js文件之中,然后在html文件之中引入。引入的时候记得写type

’text/babel’。那里会有2个小意思:打开浏览器的调剂工具后,里面见面到Warning如下:

Warning: Each child in an array or iterator should have a unique "key" prop. Check the top-level render call using <div>

解决措施如下:

var animals = ['dog','cat','pig'];
ReactDOM.render(
    <div>
        {
            animals.map(function(animal,key) {
              return <h1 key = {key}>{animal}</h1>
            })
        }
    </div>,
    document.getElementById('example')
);

警示的意思是最棒给循环发生的child添加二个key。那样就能够接触警告了。运营结果如下:

图片 2

那当中你或者还会赶上别的两个难点,那正是用的Sublime
Text,然后太浏览器打开的时候唤醒:

 

browser.min.js:3 XMLHttpRequest cannot load file:///Users/**/***/React/MyReactDemo/helloworld/src/helloworld.js.
 Cross origin requests are only supported for protocol schemes: 
http, data, chrome, chrome-extension, https, chrome-extension-resource.

 其实是因为我们将js单独拉出来文件导致的,但是你会发现只要接纳Safari浏览器是尚未那一个难题的。在这里找到了答案:

startup chrome with --disable-web-security
On Windows:

chrome.exe --disable-web-security

On Mac:

open /Applications/Google\ Chrome.app/ --args --disable-web-security

因为Chrome浏览器不接济当地ajax访问。

您也得以塑造地面服务器实行访问,比如本身动用的intellJ IDEA
,直接就是在地面营造了二个本土服务,此时走访地址为:

http://localhost:63342/MyReactDemo/helloworld/src/helloworld.html

而并未营造地面服务的时候访问地址为:

file:///Users/zhanggui/zhanggui/React/MyReactDemo/helloworld/src/helloworld.html

3、组件化

因为React使用的是JSX,所以它同意将代码封装成组件(component),然后像常常的HTML标签一样插入。

React.createClass方法就是用于生成一个组件类,比如:
var ZGButton = React.createClass({
    render:function() {
        return <button>ZG{this.props.name}</button>
    }
});
ReactDOM.render(
    <ZGButton name = 'Button1'/>,
    document.getElementById('example')
);

运营结果如下:

图片 3

下边包车型地铁ZGButton就是多个组件类,模板插入<ZGButton
/>,会自动生成三个该零件的实例。

全体组件类都必须有投机的render方法,用于出口组件。

当今代码那样写:

var zGButton = React.createClass({
    render:function() {
        return <button>ZG{this.props.name}</button>
    }
});
ReactDOM.render(
    <zGButton name="Button2">Button</zGButton>,
    document.getElementById('example')
);

也就是将零件类的首先个字符小写,然后在引用的时候发现未来是双标签了(代码自动填写的时候现身),而且name失效。由此我们在支付组件的时候肯定要将率先个首字符大写,不然将不会达到你想要的效益。

4、this.props.children

this.props对象的属性和组件的品质一一对应,可是有个children除此而外,它象征的是组件的全数子节点:

 

var Students = React.createClass({
    render:function() {
        return (
            <ol>
                {
                    React.Children.map(this.props.children,function(child) {
                        return <li>{child}</li>
                    })
                }
            </ol>
        );
    }
});
ReactDOM.render(
    <Students>
        zhangsan
        lisi
    </Students>,
    document.getElementById('example')
);

此刻出口的结果为:

图片 4

5、PropTypes

零件就接近与我们OC开发依然Java开发中的类,类能够拓展质量添加,组件也足以。

组件的性质能够承受任意值,字符串、对象、函数都行。那在那之中有二个propTypes,能够用来界定提供的性情是不是满意必要:

 

var Student = React.createClass({
    propTypes: {
      myName:React.PropTypes.string.isRequired,
    },
    render:function() {
        return <h1>
            {this.props.myName}
        </h1>
    }
});
var myNameStr = "React";
ReactDOM.render(
    <Student myName = {myNameStr} />,
    document.getElementById('example')
);

这之中的propTypes里面包车型地铁是对品质的限量,比如那里不可不是string类型,值是必须的。大家还足以去设置暗许属性值:

 

var Student = React.createClass({
    getDefaultProps: function() {
        return {
            myName:"Default React"
        }
    },

    propTypes: {
      myName:React.PropTypes.string.isRequired,
    },
    render:function() {
        return <h1>
            {this.props.myName}
        </h1>
    }
});

那些中的getDefaultProps就象是与大家在开发iOS也许Java的时候对申明属性的时候进行赋早先化值。

6、Virtual DOM

组件并不是真性的DOM节点,而是存在于内部存款和储蓄器中的一种数据结构,叫做虚拟DOM,只有插入文书档案的时候才会成为实际的DOM。依照React的统一筹划,当再一次渲染组件的时候,会通多diff寻找到变更的DOM节点,再把这些修改更新到浏览器实际的DOM节点上,所以实际并不是渲染整个DOM数,那一个Virtual
DOM是2个彻头彻尾的JS数据结构,质量比原生DOM快很多。那其间大家得以用经过ref属性来得到真实的DOM属性:

var MyComponment = React.createClass({
    render:function(){
        return (
          <div>
              <input type = "text" ref = "myTextInput"/>
              <input type = "button" value = "Focus the text input" onClick={this.handleClick}/>
          </div>
        );
    },
    handleClick:function() {
        // alert(this.refs.myTextInput);
        this.refs.myTextInput.focus();
    }
});
ReactDOM.render(
    <MyComponment/>,
    document.getElementById('example')
);

此间需求注意的是,因为大家接纳的是动真格的的DOM对象,所以必然要确定保障DOM插入文书档案之后才能够选择。

7、this.state

我们得以经过this.state来得到零部件的景色:

var LinkButton = React.createClass({
    getInitialState:function () {
      return {linked:false};
    },
    handleClick:function() {
        this.setState({linked:!this.state.linked});
    },
    render:function() {
        var text = this.state.linked? 'linked':'not linked';
        return (
            <p onClick={this.handleClick}>
                You {text} this. Click to toggle
            </p>
        );
    }
});
ReactDOM.render(
    <LinkButton/>,
    document.getElementById('example')
);

那些中作者设置了八个linked的情况(是不是连接),那里通过this.state得到当前场合,通过this.setState来设置情形。

8、表单

表单填写是用户和零部件的并行:

 

var Form = React.createClass({
    getInitialState:function() {
        return {value:'Hello'};

    },
    handleChange:function(event) {
        this.setState({value:event.target.value});
    },
    render:function() {
        var value = this.state.value;
        return (
            <div>
                <input type="text" value = {value} onChange={this.handleChange}/>
                <p>{value}</p>
            </div>

        );
    }
});
ReactDOM.render(
    <Form/>,
    document.getElementById('example')
);

9、Component Lifecycle

组件有七个重点的生命周期:

Mounting:组件插入到DOM

Updating:组件被重复渲染,假如DOM必要更新

Unmounting:从DOM中删除组件

React为每个情状都提供了二种处理函数,will函数在进入状态在此之前调用,did在进入状态之后调用。详情可参见那里

 

var MyButton = React.createClass({

    componentDidMount:function() {
        alert("已经装载");
    },
    componentWillMount:function() {
        alert("将要装载");
    },
    componentWillUpdate:function() {
        alert("将要更新");
    },
    componentDidUpdate:function() {
        alert("已经更新");
    },
    componentWillUnmount:function() {
        alert("将要移除");
    },
    render:function(){
        return (
            <button>MyButton</button>
        );
    },
});
var LoadButton = React.createClass({
    loadMyButton:function() {
      ReactDOM.render(
          <MyButton/>,
          document.getElementById('myBTN')
      );
    },
    removeMyButton:function() {
        var result = ReactDOM.unmountComponentAtNode(document.getElementById('myBTN'));
        console.log(result);
    },
    render:function() {
        return (
            <div>
                <button onClick={this.removeMyButton}>卸载MyButton</button>
                <button onClick={this.loadMyButton}>装载MyButton</button>
                <div id="myBTN">这里是mybuttonquyu</div>
            </div>


        );
    }
});
ReactDOM.render(
    <LoadButton/>,
    document.getElementById('example')
);

10、Ajax

组件的数码一般是通过Ajax请求服务器获取的,能够运用componentDidMount方法来设置Ajax请求,等到请求成功,再用this.setState方法重新渲染UI:

 

var UserGist = React.createClass({
    getInitialState:function() {
        return {
            username:'',
            lastGistUrl:''
        }
    },
    componentDidMount:function(){
        $.get(this.props.source,function(result){
            var lastGist  = result[0];
            if (this.isMounted()) {
                this.setState({
                        username:lastGist.owner.login,
                        lastGistUrl:lastGist.html_url
                }
                );
            }
        }.bind(this));
    },
    render:function() {
        return (
            <div>

                    {this.state.username}'s last gist is
                    <a href={this.state.lastGistUrl}>here</a>

            </div>
        );
    }
});
ReactDOM.render(
    <UserGist source = "https://api.github.com/users/octocat/gists"/>,
    document.getElementById('example')
);

此处运用了$,所以要引入jquery.js。

 

七、总结

   
 经过那两日的问询,大致对React入门了。个人觉得React正是为着组件化开发方便人民群众而发出的。利用React,能够让其担纲MVC中V的角色。也是对MVC架构的帮忙设计。

捌 、参考资料

  1、阮一峰的博客

  2、React官方文书档案

  3、React入门教程

相关文章