React基本案例

最新推荐文章于 2024-06-04 09:33:24 发布
最新推荐文章于 2024-06-04 09:33:24 发布
阅读量728 收藏
点赞数
分类专栏： React教程系列
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fenglixiong123/article/details/82564414
版权

1.todoList

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ToDoList</title>
    <script src="../common/react/development.js"></script>
    <script src="../common/react-dom/development.js"></script>
    <script src="../common/babel.js"></script>
    <script src="../common/prop-types.js"></script>
</head>
<body>

<div id="app1"></div>

<script type="text/babel">

    /*
        需求：
            1.点击按钮提示第一个输入框的值
        功能界面的组件化编码流程
            1.拆分组件
            2.实现静态组件
            3.实现动态组件
                动态显示初始化内容
                交互功能（绑定事件监听）
        问题：数据保存到哪个组件？
            看数据哪些组件需要，如果多个需要操作数据就放到共同父类组件里面
        问题：如何在子组件中改变父组件的状态？
            子组件不能直接改变父组件的状态
            状态在哪个组件，更新状态的行为就应该定义在哪个组件
            解决：父组件定义函数传递给子组件
        错误：
            将字符串的ref用法和函数式的ref用法搞错了
     */

    //ES6类组件
    const App = class extends React.Component{

        constructor(props){
            super(props);
            //初始化状态
            this.state = {
                todos:['吃饭','睡觉','豆豆','刷完','洗澡']
            };
            this.addTodo = this.addTodo.bind(this);
        }

        addTodo(item){
            const {todos} = this.state;
            todos.unshift(item);
            //更新状态
            this.setState(
                {todos}
            );
        }

        render(){

            const {todos:doList} = this.state;

            return(
                <div>
                    <h1>Simple ToDo List</h1>
                    <Add count={doList.length} addTodo={this.addTodo}/>
                    <List todos={doList}/>
                </div>
            );
        }
    };

    //自定义Add组件
    const Add = class extends React.Component{

        constructor(props){
            super(props);
            this.handleAdd = this.handleAdd.bind(this);
        }

        handleAdd(){
            console.log("handleAdd--->",this);
            //1.读取输入的数据
            const item = this.todoinput.value.trim();
            //2.检查合法性
            if(!item){
                return
            }
            //3.添加元素
            const {addTodo} = this.props;
            addTodo(item);
            this.todoinput.value='';
        }

        render(){

            const {count} = this.props;

            return(
                <div>
                    <input ref={node=>this.todoinput=node} type="text"/>
                    <button ref="dddd" onClick={this.handleAdd}>add #{count+1}</button>
                </div>
            );
        }
    };

    Add.propTypes = {
        count:PropTypes.number.isRequired,
        addTodo:PropTypes.func.isRequired
    };

    const List = class extends React.Component{

        constructor(props){
            super(props);
        }

        render(){

            const {todos:doList} = this.props;

            return(
                <div>
                    <ul>
                        {
                            doList.map((item,index)=>{ return <li key={index}>{item}</li>})
                        }
                    </ul>
                </div>
            );
        }
    };

    //声明数据类型
    List.propTypes = {
        todos:PropTypes.array.isRequired
    };


    ReactDOM.render(<App/>, document.getElementById('app1'));


</script>


</body>
</html>

2.loginForm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>LoginForm</title>
    <script src="../common/react/development.js"></script>
    <script src="../common/react-dom/development.js"></script>
    <script src="../common/babel.js"></script>
    <script src="../common/prop-types.js"></script>
</head>
<body>

<div id="app1"></div>

<script type="text/babel">

    /*
        需求：
            1.点击按钮提示第一个输入框的值
        功能界面的组件化编码流程
            1.拆分组件
            2.实现静态组件
            3.实现动态组件
                动态显示初始化内容
                交互功能（绑定事件监听）
        问题：数据保存到哪个组件？
            看数据哪些组件需要，如果多个需要操作数据就放到共同父类组件里面
        问题：如何在子组件中改变父组件的状态？
            子组件不能直接改变父组件的状态
            状态在哪个组件，更新状态的行为就应该定义在哪个组件
            解决：父组件定义函数传递给子组件
        错误：
            将字符串的ref用法和函数式的ref用法搞错了
        概念：
            受控组件：
                可以自动收集组件值到状态中去
            非受控组件：
                需要时候自己去拿组件的值
     */

   const LoginForm = class extends React.Component{

       constructor(props){
           super(props);
           this.state = {
               pwd:'',
           };
           this.handleSubmit = this.handleSubmit.bind(this);
           this.handlePwdChange = this.handlePwdChange.bind(this);
       }

       handleSubmit(e){
           console.log("handleSubmit--->",this);
           //阻止表单的默认提交
            e.preventDefault();
            const username = this.nameInput.value.trim();
            alert(`准备提交的用户名：${username}，密码：${this.state.pwd}`);
       }

       handlePwdChange(e){
            const pwd = e.target.value.trim();
            this.setState({pwd});
       }

       render(){
           return(
           <div>
               <form action="/test" onSubmit={this.handleSubmit}>
                   用户名：<input ref={ins=>this.nameInput=ins} type="text"/>
                   密  码：<input type="password" value={this.state.pwd} onChange={this.handlePwdChange}/>
                   <input type="submit" value="登录"/>
               </form>
           </div>)
       }

   };


    ReactDOM.render(<LoginForm/>, document.getElementById('app1'));


