概述

一个react的demo的实例，适合初学react的新手练习。

效果

用webpack打包后的目录结构

index.html

react的封装，复用与Java的类似，面向对象的编程思想。所以index首页很简单，因为其他的div已经全部封装到其他js里了

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>demo</title>

    <link href="dscommon.css" rel="stylesheet" tag="themeStyle">

    <link href="main.css" rel="stylesheet" tag="themeStyle">

</head>

<body>

<div id="example"></div>

</body>

<script type="text/javascript" src="dscommon.build.js" ></script>

<script type="text/javascript" src="main.build.js"></script>

</html>

TrafficLight类

js的入口。红绿灯和控制按钮。react父组件用state初始化color，props向子组件传递

import React from 'react';

import ReactDOM from 'react-dom';

import AllTrafficLight from "./component/alltrafficLight";

import './style/trafficLightCommon.scss';

import ControlLight from './component/controlLight';

class TrafficLight extends React.Component

{

    constructor(props)

    {

        super(props);

        this.state = {color:""};

    }

    getColor(color)

    {

        this.setState({color:color});

    }

    render()

    {

        return(

            <div className="trafficLightCommon">

                <AllTrafficLight color={this.state.color}/>

                <ControlLight light={(color)=>{

                    this.getColor(color);

                }}/>

            </div>

        );

    }

}

//DOM填充

ReactDOM.render(

    <TrafficLight/>,

    document.getElementById("example")

);

AllTrafficLight类

红绿灯界面，通过右侧的按钮来控制红绿灯的关闭，当然也可以自己改进，通过时间来控制

import React from 'react';

import TrafficLightItem from "./trafficLightItem";

import './style/trafficLight.scss';

export default class AlltrafficLight extends React.Component

{

    getRealColor()

    {

        return this.props.color?this.props.color:"all";

    }

    getIsLight(num)

    {

        switch (num)

        {

            case 1:

                if (this.getRealColor() == "red" || this.getRealColor() == "all")

                {

                    return true;

                }

                break;

            case 2:

                if (this.getRealColor() == "yellow" || this.getRealColor() == "all")

                {

                    return true;

                }

                break;

            case 3:

                if (this.getRealColor() == "green" || this.getRealColor() == "all")

                {

                    return true;

                }

                break;

        }

        return false;

    }

    render()

    {

        return(

            <div className="getAllTrafficLight">

                <TrafficLightItem color="red" isLight={this.getIsLight(1)}/>

                <TrafficLightItem color="yellow" isLight={this.getIsLight(2)}/>

                <TrafficLightItem color="green" isLight={this.getIsLight(3)}/>

            </div>

        );

    }

}

TrafficLightItem类

import React from 'react';

import './style/trafficLight.scss';

export default class TrafficLightItem extends React.Component

{

    get getPropsColor(){

        return this.props.color ? this.props.color:""

    }

    get getPropsIsLight(){

        return this.props.isLight ? this.props.isLight:false

    }

    render() {

        return (

            <div className="trafficLightItem" style={{backgroundColor:this.getPropsIsLight === true?this.getPropsColor:"",border:"1px solid "+this.getPropsColor}}/>

        );

    }

}

ControlLight类

通过点击控制灯的颜色

import React from 'react';

import './style/trafficLight.scss';

export default class ControlLight extends React.Component

{

    getLight(color)

    {

        return this.props.light(color);

    }

    getDom()

    {

        let dom = [];

        dom.push(

            <div className="controlButton" key="red_key" onClick={()=>{this.getLight("red")}}>红灯亮</div>,

            <div className="controlButton" key="yellow_key" onClick={()=>{this.getLight("yellow")}}>黄灯亮</div>,

            <div className="controlButton" key="green_key" onClick={()=>{this.getLight("green")}}>绿灯亮</div>,

            <div className="controlButton" key="no_key" onClick={()=>{this.getLight("no")}}>全不亮</div>,

            <div className="controlButton" key="all_key" onClick={()=>{this.getLight("all")}}>全都亮</div>

        );

        return dom;

    }

    render()

    {

        return(

            <div className="controlLight">

                {this.getDom()}

            </div>

        );

    }

}

红绿的和按钮的样式

trafficLightCommon.scss

.trafficLightCommon{

  margin: 10rem auto;

  width: 30rem;

}

trafficLight.scss

.getAllTrafficLight

{

  @extend .controlLight;

  .trafficLightItem

  {

    width: 5rem;

    height: 5rem;

    border-radius: 25%;

    margin-top: 1.5rem;

  }

}

.controlLight

{

  padding: 0 1rem 1rem 1rem;

  display: inline-block;

  background-color: #5b9bd5;

  vertical-align: top;

  margin-left: 3rem;

  .controlButton

  {

    background-color: #b6b8e9;

    font-size: 1rem;

    color: black;

    padding: 0.5rem;

    margin-top: 1.6rem;

    cursor: pointer;

  }

}

webpack打包的入口文件配置

dscommon.js

import 'createjs';

main.js

import '../scripts/trafficLight.js';

