AjaxReact开发入门

目录:

一、前言

二、什么是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,AMDliJ
IDEA等等都足以,你依旧直接可以行使文本编辑器等等。那里面我利用的是AMDliJ
IDEA。

          1、安装一个AMDlJ
IDEA就足以开展付出了。

         
2、一个浏览器(那个中我利用的是Chrome)

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

 

四、预备知识

以此博客紧假若介绍的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>

下一场用浏览器打开就可以了(这里假如你曾经会选拔英特尔lJ
IDEA,如若不会就先采纳Sublime
Text),然后在浏览器里面就足以看看您特别熟悉的Hello,World!了。

大概分析一下这多少个程序,首先,head里面引入了五个js文件。前六个是react的js文件,你可以在目录三内部的下载相关库里面拿。还有一个是browser.min.js,为何要引入这几个js可以参见这么些提问,其实是为了将JSX语法转换成JavaScript语法。可以百度谷歌时而,下载该文件,也得以直接引用网上资源。然后就在html里面写了一个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的语法吧。这样做的功利就是一个零件的开支过程中,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')
);

运行结果如下:

Ajax 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’。这里会有一个小问题:打开浏览器的调节工具后,里面会看出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。这样就足以触发警告了。运行结果如下:

Ajax 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')
);

运作结果如下:

Ajax 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')
);

这时候出口的结果为:

Ajax 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是一个彻头彻尾的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入门教程

相关文章