React学习入门实例

最新推荐文章于 2022-08-09 09:57:47 发布
最新推荐文章于 2022-08-09 09:57:47 发布
阅读量599 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： JavaScript 文章标签： javascript dom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zhenzigis/article/details/50540332

上节中接触的react hello world例子中引用了三个框架脚本文件，react.js 、react-dom.js 和 Browser.js ，它们必须首先加载。其中，react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能，Browser.js 的作用是将 JSX 语法转为 JavaScript 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。

注意：browser.js这个和那个开源的bowser.js不一样，那个是用来检测浏览器的小脚本，和BOWSER.JS也不一样，那个是一个JS 3D网页游戏开发的库，和bower也不一样，那个是一个包管理工具，这些名字呀，老纳也是醉了。

这是一个timer计时器的官方例子，直接把组件加到body里，整个源码：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    * {
        padding:0;
        margin:0;
    }

    html{
        font:14px normal Arial, sans-serif;
        color:#626771;
    }

    body{
        padding:60px;
        text-align: center;
    }
    </style>
    <script src="../react.min.js"></script>
    <script src="../react-dom.min.js"></script>
    <script src="../browser.min.js"></script>
</head>
<body>
    <script  type="text/babel">
    var TimerExample = React.createClass({
        getInitialState: function(){
            return { elapsed: 0 };
        },

        componentDidMount: function(){
            this.timer = setInterval(this.tick, 50);
        },

        componentWillUnmount: function(){    
            clearInterval(this.timer);
        },

        tick: function(){     
            this.setState({elapsed: new Date() - this.props.start});
        },

        render: function() {            
            var elapsed = Math.round(this.state.elapsed / 100);
            var seconds = (elapsed / 10).toFixed(1);    
            return <p>This example was started <b>{seconds} seconds</b> ago.</p>;
        }
    });

    React.render(
        <TimerExample start={Date.now()} />,
        document.body
    );
    </script>
</body>
</html>

定义了一个组件TimerExample ，里面componentDidMount和componentWillUnmount是五个事件中的其中两个，分别表示组件加载完成和组件将被卸载，这里用来初始化计时器和清除计时器。getInitialState设置了一个变量elapsed 初始值为0，计时器每隔50ms执行一次tick方法，设置elapsed 为当前时间减去初始时间，初始时间被定义成了组件的属性start，在组件里获取属性的方式是通过this.props，render返回了格式化的HTML，秒数被格式化保留一位小数。
这里写图片描述

这个例子很容易理解，里面组件的定义，数据的处理，组件如何被使用都很清楚。

再看一个导航菜单的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    * {
        padding:0;
        margin:0;
    }

    html{
        font:14px normal Arial, sans-serif;
        color:#626771;
        background-color:#fff;
    }

    body{
        padding:60px;
        text-align: center;
    }

    ul{
        list-style:none;
        display: inline-block;
    }

    ul li{
        display: inline-block;
        padding: 10px 20px;
        cursor:pointer;
        background-color:#eee;
        color:#7B8585;

        transition:0.3s;
    }

    ul li:hover{
        background-color:#beecea;
    }

    ul li.focused{
        color:#fff;
        background-color:#41c7c2;
    }

    p{
        padding-top:15px;
        font-size:12px;
    }
    </style>
    <script src="../react.min.js"></script>
    <script src="../react-dom.min.js"></script>
    <script src="../browser.min.js"></script>
</head>
<body>
    <script  type="text/babel">     
    var MenuExample = React.createClass({
        getInitialState: function(){
            return { focused: 0 };
        },

        clicked: function(index){
            this.setState({focused: index});
        },

        render: function() {
            var self = this;
            return (
                <div>
                    <ul>{ this.props.items.map(function(m, index){          
                        var style = '';         
                        if(self.state.focused == index){
                            style = 'focused';
                        }
                        return <li className={style} onClick={self.clicked.bind(self, index)}>{m}</li>;         
                    }) }                            
                    </ul>                   
                    <p>Selected: {this.props.items[this.state.focused]}</p>
                </div>
            );
        }
    });
    React.render(
        <MenuExample items={ ['Home', 'Services', 'About', 'Contact us'] } />,
        document.body
    );
    </script>
</body>
</html>

这个导航菜单使用一个变量focused来标记选中的是哪一个，虽然很原始，但扩展一下就可以在项目里用了，哈哈。

