React学习练习

最新推荐文章于 2024-05-11 10:00:50 发布
最新推荐文章于 2024-05-11 10:00:50 发布
阅读量163 收藏
点赞数
分类专栏： React 文章标签： React
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/GJM_CSDN/article/details/80427366
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="build/react.js"></script>
    <script src="build/react-dom.js"></script>
    <script src="build/browser.min.js"></script>

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

</div>
</body>
<script type="text/babel">
   /* var Mystyle ={
        color:'#ddd'
    };
    ReactDOM.render(
        <div>
        <h1 style={Mystyle}>这是学习的第一个小例子</h1>
           <h2>{3+5}</h2>
        </div>
        ,
        document.getElementById("example")
    );*/
   /*react实例，输出js，输出样式*/
  /* var arr =[
       <h1>JSX允许在模版中插入数组</h1>,
       <h2>所以这是数组练习</h2>
   ]
   ReactDOM.render(
       <div>{arr}</div>,
       document.getElementById("example")
   )*/
   /*react输出数组,在组件中使用props*/
 /* var HelloMessage = React.createClass({
      render:function () {
          return <h1>这是自己封装的一个组件输出Hello World!{this.props.name}</h1>;
      }
  });
  ReactDOM.render(
      <HelloMessage name="像组件传递参数，使用this.props属性，添加name"/>,
      document.getElementById("example")
  );*/
 /*react组件以及向组件传递参数*/

    /*复合组件*/
/*var Website = React .createClass({
    render:function () {
        return(
            <div>
                <Name name={this.props.name}/>
                <Link site={this.props.site}/>
            </div>
        );
    }
});
var Name = React.createClass({
    render:function () {
        return(
            <h1>{this.props.name}</h1>
        );
    }
});

var Link = React.createClass({
    render:function () {
        return(
            <a href={this.props.site}>
                {this.props.site}
            </a>
        );
    }
});

ReactDOM.render(
    <Website name="百度" site=" http://www.baidu.com" />,
    document.getElementById("example")
);
*/


/*state状态*/
   /* var LinkButton = React.createClass({
        getInitialState:function () {
            return{liked:false};
        },
        handleClick:function (event) {
            this.setState({liked: !this.state.liked });
        },
        render:function () {
            var text = this.state.liked ? "喜欢" : "不喜欢";
            return(
                <p onClick={this.handleClick}>
                    你<b>{text}</b>我，点我切换状态。
                </p>
            );
        }
    });

    ReactDOM.render(
        <LinkButton/>,
        document.getElementById("example")
    );*/


/* getDefaultProps() 方法为 props 设置默认值*/
   /*var HelloMessage = React.createClass({
       getDefaultProps: function() {
           return {
               name: 'xiaoxiao'
           };
       },
       render: function() {
           return <h1>Hello {this.props.name}</h1>;
       }
   });

   ReactDOM.render(
       <HelloMessage />,
       document.getElementById('example')
   );*/
