[项目][准备2] React体验

最新推荐文章于 2022-07-12 22:40:11 发布
最新推荐文章于 2022-07-12 22:40:11 发布
阅读量245 收藏
点赞数
分类专栏： 大三上-软件工程
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/luxin_xyz/article/details/52714349
版权

学习目标

在准备1中，我们利用Bootstrap绘制了一个静态的计算器页面，那个页面没有任何功能。在准备2中，我们将利用React把计算器功能实现。

准备2中不涉及npm相关，准备3中会介绍并使用

学习参考

React版本：15.3.2

可先按以下链接顺序简要学习，重点在跑其中的例子和理解React的思想：

JavaScript相关的内容，可以参考如下链接：

以上链接均来自 菜鸟教程

以下链接内容很值得后续学习：

实践示例

准备工作

目录结构

-prepare2
    -js
        jquery.min.js
        bootstrap.min.js
        react.js
        react-dom.js
        browser.min.js
    -css
        bootstrap.min.css
    index.html

引入依赖

修改index.html的head部分：

<head>
    <title>计算器</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/react.js"></script>
    <script type="text/javascript" src="js/react-dom.js"></script>
    <script type="text/javascript" src="js/browser.min.js"></script>
</head>

组件划分

我们将组件按如下思路划分：

  1. 整个网页应用有一个根组件，App组件
  2. 计算结果显示是一个组件，ResultShow组件
  3. 按钮组应该是一个组件，ButtonContainer组件
  4. 按钮也应该是一个组件，Button组件

组件的树状结构应该是这样的：

-App
    ResultShow
    -ButtonContainer
        Button
        ......
        Button

确定状态

先来思考一下这个计算器是如何工作的的：

  • 计算器能存四个值，一个是运算结果，一个是输入数字，一个是加法标记，一个是运算结束标记
  • 计算器初始运算结果、输入数字为0，加法标记初始为不存在，运算结束标记初始为存在
  • 计算器显示规则：对运算结果操作则显示运算结果，对输入数字操作则显示输入数字，都操作则显示运算结果
  • 计算器工作状态如下：
-数字按钮
    -有加法标记
        数字追加到输入数字
    -无加法标记
        -有运算结束标记 
            数字赋值到运算结果
            清除运算结束标记
        -无运算结束标记 
            数字追加到运算结果

-加法按钮
    -有加法标记
        输入数字+运算结果->运算结果
        输入数字清零
    -无加法标记
        设置加法标记

-等于按钮
    -有加法标记
        输入数字+运算结果->运算结果
        输入数字清零
        清除加法标记
        设置运算结束标记
    -无加法标记
        设置运算结束标记

这个计算器网页应用的状态应该有如下几个：

  • 显示数字应该是一个状态
  • 运算结果应该是一个状态
  • 输入数字应该是一个状态
  • 加法标记应该是一个状态
  • 运算结束应该是一个状态

在这里，5个状态都可以存储在App组件中

组件实现

ResultShow组件：

var ResultShow = React.createClass({
    propTypes: {
        showNumber: React.PropTypes.number.isRequired
    },  
    render: function () {
        return (
            <div className="row clearfix">
                <div className="col-xs-4 column col-xs-offset-8">
                    <center><h3>{this.props.showNumber}</h3></center>
                </div>
            </div>
        );
    }
});

Button组件：

var Button = React.createClass({
    propTypes: {
        buttonType: React.PropTypes.string.isRequired,
        handleOnClick: React.PropTypes.func.isRequired
    },  
    render: function () {
        return (
            <div className="row clearfix">
                <div className="col-xs-12 column">
                    <center><button type="button" className="btn btn-success" onClick={this.props.handleOnClick}>{this.props.buttonType}</button></center>
                </div>
            </div>
        );
    }
});

ButtonContainer组件：

