必赢亚洲手机app下载


你那多少个所谓的拼尽全力也只好骗骗自己

Gigabyte Z170N-WIFI 黑苹果 10.12

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,AMDliJ
IDEA等等都足以,你居然一贯可以行使文本编辑器等等。这多少个中我利用的是英特尔liJ
IDEA。

          1、安装一个IntellJ
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语法。可以百度Google时而,下载该公文,也得以直接引用网上资源。然后就在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')
);

运作结果如下:

苹果电脑 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。这样就可以接触警告了。运行结果如下:

苹果电脑 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是一个彻头彻尾的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入门教程

相关文章

No Comments, Be The First!
近期评论
    功能
    网站地图xml地图