搜索智 能提示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    * {
        padding:0;
        margin:0;
    }

    html{
        font:14px normal Arial, sans-serif;
        color:#626771;
        background-color:#fff;
    }

    body{
        padding:60px;
        text-align: center;
    }

    input[type=text]{
        text-align: center;
        font: inherit;
        border: 6px solid #a3d8d6;
        padding: 13px 12px;
        font-size: 15px;
        box-shadow: 0 1px 1px #DDD;
        width: 384px;
        outline: none;
        display: block;
        color: #7B8585;
        margin: 0 auto 20px;
    }

    ul{
        list-style: none;
        display: inline-block;
        width: 420px;
        text-align: left;
    }

    ul li{
        display: block;
        padding: 15px 20px;
        background-color: #F8F8F8;
        color: #7B8585;
        margin-bottom: 3px;
        position: relative;

        transition: 0.3s;
    }

    ul li a{
        position: absolute;
        left: 160px;
        font-size: 12px;
        line-height: 16px;
        color: #969d9d;
    }

    ul li:hover{
        background-color:#d8f2f1;
    }
    </style>
    <script src="../react.min.js"></script>
    <script src="../react-dom.min.js"></script>
    <script src="../browser.min.js"></script>
</head>
<body>
    <script  type="text/babel">
    var SearchExample = React.createClass({
        getInitialState: function(){
            return { searchString: '' };
        },

        handleChange: function(e){          
            this.setState({searchString:e.target.value});
        },

        render: function() {
            var libraries = this.props.items,
                searchString = this.state.searchString.trim().toLowerCase();
            if(searchString.length > 0){
                libraries = libraries.filter(function(l){
                    return l.name.toLowerCase().match( searchString );
                });
            }

            return <div>
                        <input type="text" value={this.state.searchString} onChange={this.handleChange} placeholder="Type here" />
                        <ul> 
                            { libraries.map(function(l){
                                return <li>{l.name} <a href={l.url}>{l.url}</a></li>
                            }) }
                        </ul>
                    </div>;
        }
    });


    var libraries = [
        { name: 'Backbone.js', url: 'http://documentcloud.github.io/backbone/'},
        { name: 'AngularJS', url: 'https://angularjs.org/'},
        { name: 'jQuery', url: 'http://jquery.com/'},
        { name: 'Prototype', url: 'http://www.prototypejs.org/'},
        { name: 'React', url: 'http://facebook.github.io/react/'},
        { name: 'Ember', url: 'http://emberjs.com/'},
        { name: 'Knockout.js', url: 'http://knockoutjs.com/'},
        { name: 'Dojo', url: 'http://dojotoolkit.org/'},
        { name: 'Mootools', url: 'http://mootools.net/'},
        { name: 'Underscore', url: 'http://documentcloud.github.io/underscore/'},
        { name: 'Lodash', url: 'http://lodash.com/'},
        { name: 'Moment', url: 'http://momentjs.com/'},
        { name: 'Express', url: 'http://expressjs.com/'},
        { name: 'Koa', url: 'http://koajs.com/'}
    ];
    React.render(
        <SearchExample items={ libraries } />,
        document.body
    );
    </script>
</body>
</html>

就一个handleChange和filter就简单地实现了强大的过滤功能，react真的挺好用的。
这里写图片描述

表格计算

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
* {
    padding:0;
    margin:0;
}

html{
    font:14px normal Arial, sans-serif;
    color:#626771;
    background-color:#fff;
}

body{
    padding:60px;
    text-align: center;
}

h1{
    font-size:18px;
    margin-bottom:20px;
}

#services{
    list-style: none;
    display: inline-block;
    width: 340px;
    text-align: left;
}

#services p{
    display: block;
    padding: 15px 20px;
    background-color: #F8F8F8;
    color: #7B8585;
    margin-bottom: 3px;
    position: relative;
    cursor: pointer;

    transition: 0.3s;
}

#services p b{
    position: absolute;
    right: 28px;
    line-height: 16px;
    width: 100px;
    color: #808787;
    text-align: right;
}

#services p:hover{
    background-color:#d8f2f1;
}

#services p.active{
    color:#fff;
    background-color:#41c7c2;
}

#services p.active b{
    color: #fff;
}

#total{
    background: none !important;
    cursor: default !important;
    padding-top: 10px !important;
}
    </style>
    <script src="../react.min.js"></script>
    <script src="../react-dom.min.js"></script>
    <script src="../browser.min.js"></script>