var ButtonContainer = React.createClass({
    propTypes: {
        handleOnClick: React.PropTypes.func.isRequired
    },  
    render: function () {

        var item1 = [];
        var item2 = [];
        var item3 = [];

        for (var i=1; i<=3; i++) {
            item1.push(<Button key={3*i-2+""} handleOnClick={this.props.handleOnClick.bind(null, 3*i-2+"")} buttonType={3*i-2+""} />);
            item2.push(<Button key={3*i-1+""} handleOnClick={this.props.handleOnClick.bind(null, 3*i-1+"")} buttonType={3*i-1+""} />);
            item3.push(<Button key={3*i-0+""} handleOnClick={this.props.handleOnClick.bind(null, 3*i-0+"")} buttonType={3*i-0+""} />);
        }

        item1.push(<Button key={"0"} handleOnClick={this.props.handleOnClick.bind(null, "0")} buttonType={"0"} />);
        item2.push(<Button key={"+"} handleOnClick={this.props.handleOnClick.bind(null, "+")} buttonType={"+"} />);
        item3.push(<Button key={"="} handleOnClick={this.props.handleOnClick.bind(null, "=")} buttonType={"="} />);

        return (
                <div className="row clearfix">
                    <div className="col-xs-4 column">
                        {item1}
                    </div>
                    <div className="col-xs-4 column">
                        {item2}
                    </div>
                    <div className="col-xs-4 column">
                        {item3}
                    </div>
                </div>
                );
    }
});

App组件：

