react 从入门到删库跑路

最新推荐文章于 2024-04-30 04:49:19 发布

gxf_style

最新推荐文章于 2024-04-30 04:49:19 发布

阅读量1.1k

点赞数

分类专栏：前端框架，类库文章标签： react

前端框架，类库专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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>

gxf_style

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react 从入门到删库跑路

react 从入门到删库跑路2017-02-06 智能社现在最热门的前端框架react，自开源以来受到越来越多的关注和使用，现在带大家用最简单的方式学习react。react 入门 ——真正react开发环境+多组件嵌套实际项目为什么学习reacta)学好了涨工资b)从技术上说，两字好用，用的多，为啥好用
复制链接

扫一扫