</script>


</body>
</html>

3.clock

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Clock</title>
    <script src="../common/react/development.js"></script>
    <script src="../common/react-dom/development.js"></script>
    <script src="../common/babel.js"></script>
    <script src="../common/prop-types.js"></script>
</head>
<body>

<div id="app1"></div>

<script type="text/babel">

    /*

        功能界面的组件化编码流程
            1.拆分组件
            2.实现静态组件
            3.实现动态组件
                动态显示初始化内容
                交互功能（绑定事件监听）
        问题：数据保存到哪个组件？
            看数据哪些组件需要，如果多个需要操作数据就放到共同父类组件里面
        问题：如何在子组件中改变父组件的状态？
            子组件不能直接改变父组件的状态
            状态在哪个组件，更新状态的行为就应该定义在哪个组件
            解决：父组件定义函数传递给子组件
        错误：
            将字符串的ref用法和函数式的ref用法搞错了
        概念：
            受控组件：
                可以自动收集组件值到状态中去
            非受控组件：
                需要时候自己去拿组件的值
     */

    /*
        生命周期（钩子函数）

        1.初始化
            componentWillMont():挂载之前-将要插入DOM时候回调
            Render():挂载
            componentDidMont():挂载之后-已经插入DOM时候回调
        2.更新
            componentWillUpdate():
            this.setState()-Render():更新重新渲染
            componentDidUpdate():
        3.销毁
            componentWillUnmount():卸载之前
            unmountComponentAtNode():卸载
        重要的勾子函数
            render():渲染页面
            componentDidMount():开启监听发送ajax请求
            componentWillUnmount():做一些收尾的工作例如清理定时器
            componentWillReceiveProps():后面讲

     */

    const Clock = class extends React.Component{
        constructor(props){
            super(props);
            //状态初始化
            this.state = {
                date:new Date().toLocaleString()
            }
        }

        componentDidMount(){
            setInterval(()=>{
                this.setState({date:new Date().toLocaleString()})
            },1000);
        }

        render(){
            const {date} = this.state;
            return(
                <div>时间：{date}</div>
            )
        }
    };


    ReactDOM.render(<Clock />, document.getElementById('app1'));


</script>


</body>
</html>

4.animal

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>LoginForm</title>
    <script src="../common/react/development.js"></script>
    <script src="../common/react-dom/development.js"></script>
    <script src="../common/babel.js"></script>
    <script src="../common/prop-types.js"></script>
</head>
<body>

<div id="app1"></div>