自动切换红绿灯trunColor

    turnColor () {

    setTimeout(()=>{

        this.setState({color:"red"});

        setTimeout(()=>{

            this.setState({color:"yellow"});

            // 递归执行方法

            setTimeout(()=>{

                this.setState({color:"green"});

                this.turnColor();

            }, 10000)

        }, 7000)

    }, 8000)

}

打包 webpack-w。。。

======================================================

如发现错误，请及时留言，lz及时修改，避免误导后来者。感谢！！！

React实例------红绿灯的更多相关文章

  1. react实例之todo,做一个实时响应的列表操作

    react实例之todo, 做一个实时响应的列表操作 在所有的mvc框架中,最常见的例子不是hello world,而是todo,由于reactjs的简单性,在不引用flux和redux的情况下,我们 ...

  2. React实例入门教程(1)基础API,JSX语法--hello world

      前  言 毫无疑问,react是目前最最热门的框架(没有之一),了解并学习使用React,可以说是现在每个前端工程师都需要的. 在前端领域,一个框架为何会如此之火爆,无外乎两个原因:性能优秀,开发 ...

  3. 【原创】React实例入门教程(1)基础API,JSX语法--hello world

    前  言 毫无疑问,react是目前最最热门的框架(没有之一),了解并学习使用React,可以说是现在每个前端工程师都需要的. 在前端领域,一个框架为何会如此之火爆,无外乎两个原因:性能优秀,开发效率 ...

  4. React学习笔记-1-什么是react，react环境搭建以及第一个react实例

    什么是react?react的官方网站:https://facebook.github.io/react/下图这个就是就是react的标志,非常巧合的是他和我们的github的编辑器Atom非常相似. ...

  5. React实例----一个表单验证比较复杂的页面

    前言:这阵子看了两本CSS的书~对于CSS层叠,定位,继承等机制基本上都了解了,就想着自己写几个页面~正好自己就写了写CSS样式,然后用React渲染出来~ 闲话不多说,简单说一说这个页面,希望能对大 ...

  6. react实例：理解dva构建项目的原理

    请点击相应的步骤查看详情 我们首先搭建一个 dva Demo  项目(请参考react快速构建一个应用项目),然后逐步完成以下内容: 结构划分 设计 Model 组件设计方法 组件设计实践 添加 Re ...

  7. 一个简单的 react 实例： < TodoList >

    <  react     TodoList:  > 组件: //引入React : import React from 'react'; //组件 class TodoList exten ...

  8. React.js入门小案例

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...

  9. [转] React同构思想

    React比较吸引我的地方在于其客户端-服务端同构特性,服务端-客户端可复用组件,本文来简单介绍下这一架构思想. 出于篇幅原因,本文不会介绍React基础,所以,如果你还不清楚React的state/ ...

随机推荐

  1. 本机安装mysql步骤

    原文:https://www.cnblogs.com/dukeShi/p/6546024.html 本机安装mysql服务,步骤教程(另附SQLyog和Navicat工具) 因为这段时间不是装系统就是 ...

  2. Golang 需要避免踩的 50 个坑1

    最近准备写一些关于golang的技术博文,本文是之前在GitHub上看到的golang技术译文,感觉很有帮助,先给各位读者分享一下. 前言 Go 是一门简单有趣的编程语言,与其他语言一样,在使用时不免 ...

  3. 分布式异步框架celery

    Celery 1.什么是Clelery Celery是一个简单.灵活且可靠的,处理大量消息的分布式系统 专注于实时处理的异步任务队列 同时也支持任务调度 Celery架构 Celery的架构由三部分组 ...

  4. Apache源码编译安装脚本

      Apache是开源的的.最流行的Web服务器软件之一,它快速.可靠并且可通过简单的API扩充,将Perl/Python/PHP等解释器编译到服务器中.Apache的模块超多,以及具有运行稳定,强大 ...

  5. Eric6安装问题解决

    按照http://eric-ide.python-projects.org/eric-download.html中的说明,执行命令:python install.py 却遇到下面的问题: Compil ...

  6. Networking POJ - 1287

    题目链接:https://vjudge.net/problem/POJ-1287 思路:最小生成树板子题 #include <iostream> #include <cstdio&g ...

  7. 注意力机制---Attention、local Attention、self Attention、Hierarchical attention

    一.编码-解码架构 目的:解决语音识别.机器翻译.知识问答等输出输入序列长度不相等的任务. C是输入的一个表达(representation),包含了输入序列的有效信息. 它可能是一个向量,也可能是一 ...

  8. Godaddy ssl证书配置到nginx

    打开终端,输入以下命令 openssl req -new -newkey rsa:2048 -nodes -keyout domain.key -out domain.csr 生成过程会询问几个常见问 ...

  9. 浏览器bug html 底部

  10. 在eclipse中打jar包

    在Eclipse中打jar包 步骤: 1. 在项目名称中点击右键,点Export... 2.选择java-->Java File, next 3. 选择你打算打包的文件.可以选择某几个文件,也可 ...