React——react 的基本使用

已于 2024-03-14 16:18:00 修改
阅读量463 收藏
点赞数 5
分类专栏： React 文章标签： react.js 前端 前端框架
于 2024-03-14 16:14:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_54262445/article/details/136714116
版权

前提：安装全局的脚手架，通过create-creat-app 项目名，我们创建好一个新项目，cd进去，通过npm start去运行该项目
在这里插入图片描述
在这里插入图片描述

注意：简单看下demo的配置，在根目录我们可以看到，没有任何webpack的配置文件，我们可以通过eject命令去自动生成相关的配置（react基于webpack搭建），但是不推荐使用，eject是不可逆的，生成的文件不是全部都需要，会导致项目很混乱。

index.js文件内容，web页面开发

  1. 导入react和react-dom （脚手架已配置好）
  2. react创建react元素(虚拟DOM)，reactDom渲染react元素到页面
    在这里插入图片描述
    在这里插入图片描述

在这里插入图片描述

index.js文件内容，APP页面开发

  1. 导入react和react-native（react-native需要自己再下载依赖）

  2. react创建react元素(虚拟DOM)，reactDom渲染react元素到APP

水煮庄周鱼鱼
关注
  • 5
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React入门小项目——美食清单
07-18
用React实现美食清单小demo，包含动态添加DOM、使用filter函数过滤数据、标签切换等等小技术
30分钟精通React今年最劲爆的新特性——React Hooks
10-17
主要介绍了30分钟精通React今年最劲爆的新特性——React Hooks，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
React入门——项目搭建
01-08
React介绍 一款javascript前端框架，把用户界面抽象成一个个的组件，按需组合成页面，官网，与其他框架的共同点是，都采用虚拟dom，和数据驱动。 环境搭建 首先，我们需要安装node.js，直接搜索并在官网下载安装包。 node.js官网 选择适合的版本后下载下来，并打开安装程序，如下图所示： 然后，根据安装提示安装node.js，npm包管理工具也会一同安装。也可以通过yarn来安装，官网安装yarn 安装完成后，打开cmd命令行,输入 node -v 和 npm -v和yarn -v 来查看版本号，如果显示则安装完成。 官方脚手架 安装 create-react-app ya
React Hooks的深入理解与使用
12-12
你还在为该使用无状态组件（Function）还是有状态组件（Class）而烦恼吗？ ——拥有了hooks，你再也不需要写Class了，你的所有组件都将是Function。 你还在为搞不清使用哪个生命周期钩子函数而日夜难眠吗？ ——拥有了Hooks，生命周期钩子函数可以先丢一边了。 你在还在为组件中的this指向而晕头转向吗？ ——既然Class都丢掉了，哪里还有this？你的人生第一次不再需要面对this。 这样看来，说React Hooks是今年最劲爆的新特性真的毫不夸张。如果你也对react感兴趣，或者正在使用react进行项目开发，答应我，请一定抽出至少30分钟的时间来阅读本文好吗
react——使用mobx
HarryHY的博客
05-04 620
unread.ts import {makeObservable,observable,action} from "mobx" class unread{ @observable unreadNum:number = 0 constructor(){ makeObservable(this) } @action setUnreadNum(param:number){ this.unreadNum=param } } export
react pro——————————
04-14
react pro——————————
【React】React——redux
m0_63300737的博客
03-04 3412
Redux的工作流 View在redux中会派发action方法action通过store的dispatch方法会派发给store store接收action，连同之前的state，一起传递给reducer reducer返回新的数据给store store去改变自己的state
React—— immutable 基本用法
qq812457115的博客
03-31 146
【代码】React—— immutable 基本用法。
(转)React——useContext使用
热门推荐
CaseyWei
03-25 1万+
一、什么是useContext 在Hooks出来之前，开发者都是使用的class组件，通过props传值。现在使用方法组件（Function）开发了，没有constructor构造函数也就没有了props的接收，所以父子组件的传值就成了一个问题。React Hooks就为我们准备了useContext来解决这个问题。 二、useContext的作用 1.useContext可以帮助我们跨越组件层级直接传递变量，实现数据共享。 这里要注意的是，很多同学觉得可以使用useContext结合useR
React组件之间通信：探索前端交互的新境界
qq_43580271的博客
05-15 411
在现代的Web开发中，React已经成为了一个非常流行的前端框架，它以其简洁的语法和高效的性能赢得了众多开发者的青睐。而在React应用中，组件之间的通信是一个至关重要的话题，它关乎着应用的结构设计和数据流管理。本篇博客将探讨React组件之间通信的各种方式，让我们一起探索前端交互的新境界吧！
react组件传参 父传子可以传字符串，布尔值，数组，对象，jsx，
最新发布
qq_65537235的博客
05-21 32
在react中，父传子组件 props的灵活性是很强大的，可以传字符串，布尔值，数组，对象，jsx，
react 保持组件纯粹
阿乐的博客
05-21 203
部分 JavaScript 函数是的，这类函数通常被称为纯函数。纯函数仅执行计算操作，不做其他操作。你可以通过将组件按纯函数严格编写，以避免一些随着代码库的增长而出现的、令人困扰的 bug 以及不可预测的行为。但为了获得这些好处，你需要遵循一些规则。
「React」useEffect 与 useLayoutEffect 使用与区别
Constantiny的博客
05-17 625
useEffect 与 useLayoutEffect 是两个 Hooks，前者比较常用，后者在一些场景下也会用到，下面说明两者区别和应用场景。
React类组件生命周期详解
weixin_47342624的博客
05-21 560
它使你的组件能够在 DOM 发生更改之前捕获一些信息（例如滚动的位置）。方法，那么 React 会在你的组件更新了 props 或 state 重新渲染后立即调用它。方法，会造成触发一次发生在浏览器更新屏幕内容之前的额外渲染，在这种情况下，即使。返回值：返回你想要的任何类型的快照值，或者是。方法，React 会在你的组件被移除屏幕（进行比较来确定发生了什么改变。进行比较来确定发生了什么改变。：更新之前的 props。：更新之前的 state。：更新之前的 Props。：更新之前的 State。
React 中的组件提升和 Context 的使用方式
hawk2014bj的博客
05-18 251
在项目的开发中，何时使用状态提升，何时使用上下文，我们需要根据具体需求，以及组件的复杂性。当只有少数几个组件需要访问状态，并且这些组件关系密切（如父子或兄弟组件）时使用。保持数据流简单和明确，使得追踪和调试数据流通过组件的方式更加容易。状态提升的好处是简单、方便，但是需要层层传递，如果结构复杂就显得比较混乱。对应使用上下文，可以应用在以下几种场景当状态需要被应用内不同层级的许多组件访问时。用于可以被视为“全局”的数据，如主题、用户设置、身份验证数据等。
react18【系列实用教程】memo —— 缓存组件 （2024最新版）
朝阳39的博客
05-15 333
将需要缓存的组件作为 memo 函数的参数传入，并将 memo 函数的返回值对外导出即可。
【React】如何让函数式组件也能使用state——useState（Hooks）
fangyuan__的博客
05-15 232
但是React官方提供了一个Hooks叫useState，它解决了函数式组件和类式组件的差异，让函数式组件拥有了类式组件所拥有的 state ，同时新增了一些 API ，让函数式组件，变得更加的灵活。count 是初始化的值，而 setCount 就像是一个 action 对象驱动状态更新，我们可以通过 setCount 来更新 count 的值。这里利用了useState，让函数式组件能够维护自己的 state ，它接收一个参数，作为初始化 state 的值，赋值给 count。
React: memo
卡卡西：一个擅长拷贝的前端程序员
05-14 527
React.memo 允许组件在 props 没有改变的情况下跳过重新渲染。
react基础
kuangjianming的博客
05-21 256
【代码】react基础。
前端分页插件_免费开源的React前端框架——ReactAdmin
05-26
ReactAdmin 是一个免费开源的 React 前端框架，用于...总之，ReactAdmin 是一个功能强大且易于使用的前端框架，适用于构建管理后台应用程序。如果您需要在您的项目中使用前端分页插件，ReactAdmin 是一个不错的选择。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值