</head>
<body>
    <script  type="text/babel">
    var ServiceChooser = React.createClass({
        getInitialState: function(){
            return { total: 0 };
        },
        addTotal: function( price ){
            this.setState( { total: this.state.total + price } );
        },
        render: function() {
            var self = this;
            var services = this.props.items.map(function(s){
                return <Service name={s.name} price={s.price} active={s.active} addTotal={self.addTotal} />;
            });
            return <div>
                        <h1>Our services</h1>                    
                        <div id="services">
                            {services}
                            <p id="total">Total <b>${this.state.total.toFixed(2)}</b></p>
                        </div>
                    </div>;

        }
    });

    var Service = React.createClass({
        getInitialState: function(){
            return { active: false };
        },
        clickHandler: function (){
            var active = !this.state.active;
            this.setState({ active: active });
            this.props.addTotal( active ? this.props.price : -this.props.price );
        },
        render: function(){
            return  <p className={ this.state.active ? 'active' : '' } onClick={this.clickHandler}>
                        {this.props.name} <b>${this.props.price.toFixed(2)}</b>
                    </p>;
        }
    });

    var services = [
        { name: 'Web Development', price: 300 },
        { name: 'Design', price: 400 },
        { name: 'Integration', price: 250 },
        { name: 'Training', price: 220 }
    ];

    React.render(
        <ServiceChooser items={ services } />,
        document.body
    );
    </script>
</body>
</html>

这个例子演示了两个组件怎么配合使用，ServiceChooser 使用了Service组件，一个Service 相当于一行，而ServiceChooser 是Service的组合，根据click事件和state.active来控制总量的计算。
这里写图片描述

以上示例均来自官方，代码整合到一个html文件中，直接运行就可见效果。