<script type="text/babel">

    /*

        功能界面的组件化编码流程
            1.拆分组件
            2.实现静态组件
            3.实现动态组件
                动态显示初始化内容
                交互功能（绑定事件监听）
        问题：数据保存到哪个组件？
            看数据哪些组件需要，如果多个需要操作数据就放到共同父类组件里面
        问题：如何在子组件中改变父组件的状态？
            子组件不能直接改变父组件的状态
            状态在哪个组件，更新状态的行为就应该定义在哪个组件
            解决：父组件定义函数传递给子组件
        错误：
            将字符串的ref用法和函数式的ref用法搞错了
        概念：
            受控组件：
                可以自动收集组件值到状态中去
            非受控组件：
                需要时候自己去拿组件的值
     */

    /*
        生命周期（钩子函数）

        1.初始化
            componentWillMont():挂载之前-将要插入DOM时候回调
            Render():挂载
            componentDidMont():挂载之后-已经插入DOM时候回调
        2.更新
            componentWillUpdate():
            this.setState()-Render():更新重新渲染
            componentDidUpdate():
        3.销毁
            componentWillUnmount():卸载之前
            unmountComponentAtNode():卸载
        重要的勾子函数
            render():渲染页面
            componentDidMount():开启监听发送ajax请求
            componentWillUnmount():做一些收尾的工作例如清理定时器
            componentWillReceiveProps():后面讲

     */

   class Life extends React.Component{

       constructor(props){
           super(props);
           this.state = {
               opacity:1
           };
           this.destroyComponent = this.destroyComponent.bind(this);
       }

       //即将挂载
       //Render之前
       componentWillMount(){
           console.log("componentWillMount-即将挂载",this);
       }

       //内置函数，this指向类
       //render之后
       componentDidMount(){
           console.log("componentDidMount-挂载之后",this);
           this.clockId = setInterval(function () {
               console.log("clock working...");
               let {opacity} = this.state;
               opacity -= 0.1;
               if(opacity<=0){
                   opacity = 1;
               }
               this.setState({opacity});
           }.bind(this),200);
       }

       //即将更新
       //this.setState()之前
       componentWillUpdate(){
           console.log("componentWillUpdate-更新之前",this);
       }

       //更新之后
       //this.setState()之后
       componentDidUpdate(){
           console.log("componentDidUpdate-更新之后",this);
       }

       //内置函数，this指向类
       //卸载之前
       componentWillUnmount(){
           console.log("clock stop...");
           clearInterval(this.clockId);
       }

       //点击按钮卸载定时器
       //卸载之后只是界面卸载
       //定时器还在执行
       destroyComponent(){
           //ReactDom提供的卸载组件的接口
           ReactDOM.unmountComponentAtNode(document.getElementById('app1'));
       }

       render(){
           const {msg} = this.props;
           const {opacity} = this.state;
           const style = {opacity};
           return(
               <div>
                   <h2 style={style}>{msg}</h2>
                   <button onClick={this.destroyComponent}>卸载动画</button>
               </div>
           )
       }

   }

    ReactDOM.render(<Life msg="Hello React"/>, document.getElementById('app1'));


</script>


</body>
</html>

 