/*state与props一起使用*/
   /*var WebSite = React.createClass({
       getInitialState: function() {
           return {
               name: "百度" ,
               site: " http://www.baidu.com"
           };
       },

       render: function() {
           return (
               <div>
                   <Name name={this.state.name} />
                   <Link site={this.state.site} />
               </div>
           );
       }
   });

   var Name = React.createClass({
       render: function() {
           return (
               <h1>{this.props.name}</h1>
           );
       }
   });

   var Link = React.createClass({
       render: function() {
           return (
               <a href={this.props.site}>
                   {this.props.site}
               </a>
           );
       }
   });

   ReactDOM.render(
       <WebSite />,
       document.getElementById('example')
   );*/

   /*props验证*/
   //var title = "这是练习";
   /* var title = 123;
   var MyTitle = React.createClass({
       propTypes: {
           title: React.PropTypes.string.isRequired,
       },

       render: function() {
           return <h1> {this.props.title} </h1>;
       }
   });
   ReactDOM.render(
       <MyTitle title={title} />,
       document.getElementById('example')
   );*/

   /*生命周期*/
    /*var Hello = React.createClass({
        getInitialState:function () {
            return{
                opacity:1.0
            };
        },
        componentDidMount:function () {
            this.timer = setInterval(function () {
                var opacity = this.state.opacity;
                opacity -= .05;
                if (opacity < 0.1) {
                    opacity = 1.0;
                }
                this.setState({
                    opacity: opacity
                });
            }.bind(this), 100);
        },
        render:function () {
            return(
                <div style={{opacity: this.state.opacity}}>
                    Hello {this.props.name}
                </div>
            );
        }
    });

   ReactDOM.render(
       <Hello name="world"/>,
       document.body
   );*/


   /* var Button = React.createClass({
        getInitialState:function () {
            return{
                data:0
            };
        },
        setNewNumber:function () {
            this.setState({data: this.state.data + 1})
        },
        render:function () {
            return(
                <div>
                    <button onClick={this.setNewNumber}>INCREMENT</button>
                    <Content myNumber = {this.state.data}></Content>
                </div>
            );
        }
    })
    var Content = React.createClass({
        componentWillMount:function () {
            console.log("Component WILL MOUNT!")
        },
        componentDidMount:function () {
            console.log("Component DID MOUNT!")
        },
        componentWillReceiveProps:function(newProps) {
            console.log('Component WILL RECEIVE PROPS!')
        },
        shouldComponentUpdate:function(newProps, newState) {
            return true;
        },
        componentWillUpdate:function(nextProps, nextState) {
            console.log('Component WILL UPDATE!');
        },
        componentDidUpdate:function(prevProps, prevState) {
            console.log('Component DID UPDATE!')
        },
        componentWillUnmount:function() {
            console.log('Component WILL UNMOUNT!')
        },
        render: function () {
            return (
                <div>
                    <h3>{this.props.myNumber}</h3>
                </div>
            );
        }
    });
   ReactDOM.render(

       <div>
           <Button />
       </div>,
       document.getElementById('example')
   );
    */

/*表单*/
   var HelloMessage = React.createClass({
       getInitialState: function() {
           return {value: ''};
       },
       handleChange: function(event) {
           this.setState({value: event.target.value});
       },
       render: function() {
           var value = this.state.value;
           return <div>
               <input type="text" value={value} onChange={this.handleChange} />
               <h4>{value}</h4>
           </div>;
       }
   });
   ReactDOM.render(
       <HelloMessage />,
       document.getElementById('example')
   );
/*事件*/
   var HelloMessage = React.createClass({
       getInitialState:function () {
           return{value:"hello"};
       },
       handleChange:function (event) {
           this.setState({value:"你好"})
       },
       render:function () {
           var value = this.state.value;
           return <div>
               <button onClick={this.handleChange}>点我</button>
               <h2>{value}</h2>
           </div>;
       }
   });
   ReactDOM.render(
       <HelloMessage/>,
       document.getElementById("example")
   );

/*ref*/
   /*var MyComponent = React.createClass({
       handleClick: function() {
           // 使用原生的 DOM API 获取焦点
           this.refs.myInput.focus();
       },
       render: function() {
           //  当组件插入到 DOM 后，ref 属性添加一个组件的引用于到 this.refs
           return (
               <div>
                   <input type="text" ref="myInput" />
                   <input
                       type="button"
                       value="点我输入框获取焦点"
                       onClick={this.handleClick}
                   />
               </div>
           );
       }
   });

   ReactDOM.render(
       <MyComponent />,
       document.getElementById('example')
   );*/
</script>
</html>

 