var App = React.createClass({
    getInitialState: function () {
        return {    
                showNumber: 0, 
                resultNumber : 0, 
                inputNumber: 0, 
                addFlag: false, 
                endFlag: true
                };
    },
    handleOnClick: function(buttonType, event) {
        switch (buttonType) {
            case '+' :
                if (this.state.addFlag) {
                    this.setState({
                        resultNumber: this.state.resultNumber + this.state.inputNumber,
                        inputNumber: 0,
                        showNumber: this.state.resultNumber + this.state.inputNumber //new resultNumber
                    });
                } else {
                    this.setState({
                        addFlag: true
                    });
                }
                break;
            case '=' :
                if (this.state.addFlag) {
                    this.setState({
                        resultNumber: this.state.resultNumber + this.state.inputNumber,
                        inputNumber: 0,
                        addFlag: false,
                        endFlag: true,
                        showNumber: this.state.resultNumber + this.state.inputNumber //new resultNumber
                    });
                } else {
                    this.setState({
                        endFlag: true
                    });
                }
                break;
            default:
                if (this.state.addFlag) {
                    this.setState({
                        inputNumber: this.state.inputNumber*10 + parseInt(buttonType),
                        showNumber: this.state.inputNumber*10 + parseInt(buttonType) //new inputNumber
                    });
                } else {
                    if (this.state.endFlag) {
                        this.setState({
                            resultNumber: parseInt(buttonType),
                            endFlag: false,
                            showNumber: parseInt(buttonType) //new resultNumber
                        });
                    } else {
                        this.setState({
                            resultNumber: this.state.resultNumber*10 + parseInt(buttonType),
                            showNumber: this.state.resultNumber*10 + parseInt(buttonType) //new resultNumber
                        });
                    }
                }
                break;
        }
    },
    render: function () {
        return (
            <div className="container">
                <div className="row clearfix">
                    <div className="col-xs-12 column">
                        <div className="row clearfix">
                            <div className="col-xs-6 column col-xs-offset-3">
                                <div className="jumbotron">
                                    <div className="pull-left">
                                        <h1><strong>计算器</strong></h1>
                                    </div>
                                    <p></p>
                                    <div className="row clearfix">
                                        <div className="col-xs-12 column">
                                            <ResultShow showNumber={this.state.showNumber} />
                                            <p></p>
                                            <ButtonContainer handleOnClick={this.handleOnClick} />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
});

全部代码

index.html的全部代码，配合上文的目录结构，本地直接用浏览器打开就可以看到效果：

<!DOCTYPE html>
<html>
<head>
    <title>计算器</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/react.js"></script>
    <script type="text/javascript" src="js/react-dom.js"></script>
    <script type="text/javascript" src="js/browser.min.js"></script>
</head>
<body>
    <div id="app">
    </div>

    <script type="text/babel">
        var ResultShow = React.createClass({
            propTypes: {
                showNumber: React.PropTypes.number.isRequired
            },  
            render: function () {
                return (
                    <div className="row clearfix">
                        <div className="col-xs-4 column col-xs-offset-8">
                            <center><h3>{this.props.showNumber}</h3></center>
                        </div>
                    </div>
                );
            }
        });


        var Button = React.createClass({
            propTypes: {
                buttonType: React.PropTypes.string.isRequired,
                handleOnClick: React.PropTypes.func.isRequired
            },  
            render: function () {
                return (
                    <div className="row clearfix">
                        <div className="col-xs-12 column">
                            <center><button type="button" className="btn btn-success" onClick={this.props.handleOnClick}>{this.props.buttonType}</button></center>
                        </div>
                    </div>
                );
            }
        });


        var ButtonContainer = React.createClass({
            propTypes: {
                handleOnClick: React.PropTypes.func.isRequired
            },  
            render: function () {

                var item1 = [];
                var item2 = [];
                var item3 = [];

                for (var i=1; i<=3; i++) {
                    item1.push(<Button key={3*i-2+""} handleOnClick={this.props.handleOnClick.bind(null, 3*i-2+"")} buttonType={3*i-2+""} />);
                    item2.push(<Button key={3*i-1+""} handleOnClick={this.props.handleOnClick.bind(null, 3*i-1+"")} buttonType={3*i-1+""} />);
                    item3.push(<Button key={3*i-0+""} handleOnClick={this.props.handleOnClick.bind(null, 3*i-0+"")} buttonType={3*i-0+""} />);
                }

                item1.push(<Button key={"0"} handleOnClick={this.props.handleOnClick.bind(null, "0")} buttonType={"0"} />);
                item2.push(<Button key={"+"} handleOnClick={this.props.handleOnClick.bind(null, "+")} buttonType={"+"} />);
                item3.push(<Button key={"="} handleOnClick={this.props.handleOnClick.bind(null, "=")} buttonType={"="} />);

                return (
                        <div className="row clearfix">
                            <div className="col-xs-4 column">
                                {item1}
                            </div>
                            <div className="col-xs-4 column">
                                {item2}
                            </div>
                            <div className="col-xs-4 column">
                                {item3}
                            </div>
                        </div>
                        );
            }
        });


        var App = React.createClass({
            getInitialState: function () {
                return {    
                        showNumber: 0, 
                        resultNumber : 0, 
                        inputNumber: 0, 
                        addFlag: false, 
                        endFlag: true
                        };
            },
            handleOnClick: function(buttonType, event) {
                switch (buttonType) {
                    case '+' :
                        if (this.state.addFlag) {
                            this.setState({
                                resultNumber: this.state.resultNumber + this.state.inputNumber,
                                inputNumber: 0,
                                showNumber: this.state.resultNumber + this.state.inputNumber //new resultNumber
                            });
                        } else {
                            this.setState({
                                addFlag: true
                            });
                        }
                        break;
                    case '=' :
                        if (this.state.addFlag) {
                            this.setState({
                                resultNumber: this.state.resultNumber + this.state.inputNumber,
                                inputNumber: 0,
                                addFlag: false,
                                endFlag: true,
                                showNumber: this.state.resultNumber + this.state.inputNumber //new resultNumber
                            });
                        } else {
                            this.setState({
                                endFlag: true
                            });
                        }
                        break;
                    default:
                        if (this.state.addFlag) {
                            this.setState({
                                inputNumber: this.state.inputNumber*10 + parseInt(buttonType),
                                showNumber: this.state.inputNumber*10 + parseInt(buttonType) //new inputNumber
                            });
                        } else {
                            if (this.state.endFlag) {
                                this.setState({
                                    resultNumber: parseInt(buttonType),
                                    endFlag: false,
                                    showNumber: parseInt(buttonType) //new resultNumber
                                });
                            } else {
                                this.setState({
                                    resultNumber: this.state.resultNumber*10 + parseInt(buttonType),
                                    showNumber: this.state.resultNumber*10 + parseInt(buttonType) //new resultNumber
                                });
                            }
                        }
                        break;
                }
            },
            render: function () {
                return (
                    <div className="container">
                        <div className="row clearfix">
                            <div className="col-xs-12 column">
                                <div className="row clearfix">
                                    <div className="col-xs-6 column col-xs-offset-3">
                                        <div className="jumbotron">
                                            <div className="pull-left">
                                                <h1><strong>计算器</strong></h1>
                                            </div>
                                            <p></p>
                                            <div className="row clearfix">
                                                <div className="col-xs-12 column">
                                                    <ResultShow showNumber={this.state.showNumber} />
                                                    <p></p>
                                                    <ButtonContainer handleOnClick={this.handleOnClick} />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                );
            }
        });


        ReactDOM.render(
            <App />,
            document.getElementById('app')
        );
    </script>
</body>
</html>
luxin_xyz
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react项目经验
05-25 2858
调用后返回上一页&&跳转至当前页 this.props.history.goBack(); 返回 this.props.history.push("/index/setting/basicsetting"); 跳转 this.props.history.go(-1) 跳转 当使用时出现以下错误Cannot read property 'push' of un...
React入门——项目搭建
01-08
2. **安装Yarn (可选)**: Yarn是另一个流行的包管理器，提供更稳定和安全的包管理体验。你可以从[Yarn官网](https://classic.yarnpkg.com/en/docs/install)获取安装指南。 安装完成后，通过命令行工具检查Node.js...
项目经验：react创建项目
weixin_44828005的博客
08-16 362
前言 如果你学会了，可以忽略本文章，或去项目经验地图寻找更多答案 创建项目的方式 第一种：使用脚手架，创建react 或者 react + typescript 第二种：使用webpack，创建react 或者 react + typescript 第一种：使用脚手架，创建react 或者 react + typescript 安装脚手架： npm i -g create-react-app || yarn add global create-react-app 创建react项目 npx c
react项目经验(二)
06-20 328
删除接口，弹出模态框询问，回调函数写在一个函数里 productDelete=(productInfo)=>{ Modal.confirm({ title:"删除产品", content:`您确认要删除产品 "${productInfo.name}" 吗？`, centered:true, ...
React项目经验总结
接着奏乐接着舞的博客
07-12 4325
目录1、报错 xxx.map is not a function2、如何将后端返回的二进制流转换为base64格式的展示？3、下载4、父组件如何把值传给子组件？子组件又如何接收？5、父组件如何获取子组件所有的state里面定义的值？6、antd+react 之layout左侧菜单点击时加背景色--高亮（适用于每一个项目） 错误原因：因为后端数据还没收到，数组是空的，而map方法不会对空数组检测，结果报错解决：拓展： 如果对象是数组，返回的是true，否则false 语法： xxx指的是：后端返回的图片的
react项目总结
糖糖小菜鸟前端er
01-08 1200
本文章主要是源自实际项目开发项目的总结，一些思考是参考了看过的文章，做了一篇总结，demo是跑过的，可以放心食用。 目录 一.组件通信 1.父组件向子组件通信 2.子组件向父组件通信 3.跨级组件通信 4.兄弟组件通信 5.无嵌套关系的组件通信 二、避免重复渲染 1.隔离独立渲染的子组件 2.与渲染无关的变量不用state来管理数据 3.批量更新state、合并state 4.class组件中使用shouldComponentUpdate 5.绑定事件尽量不使用箭头函...
原有android项目接入react-native|CapManage.zip
11-19
在Android项目中集成React-Native是一项常见的技术任务，它允许开发者利用JavaScript的灵活性和React库的强大功能，同时保持原生应用的性能和用户体验。本文将详细介绍如何将React-Native接入到现有的Android项目中...
react-webpack4react多页面脚手架
08-15
**React-Webpack4 React多页面脚手架** 在现代前端开发中，React作为一个流行的JavaScript库，广泛用于构建用户界面...通过深入理解其工作原理和配置，开发者可以更好地管理复杂的React项目，提高开发效率和用户体验。
react-18.2.0
03-17
通过深入学习和分析"react-18.2.0"源码，开发者可以了解到React如何实现这些特性和优化，以及如何在自己的项目中充分利用它们。这不仅有助于提高个人技能，还能为团队带来更高效、更稳定的开发流程。
react实现换肤功能的示例代码
10-18
在React应用中实现换肤功能是一项常见的需求，它允许用户根据个人喜好选择不同的主题颜色，提升用户体验。本文将详细介绍如何在React中实现这一功能，并提供一个具体的示例代码。 一、目标 目标是为用户提供几种...
2021年React项目前端开发总结
码蝗的博客
03-08 1152
此项目为公司的公众号管理系统，承载了公司每个部门的业务，需求多，开发周期长，技术可圈可点之处较多，特此记录与大家分享! 1. 使用技术：react＋react-router + react-redux +antd 2. 请求方法封装 调用方法 3. 破解反盗链 4. 配置打包生产环境与测试环境 5. webpack + react-router 按需加载 首先在webpack中配置，主要需要配置chunkFilename这个属性，其它的顺便提一下 path：输出...
React项目经验
imber___zsk的博客
11-12 2404
一.moment库的使用 //引入 import moment from 'moment'; //设置中文 moment.locale('zh-cn'); //把value格式化成 年月日 格式 moment(value).format('YYYY-MM-DD') 二.field的使用 //引入 import { Field } from '@alifd/next'; //创建 hooks 风格 const field = Field.useField([]); //注入表单 <Form {...f
React三种经典项目架构(大神路过.....)
热门推荐
蜗牛不会跑
07-08 2万+
有关于React+redux的项目架构一直存在多种声音，目前主流的主要有三种：按照类型，按照页面功能，Ducks。一，按照类型     这里的类型指的是文件在项目中充当的角色类型，比如这个文件是一个component（展示组件），container（容器组件），在redux状态管理当中有，action，reducer等，这些不同角色的文件都放在一个单独的文件夹里面，这样样式的结构也是react官方...
React项目从开发到上线运行全过程
天工开物
07-02 2万+
        随着react的流行，越来越多的前端工程师使用react来进行开发，当时用react时，creact-react-app无疑进入了大家的眼帘，本篇文章主要讲述如何从无到有的使用creact-react-app开发react应用，然后本地调试，直到最后的上线运行。 本篇文章内容结构说明，主要有以下12个部分： 1. 安装nodejs 2.使用nodejs的npm包安装cre...
react项目经验(三)
07-04 1846
react使用if else语句的方法 ①在函数中使用if else语句，然后调用函数 export default class Demo extends React.Component { state={ value:"first", } select=()=>{ if (this.state.value==="first...
大学生挑战杯-喜树根器官培养和抗癌物质喜树碱生成的研究.rar
07-26
大学生挑战杯-喜树根器官培养和抗癌物质喜树碱生成的研究.rar
b278视频及游戏管理平台-springboot+vue.zip（可运行源码+sql文件+）
07-26
视频及游戏管理平台是一个很好的项目，结合了后端（Spring Boot）和前端（Vue.js）技术，实现了前后端分离。 视频及游戏管理平台是一个很好的项目，结合了后端（Spring Boot）和前端（Vue.js）技术，实现了前后端分离。 视频及游戏管理平台是一个很好的项目，结合了后端（Spring Boot）和前端（Vue.js）技术，实现了前后端分离。 视频及游戏管理平台是一个很好的项目，结合了后端（Spring Boot）和前端（Vue.js）技术，实现了前后端分离。 视频及游戏管理平台是一个很好的项目，结合了后端（Spring Boot）和前端（Vue.js）技术，实现了前后端分离。 视频及游戏管理平台是一个很好的项目，结合了后端（Spring Boot）和前端（Vue.js）技术，实现了前后端分离。
大模型应用-为Ollma开发的简单的HTML网页UI应用-附项目源码-优质项目实战.zip
最新发布
07-26
大模型应用_为Ollma开发的简单的HTML网页UI应用_附项目源码_优质项目实战
基于JAVA局域网监听软件的设计与开发(源代码+论文).rar
07-26
基于JAVA局域网监听软件的设计与开发(源代码+论文).rar
react电影项目实战
07-15
在开始React电影项目实战之前，我们首先需要准备好开发环境，包括安装Node.js和创建React应用。然后，我们可以使用一些第三方库来辅助开发，如React Router用于实现页面路由、Axios用于发送HTTP请求、Redux用于状态...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值