花生糖葫芦侠
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
React案例1
xiaowu1127的博客
02-17 377
react列表案例
React基础概述
m0_65892856的博客
05-18 436
1.React介绍 ：React是一个用于构建用户页面的js库，专注于视图，实现组件化开发。主要用来写HTML页面或者构建Web应用，起源于Facebook内部项目，可以进行安卓、ios移动端开发，使用虚拟dom和diffing算法，尽量减少与真实dom的交互提高性能。 2.组件化 ：讲一个复杂的页面分为若干个独立的组件，每个组件都包括自己的逻辑和样式，再将这些组件合成一个完整的页面，这样的方式减少了逻辑复杂又实现了代码的复用。 3.React组件 ：组件可分为两种 ： （1）函数声明组件（适用...
react入门小案例案例
SOLar7SysteM的博客
01-12 984
源码：https://github.com/dansoncut/React-beginner-tutorial-TeacherEgg.git视频地址：https://www.bilibili.com/video/BV1be411w7iF/?
React 综合案例
weixin_59405322的博客
07-10 1065
React综合案例
探索React开发艺术：通过10个实战项目学以致用
最新发布
gitblog_00082的博客
06-04 397
探索React开发艺术：通过10个实战项目学以致用 ???? 项目地址:https://gitcode.com/HuXn-WebDev/React-With-10-Projects 在现代Web开发领域，React.js 已经成为了构建高性能用户界面的首选框架。React-With-10-Projects 是一个精心设计的学习资源，它旨在帮助你在短短7小时内精通React，并通过实际动手完成10个真实的...
React基础(超级详细，有案例)
weixin_43604021的博客
08-09 1742
React组件 Diffing算法等基础知识和用法
9个不错的前端开源项目
frontend_frank的博客
05-06 3235
无论您是刚开始编程还是已经是一名经验丰富的开发人员，在这个行业中，学习新的概念和语言/框架是跟上快速变化的必要条件。以React为例，它是四年前才由Facebook开源的，它已经成为全球...
React的简单介绍
weixin_45535233的博客
09-21 720
这是一篇关于react的简单介绍！！！ 1、react简介 React 是一个用于构建用户界面的 JAVASCRIPT 库。主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。 2、...
react入门实践案例
01-24
React是Facebook推出的一款用于构建用户界面的JavaScript库，尤其适合构建单页应用（SPA）。...通过学习和实践cxh_react中的案例，你将对React的基本概念和工作原理有更深入的理解，为后续的React开发打下坚实基础。
Typescript 简单React项目案例
09-01
**TypeScript 简单React项目案例** 在创建一个基于TypeScript的React项目时，我们需要了解几个关键概念和文件的作用。这个项目案例旨在提供一个基础的框架，展示如何结合TypeScript与React进行开发。 1. **...
react 的 todoList 案例代码
06-20
通过分析这个"todoList"案例，我们可以学习React组件化编程思想、状态管理、事件处理以及生命周期方法的运用，这些都是开发React应用的基本技能。对于想要深入了解React的人来说，这是一个很好的起点。
react 案例
09-19
react 案例111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
React案例代码.zip
02-11
总的来说，React案例代码.zip中可能涵盖了React的基本组件使用、状态管理和生命周期方法、路由实现、数据处理以及React Native的相关示例，这些都是React开发的关键知识点。通过研究这些代码，开发者不仅可以深入...
react 之 记账本案例
12-30
在React世界中，创建一个...通过实现这个记账本案例，开发者能够熟练掌握React的基本操作，理解组件间的通信，以及如何在React环境中组织和管理数据。同时，这也是一个良好的起点，为更复杂的React项目打下坚实的基础。
87个案例带你精通React框架【留言送书】
u012384510的博客
04-10 143
大家好，我是若川。之前送过N次书，可以点此查看回馈粉丝，现在又和机械工业出版社划华章图书合作再次争取了几本书，具体送书规则看文末。工欲善其事，必先利其器。今天推荐你入手这本React技术的神级武器库：《React Cookbook中文版》，（O'reily的经典系列书籍）扫码了解，各大电商平台有售正如本书的英文原名一样，作为Cookbook（菜谱），本书将呈现React各个方面的“精美菜肴”。具...
react 最佳入门_推荐18个最佳React.js项目示例「值得收藏」
weixin_39982236的博客
12-19 7846
前言无论您是编程的新手还是经验丰富的开发人员，您都可能在寻找资源来帮助您构建自己的应用程序。React.js是一个非常流行的前端框架，具有强大的社区，这意味着您可以找到很多项目作为示例。我们希望简化您的研究工作，因此在本文中，我们将介绍18个React.js项目，它们的复杂程度各不相同，并且可以用作新项目的灵感来源。检查它们还可以帮助您了解更多关于React.js的信息。该列表正在收集新鲜的示例，...
React 路由详解(超详细详解)
热门推荐
chen4565的博客
07-30 1万+
React React 路由 对SPA的理解 1.单页Web应用（single page web application，SPA）。 2.整个应用只有一个完整的页面。 3.点击页面中的链接不会刷新页面，只会做页面的局部更新。 4.数据都需要通过ajax请求获取, 并在前端异步展现。 路由的理解 1.什么是路由 1.一个路由就是一个映射关系(key:value) 2.key为路径, value可能是function或component 2.路由分类 1.后端路由： 1)理解： value是fun
react基础06--react综合案例-电商网站导航
脚步不能达到的地方，眼光可以达到；眼光不能达到的地方，精神可以飞到
02-09 1160
react基础06--react综合案例-电商网站导航1 介绍2 案例设计模块2.1 分类导航数据模型设计2.2 一级分类导航切换高亮效果2.3 显示二级分类导航2.4 路由跳转到二级导航的商品列表2.5 商品搜索3 注意事项4 说明 1 介绍 继上文 react基础05–react-router 路由, 本文将根据上述01-05小节的基础知识实现一个小型电商网站的基础导航和搜索模型. 分类导航是一个很重要且常见的功能, 常见美团App商品 菜品都是一级导航， 京东、淘宝等商城多为二级甚至三级导航。本文将实
react项目案例_想在2020年成为前端大师？就做这9个项目吧
weixin_39719077的博客
12-12 622
无论你是编程新手，还是经验丰富的开发人员，都需要不断学习新的概念和语言 / 框架，才能跟得上这个快速变化的行业。以 React 为例——它在 4 年前才被 Facebook 开源，如今已经成为全球 JavaScript 开发人员的首选。当然还有 Vue 和 Angular，它们也有自己庞大的追随者群体。然后是 Svelte、Next.js 和 Nuxt.js 等通用框架，以及 Gatsby、Gri...
react项目实战案例
08-19
当然，我可以给你一些React项目实战案例的建议。...这些项目案例可以帮助你熟悉React的基本概念和开发流程，同时也可以提供一些实际应用场景的练习。你可以根据自己的兴趣选择一个项目开始动手实践。希望对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

花生糖葫芦侠

创作不易，请多多支持！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值