react 从入门到删库跑路

    xiaoxiao2021-03-25  92

    react 从入门到删库跑路

    2017-02-06  智能社

    现在最热门的前端框架react,自开源以来受到越来越多的关注和使用,现在带大家用最简单的方式学习react。react 入门 ——真正react开发环境+多组件嵌套实际项目

    为什么学习react

    a)学好了涨工资

    b)从技术上说,两字好用,用的多,为啥好用

      react的优缺点

    一、react的优点:

    1.组件化:组件化有利于分工协作,降低程序复杂度,如果一个大型程序你还用传统方式去做,你那么基本上你头发会掉的很快

    2.虚拟DOM,性能高

    3.跨平台,兼容移动端

    二、recat的缺点:

    1.成熟案例少,中文资料少。

    2.不按套路出牌,跟我们传统MVC不太一样。

    3.JSX写起来跟js有点区别,以前在js里面看起来像错误的玩意在jsx里面跑的爽爽的,让你怀疑人生。

    4.陌生单词多,什么redux了,什么route了,什么Flex了,这都什么。

    先告诉大家一个结论,react不难学,你不会的东西就是你用不到的东西,你用到了也就会了。比如JSX语法简单的让人发指。

      了解JSX

    react 用了很多ES6语法,然后JSX也没法直接运行,需要用babel编译成js才能运行,我们使用babel,就是一个工具把JSX和ES6编译成浏览器能够跑起来的ES5的东西。

    安装babel,其实很讨厌为了学一个东西去学另外一个东西的,比如为了学react要去学JSX,为了学JSX要学babel,为了学babel要使用npm或者bower,本身技术的进步是为了解决问题,而解决问题的方式是引进新的问题,本身思路就是个悖论。简单的说你会为了喝一杯纯牛奶去种草么?

    不过因为我们是学习阶段,而不是去设计react,所以多学点东西总不是坏事儿,我们今天就不用NPM去安装babel,而是用bower。你就把它当成npm去用换个单词儿的事儿

    安装babel.

    bower install babel

    下载react

    bower install react

    直接上例子,我这里就不引入bower里面的js而是直接放到单独文件夹了

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><script src="js/react.js" charset="utf-8"></script><script src="js/react-dom.js" charset="utf-8"></script><script src="js/browser.js" charset="utf-8"></script><script type="text/babel">   window.onload = function () {       var oDiv = document.getElementById('div1');       ReactDOM.render(          <span>111</span>,          oDiv       );   };    </script></head><body>    <div id="div1"></div></body></html>

    上面这么用是正确的,但是发挥不出react的组件化威力,要用class方式。

    重点敲小黑板划重点了,注意看这个才是正经react用法,老版本还是忘了吧。重点看下面,组件是可以加属性的,属性不怎么好,状态比较好

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><script src="js/react.js" charset="utf-8"></script><script src="js/react-dom.js" charset="utf-8"></script><script src="js/browser.js" charset="utf-8"></script><script type="text/babel">    class Tab extends React.Component{        render(){            return <span>我是{this.props.name},今年{this.props.age}岁</span>;        }    }            window.onload = function () {        ReactDOM.render(            <Tab name="leo" age="18"/>,            document.body        );    };</script></head><body></body></html>

    上面是属性的玩法,下面来个状态的。

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><script src="js/react.js" charset="utf-8"></script><script src="js/react-dom.js" charset="utf-8"></script><script src="js/browser.js" charset="utf-8"></script><script type="text/babel">    class Tab extends React.Component{        constructor(args){            super(args);            this.state ={value:''}        }        render(){            return <div>                <input type="text" onChange={this.fn.bind(this)}/>                <span>{this.state.value}</span>            </div>;        }        fn(ev){            this.setState({                value:ev.target.value            });        }     }    window.onload = function () {        var oDiv = document.getElementById('div1');        ReactDOM.render(            <Tab />,            oDiv        );    };</script></head><body>    <div id="div1"></div></body></html>
    转载请注明原文地址: https://ju.6miu.com/read-14394.html

    最新回复(0)