十分详细的React入门实例
王浴昊
09-26 8万+
学习React不是一蹴而就的事情，入门似乎也没那么简单。但一切都是值得的。今天给大家带来一个详细的React的实例，实例并不难，但对于初学者而言，足够认清React的思考和编写过程。认真完成这个实例的每一个细节会让你受益匪浅。接下来我们开始吧！代码下载预览首先说明一下，本例究竟做了什么。本文实现了一个单页面人员管理系统的前台应用。包括以下功能： 人员基本信息列表； 人员的录入及删除； 人员详细信息的
ReactJS学习系列课程（React 整体流程使用案例）
天外野草技术专栏
06-27 6424
对于一门语言的学习，少不了动手练习，今天我们就尝试一下，如何用React编写一个简单的程序，实现功能包括网络请求数据，绑定数据进行增删改查，并进行相应的路由操作。下面我们来年代码：package.json我们创建一个package.json, 里面包含一些开发库还有核心库：{ "name": "demo4", "version": "1.0.0", "description": "",
【优快云软件工程师能力认证学习精选】十分详细的React入门实例
优快云高校俱乐部官方博客
02-26 541
优快云软件工程师能力认证（以下简称C系列认证）是由中国软件开发者网优快云制定并推出的一个能力认证标准。C系列认证历经近一年的实际线下调研、考察、迭代、测试，并梳理出软件工程师开发过程中所需的各项技术技能，结合企业招聘需求和人才应聘痛点，基于公开、透明、公正的原则，甑别人才时确保真实业务场景、全部上机实操、所有过程留痕、存档不可篡改。 我们每天将都会精选优快云站内技术文章供大家学习，帮助大家系统化学习IT技术。 学习React不是一蹴而就的事情，入门似乎也没那么简单。但一切都是值得的。 今天给.
React 入门实例教程
abvedu的博客
03-09 359
要想学习使用react Native，还是先读一读《阮一峰的网络日志》中的有关《 React 入门实例教程 》，写得还好！ http://www.ruanyifeng.com/blog/2015/03/react.html
react 入门实例
10-10
react 入门实例代码
开始学习React啦---React入门实例
这个博客记录我的成长。(专注前端开发，ehcarts图表开发，接定制)，有需要请站内私信。
06-09 854
React学习（第一个实例） Vue学的差不多了，谈不上精通，但是单人搭建、开发、组件、路由、vuex什么的都基本没问题了，所以不能闲着，打算边写项目温习Vue，边学习下Reac。 因为是刚开始学习熟悉下写法，所以并没有上来就开始搭建脚手架什么的。需要注意下面三个地方。 ​​​​​​​引入文件 一共有三个 分别是 babel,react-dom,react.d...
React入门实例学习
08-10
在React入门实例学习中，我们将探索React.js，一个由Facebook开发并维护的JavaScript库，用于构建用户界面。React以其组件化、虚拟DOM和声明式编程风格而闻名，是现代Web开发的重要工具。在这个实例学习中，我们将从...
ReactNative开发实例带你入门reactnative开发
08-10
这个“ReactNative开发实例带你入门reactnative开发”的资源，显然是一个针对初学者的教程，旨在帮助他们理解并掌握React Native的基本概念、架构以及实际开发流程。 React Native的核心理念是“Learn Once, Write ...
react next框架实例
最新发布
11-18
通过学习和实践Next.js，开发者不仅可以掌握React的基础，还能了解如何利用高级特性来优化Web应用，提升开发效率和用户体验。同时，Next.js社区活跃，有丰富的插件和文档支持，是现代Web开发的强大工具。
react项目使用需要注意的地方
蓝枫秋千的踩坑记录
04-07 1116
componentDidmount必须放到所有方法最前面 return后面不要加else（如果是if中的结构简单也能省去{}) function elsereturn() { // 不提倡用法 if(布尔值) { return 333; } else { return 444; } // 提倡用法 if(布尔值) return 333; return 444;...
React与Vue实现Input去除首尾空格的对比
前端博客典中典
12-06 3229
需求：要求所有的input框提交前自动去除首尾空格，全部都是空格就全部去除。 最简单的办法是在提交前对数据作处理，但是这样会带来很多的重复性工作，所以需要把这层逻辑抽取出 来。 一、React的做法 目前用的是
React
开发，而
React
并没有原生提供类似功能，使用的
Antd
也没有提供，需要我们 自己封装。 如果都是
Input
组件，我们直接封装一层，加上去除首尾空格的逻辑即可。 去除的最佳时机应该是输入框失去光标的时候，所以应该监听
blur
事件。 具体代码如下： import React
String之trim的用法
我以我心Coding You
03-06 1335
String之trim的用法 package day01; /** * String trim() * 去除当前字符串两边的空白字符 * @author kaixu * */ public class StringDemo5 { public static void main(String[] args) { String str = &quot; Hello &quot;; String ...
JavaScript去除字符串两边空格trim
WEBCODE
04-01 412
JavaScript去除字符串两边空格trim 2011-03-01 去除字符串左右两端的空格，在大部分编程语言中，比如PHP、vbscript里面可以轻松地使用 trim、ltrim 或 rtrim实现。但在js中却没有这3个内置方法，需要手工编写。下面的实现方法是用到了正则表达式，效率不错，并把这三个方法加入String对象的内置方法中去。 写成类的方法格式如下：（s...
String中的trim()方法
weixin_30340617的博客
07-03 1267
Stirng中的trim()方法的作用就是去掉字符串前面和后面的空格. String str = " test trim "; System.out.println(str.trim()); 会在控制台打印出test trim 前后都没有空格 /** 附上trim() 源码 */ public String trim() { int len = value.length; ...
String的trim()方法无效的解决办法
jifashihan的博客
01-10 8785
后台返回的数据中，有空格，用trim()方法无效，后来发现，表面上看到的空格，unicode为12288，是全角空格，所以要先替换掉再trim()，str = str.replace((char) 12288, ' '); str=str.trim();参考文章【JAVA】unicode为12288字符
字符串trim()
正在路上
09-06 589
// 清除两边的空格 String.prototype.trim = function() { return this.replace(/(^\s*)|(\s*$)/g, ''); }; // 合并多个空白为一个空白 String.prototype.ResetBlank = function() { var regEx = /\s+/g; return this.rep
React基础(超级详细，有案例)
weixin_43604021的博客
08-09 1950
React组件 Diffing算法等基础知识和用法
React 入门实例教程 12个demo
滴水成川
03-05 8430
原文链接：http://www.ruanyifeng.com/blog/2015/03/react.html 下面要讲解的12个例子在各个 Demo 子目录，每个目录都有一个 index.html 文件，在浏览器打开这个文件（大多数情况下双击即可），就能立刻看到效果。 demo下载地址：https://github.com/ruanyf/react-demos 需要说明的是，Re
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值