GJM_大萌
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React入门基础+练习 (一)
crystal_iwwish的博客
02-13 982
文章目录一、关于react1.1 react相关文档1.2 react是什么？1.3 react的特点？二、react的脚手架三、react元素的创建练习四、JSX4.1 JSX是什么4.2 JSX的使用4.3 JSX中使用JavaScript表达式*4.3.1 可以访问对象的属性**4.3.2 可以访问数组下标**4.3.3 可以调用方法**4.3.4 可以使用三元表达式*4.4 条件渲染4.4.1 if/else4.4.2 三元表达式4.4.3 &&运算符4.3 JSX注意事项
React入门基础+练习（二）
crystal_iwwish的博客
02-15 524
文章目录一、组件创建1.1 函数组件1.2 类组件二、组件区别2.1 有状态和无状态组件2.2 类组件的状态三、事件处理*3.1 注册事件**3.2 事件对象**3.3 this指向问题*四、setState修改状态五、表单处理*5.1 非控组件**5.2 受控组件* 一、组件创建 组件创建有两种：一种是函数组件、一种是类组件 1.1 函数组件 函数组件就是使用JS的函数或者箭头函数创建的组件 函数组件创建： // 普通构造函数 function Hello() { return <div>
2024年Web前端最全【练习案例React一】创建React项目(1)，2024年最新hr打压面试者
最新发布
2401_84433807的博客
05-11 458
还有很多的同学在学习的过程中一味的追求学的速度，很快速的刷视频，写了后面忘了前面，最后什么都没有学到，什么都知道，但是什么都不懂，要具体说，也说不出个所以然。还有很多的同学在学习的过程中一味的追求学的速度，很快速的刷视频，写了后面忘了前面，最后什么都没有学到，什么都知道，但是什么都不懂，要具体说，也说不出个所以然。但是真的是这样的吗？很多自学的朋友往往都是自己去找资料学习的，资料上有的或许就学到了，资料上没有的或许就没有学到。因为自学走的弯路是比较的多的，会踩很多的坑，学习的过程中是比较的迷茫的。
react练习题
欣欣酱博客
04-09 1901
1.在函数组件中使用哪个Hook可以包裹副作用（改变 DOM、添加订阅、设置定时器、记录日志等） useReducer useState useEffect useCallback 2.以下不属于react支持的剪贴板事件的 onCopy onPaste onCut onBeforeCopy 3.class组件生命周期方法对应到函数组件和Hook，以下说法错误的是 render => 这是函数组件体本身 getSnapshotBeforeUpdate 目前没
react学习
qq_41212845的博客
10-21 713
4，webpack工具：脚手架自动配置了此工具，项目运行时会自动打包 index.js文件引入 index.html中。固定命令的文件：当访问服务器是，如果没有指定访问的文件名，默认访问该文件。localhost:3000，访问当前计算机中，端口号是3000的软件。整个网站只有一个页面，通过路由切换页面中局部的内容，实现页面的变更。–开启了一个服务器，服务器程序的唯一标识、端口号：3000。localhost:域名，代表当前计算机在网络中的名字。3.，项目中的index.html文件。
【练习案例React一】创建React项目
qq_41632427的博客
11-16 34
目录 前言 导语 创建项目 修改项目 前言 我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 导语 这段时间为了不断提升自己的一个代码技巧 开始自己手动写一个React的demo进行练手 ...
react学习入门_react入门_react前端学习
09-20
这个“react学习入门”资料包显然是为初学者设计的，旨在帮助他们快速掌握React的基础知识。 React的核心概念是组件化。组件是React中的独立、可重用的代码块，它们可以像HTML元素一样嵌套和组合。通过这种方式，...
react学习练手小demo
03-16
在本文中，我们将深入探讨React.js，一个广泛用于构建用户界面的前端JavaScript库，特别是针对“react学习练手小demo”这个项目。React以其组件化和数据状态管理的特性而闻名，是现代Web开发中的重要工具。让我们...
React 官方学习模板
03-21
React是Facebook推出的一款开源JavaScript库，用于构建用户界面，尤其是单页应用（SPA）。它采用组件化开发方式，使得UI代码可复用、可维护，是现代...不断练习和探索，你将能熟练运用React来构建高效、动态的Web应用。
react学习.zip
02-23
在"react学习.zip"这个压缩包中，我们可以预见到它包含了关于React的学习资料，如教程、示例代码以及可能的项目实践。 React的核心概念： 1. **组件化**：React应用由可复用的组件构成，每个组件都负责自己的视图...
react的前端学习资料
01-01
React是当前非常流行的JavaScript库，...在学习过程中，通过阅读源码、练习项目和参与社区讨论，可以更深入地理解和掌握React的精髓。同时，持续关注React的最新发展，如React 18的新特性，可以帮助保持技术的前沿性。
React基本训练
02-08
Create React App入门 该项目是通过。 可用脚本 在项目目录中，可以运行： yarn start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果进行编辑，页面将重新加载。 您还将在控制台中看到任何棉绒错误。 yarn test 在交互式监视模式下启动测试运行程序。 有关更多信息，请参见关于的部分。 yarn build 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 最小化构建，文件名包含哈希。 您的应用已准备好进行部署！ 有关更多信息，请参见有关的部分。 yarn eject 注意：这是单向操作。 eject ，您将无法返回！ 如果您对构建工具和配置选择不满意，则可以随时eject 。 此命令将从项目中删除单个构建依赖项。 而是将所有配置文件和传递依赖项（webpack，Babel，ESLi
react api练习
05-16
关于reactjs的api文档练习，里面涉及多个实例，对初学者来说简单易读
React练习小dome
03-20
由于 React的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。 这个项目本身也越滚越大，从最早的UI引擎变成了一整套前后端通吃的 Web App 解决方案。衍生的 React Native 项目，目标更是宏伟，希望用写 Web App 的方式去写 Native App。如果能够实现，整个互联网行业都会被颠覆，因为同一组人只需要写一次 UI ，就能同时运行在服务器、浏览器和手机。 React主要用于构建UI。你可以在React里传递多种类型的参数，如声明代码，帮助你渲染出UI、也可以是静态的HTML DOM元素、也可以传递动态变量、甚至是可交互的应用组件。
React-平衡-练习：练习项目
02-12
React均衡练习 React-序列化-护照-SSR
（十三）react hooks
lj1530562965的博客
09-08 598
react hooks
React入门六： 组件基础练习
qq_39008205的博客
07-16 264
这里写目录标题1.渲染评论列表2. 渲染暂无评论3. 获取评论信息4. 发表评论5. 完善5.1 清空文本框内容5.2 发布为空时提示6. 完整代码 1.渲染评论列表 在state中初始化评论列表数据 使用数组的map方法 遍历state中的列表数据 给每个被遍历的li元素添加key属性 数据如下 state = { comments: [ { id: 1, name: 'jack', content: '沙发！！' }, { id: 2, name: 'rose',
React基础操作
梧桐凰的博客
02-15 337
什么是前端开发? 将页面显示和业务逻辑独立，使用组件开发,解决传统页面代码混合html显示及js业务代码的弊端 常见的框架: react(facebook,react-native) vue AngularJS nodejs的出现使JS代码的开发脱离了浏览器并且提供了统一的构建环境及包管理工具 实验流程 基本项目结构 使用vscode打开相应文件夹(file-&gt;open) ...
每天两道React习题
qq_39279859的博客
03-29 1168
一.什么是受控组件? 1.由React控制state控制值的显示,例如From通过onchange进行监听表单的输出,将输入的结果赋值给state
JavaScript和React学习建议
06-10
对于JavaScript和React的学习，我有以下建议： 1. 学习JavaScript的基础语法和核心概念，包括变量、数据类型、运算符、流程控制语句、函数、对象等。可以通过阅读相关书籍、视频教程等方式来学习。 2. 掌握...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值