2024 年的 React 生态(1)

于 2024-05-10 03:26:09 发布
阅读量576 收藏 22
点赞数 18
分类专栏： 程序员 文章标签： react.js 前端 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84152719/article/details/138641096
版权

今天我们来聊 React，React 已经风靡前端届很长一段时间了，在这段时间里它发展了一个非常全面而强大的生态系统。大厂喜欢在大型的前端项目中选择 React，它的生态功不可没。

今天的文章，我们我们将从状态管理、样式和动画、路由、代码风格等多个方面来看看 React 最新的生态，希望你以后在做技术选型的时候能够有所帮助。

创建 React 项目

f2ca824eb4b0e07053ab716157540fad.png

对于大多数 React 初学者来说，在刚刚开始学习 React 时如何配置一个 React 项目往往都会感到迷惑，可以选择的框架有很多。React 社区中大多数会给推荐 Facebook 的 create-react-app (CRA)。它基本上零配置，为你提供开箱即用的简约启动和运行 React 应用程序。

d32856fd9ff4dc9a81d5a66885974e55.png

但现在来看，CRA 使用的工具过时了 — 从而导致我们的开发体验变慢。Vite 是近期最受欢迎的打包库之一，它具有令人难以置信的开发和生产速度，而且也提供了一些模板（例如 React、React + TypeScript）可以选择。

b3bf1f5185f8b5e81b58a525d937938a.png

如果你已很经熟悉 React 了，你可以选择它最流行的框架之一作为替代：Next.js 和 Gatsby.js。这两个框架都基于 React 建立，因此你应该至少熟悉了 React 的基础知识再去使用。这个领域另一个流行的新兴框架是 Remix，它在 2022 年绝对值得一试。

d4de2061f0bd308ee61c59bc6791e52f.png

虽然 Next.js 最初是用来做服务端渲染的，而 Gatsby.js 主要用来做静态站点生成（例如博客和登录页面等静态网站）。然而，在过去几年里，这两个框架之间一直在互相卷…

Next.js 可以支持你生成静态站点，而 Gatsby.js 也支持了服务端渲染。不过就我个人的使用体验而言，我会觉得 Next.js 更好用一点。

如果你只想了解一下 create-react-app 这些工具在后台的工作原理，建议尝试一下自己从头开始配置一个 React 项目。从一个简单的 HTML JavaScript 项目开始，并自己添加 React 及其支持工具（例如 Webpack、Babel）。这并不是你在日常工作中必须要做的事情，但这是了解底层工具实现原理的一个很好的方式。

建议：

  • 优先使用 Vite 创建 React 客户端应用

  • CRA 备选

  • 优先使用 Next.js 创建 React 服务端渲染应用

  • 最新技术：Remix

  • 仅创建静态站点备选 Gatsby.js

  • 可选的学习经验：从0自己搭建一个 React 应用。

链接：

  • create-react-app：https://github.com/facebook/create-react-app

  • Vite：https://github.com/vitejs/vite

  • Next.js：https://github.com/vercel/next.js

  • Gatsby.js：https://github.com/gatsbyjs/gatsby

  • Remix：https://github.com/remix-run/remix

阅读：

  • 《React 基础》：https://beta.reactjs.org/learn

  • 《了解为什么像 React 这样的框架很重要》：https://www.robinwieruch.de/why-frameworks-matter/

  • 《如何创建现代 JavaScript 项目》：https://www.robinwieruch.de/javascript-project-setup-tutorial/

  • 《Gatsby vs. Next.js vs. Remix》：https://satellytes.com/blog/getting-started-gatsby-next-remix/

  • 《React 框架运行时优化方案的演进》：https://mp.weixin.qq.com/s/4qzm5pFmvdDUncN4txiBPA

状态管理

ad0a2a268b734f083f6739c868dfd2c8.png

React 带有两个内置的 Hooks 来管理本地状态：useState 和 useReducer。如果需要全局状态管理，可以选择加入 React 内置的 useContext Hook 来将 props 从顶层组件传递到底层组件，从而避免 props 多层透传的问题。这三个 Hooks 足以让你实现一个强大的状态管理系统了。

如果你发现自己过于频繁地使用 React 的 Context 来处理共享/全局状态，你一定要看看 Redux，它是现在最流行的状态管理库。它允许你管理应用程序的全局状态，任何连接到其全局存储的 React 组件都可以读取和修改这些状态。

ab2770f1e026bbb106ea40b1159cc1dc.png

如果你碰巧在用 Redux，你一定也应该查看 Redux Toolkit。它是基于 Redux 的一个很棒的 API，极大地改善了开发者使用 Redux 的体验。

作为替代方案，如果你喜欢用全局存储的思想管理状态，但不喜欢 Redux 的处理方式，可以看看其他流行的本地状态管理解决方案，例如 Zusand、Jotai、XState 或 Recoil 。

另外，如果你想拥有和 Vue.js 一样的开发体验，建议看看 Mobx 。

建议：

  • 用 useState/useReducer 处理共享状态

  • 选择性使用 useContext 管理某些全局状态

  • 用 Redux(或另一种选择) 管理全局状态

链接：

  • Redux：https://redux.js.org/

  • Mobx：https://github.com/mobxjs/mobx

  • Zusand：https://github.com/pmndrs/zustand

  • Jotai：https://github.com/pmndrs/jotai

  • XState：https://github.com/statelyai/xstate

  • Recoil：https://github.com/facebookexperimental/Recoil

阅读：

  • 《useReducer、useState、useContext 使用指南》：https://www.robinwieruch.de/react-state-usereducer-usestate-usecontext/

  • 《React 体系下关于 Mobx 与 Redux 的一些思考》：https://zhuanlan.zhihu.com/p/461844358

  • 《Facebook 新一代 React 状态管理库 Recoil》：https://juejin.cn/post/6881493149261250568

  • 《使用 React&Mobx 的几个最佳实践》

远程数据请求

32169bb372116ac40258e9391f071ab3.png

React 的内置 Hooks 非常适合 UI 状态管理，但当涉及到远程数据的状态管理（也包括数据获取）时，我建议使用一个专门的数据获取库，例如 React Query，它自带内置的状态管理功能。虽然 React Query 本身的定位并不是一个状态管理库，它主要用于从 API 获取远程数据，但它会为你处理这些远程数据的所有状态管理(例如缓存，批量更新)。

d82bc32a6ba519322694eee3dcd33787.png

React Query 最初是为使用 REST API 而设计的，但是现在它也支持了 GraphQL。然而如果你正在为你的 React 项目寻找专门的 GraphQL 库，我还是推荐你去看看 Apollo Client（当前最流行的）、urql（轻量级）或 Relay（Facebook 维护）。

如果你已经在使用 Redux，并且想要在 Redux 中添加集成状态管理的数据请求功能，建议你看看 RTK Query，它将数据请求的功能更巧妙的集成到 Redux 中。

建议：

  • React Query（REST API、GraphQL API 都有）

  • Apollo Client（只有 GraphQL API）

  • 可选的学习经验：了解 React Query 的工作原理

链接：

  • React Query：https://react-query.tanstack.com/

  • Apollo Client：https://www.apollographql.com/docs/react/

  • urql：https://formidable.com/open-source/urql/

  • Relay：https://github.com/facebook/relay

  • RTK Query：https://redux-toolkit.js.org/rtk-query/overview

阅读：

  • 《React Query 的工作原理》：https://www.robinwieruch.de/react-hooks-fetch-data/

  • 《本地和远程数据的 React 状态的一切》：https://www.robinwieruch.de/react-state/

路由

–

64a1e064e941016c3ac6a6bb62bbbbc8.png

如果你使用的是像 Next.js 或 Gatsby.js 这样的 React 框架，那么路由已经为你处理好了。但是，如果你在没有框架的情况下使用 React 并且仅用于客户端渲染（例如 CRA），那么现在最强大和流行的路由库是 React Router。

链接：

  • React Router：https://reactrouter.com/

阅读：

  • 《深入 React-Router 实现原理》：https://segmentfault.com/a/1190000023560665

样式/CSS

在 React 中有很多关于 样式/CSS 的选项和意见，作为一个 React 初学者，可以使用一个带有所有 CSS 属性的样式对象作为 HTML 样式属性的键/值对，从内联样式和基本的 CSS 开始就可以。

const ConardLi = ({ title }) =>

{title}

内联样式可以在 React 中通过 JavaScript 动态添加样式，而外部 CSS 文件可以包含 React 应用的所有剩余样式：

import ‘./Headline.css’;

const ConardLi = ({ title }) =>

{title}

如果你的应用越来越大了，建议再看看其他选项。首先，我建议你将 CSS Module 作为众多 CSS-in-CSS 解决方案的首选。CRA 支持  CSS Module ，并为提供了一种将 CSS 封装到组件范围内的模块的方法。这样，它就不会意外泄露到其他 React 组件的样式中。你的应用的某些部分仍然可以共享样式，但其他部分不必访问它。在 React 中， CSS Module 通常是将 CSS 文件放在 React 组件文件中：

import styles from ‘./style.module.css’;

const ConardLi = ({ title }) =>

{title}

6a6d809edd9ec95b5cd356bdfa2c5453.png

其次，我想向你推荐所谓的 styled components ，作为 React 的众多 CSS-in-JS 解决方案之一。它通过一个名为 styles-components(或者其他例如 emotion 、stitches)的库来实现的，它一般将样式放在 React 组件的旁边：

import styled from ‘styled-components’;

const BlueHeadline = styled.h1`

color: blue;

`;

const ConardLi = ({ title }) =>

{title}

7f91184927455ff7322fc94a17ef72e4.png

第三，我想推荐 Tailwind CSS 作为最流行的 Utility-First-CSS 解决方案。它提供了预定义的 CSS 类，你可以在 React 组件中使用它们，而不用自己定义。这可以提升一些效率，并与你的 React 程序的设计系统保持一致，但同时也需要了解所有的类：

const ConardLi = ({ title }) =>

{title}

使用 CSS-in-CSS、CSS-in-js 还是函数式 CSS 由你自己决定。所有的方案在大型 React 应用中都适用。最后一点提示：如果你想在 React 中有条件地应用一个 className，可以使用像 clsx 这样的工具。

建议：

  • CSS-in-CSS 方案：CSS Modules

  • CSS-in-JS 方案：Styled Components （目前最受欢迎）

  • 备选：Emotion 或 Stitches

  • 函数式 CSS：Tailwind CSS

  • 备选：CSS 类的条件渲染：clsx

链接：

  • styled-components：https://www.robinwieruch.de/react-styled-components/

  • Tailwind CSS：https://tailwindcss.com/

  • clsx：https://github.com/lukeed/clsx

阅读：

  • 《React中CSS-in-JS的最佳实践》：https://juejin.cn/post/6935245880568053791

  • 《React中的CSS样式》：https://www.robinwieruch.de/react-css-styling/

  • 《10种现在流行的CSS解决方案》：https://juejin.cn/post/6844903633109139464

  • 《CSS-in-JS vs CSS》：https://bejamas.io/blog/css-performance/

  • 《看完了 2021 CSS 年度报告，我学到了啥？》：https://juejin.cn/post/7043577751344775176

组件库

对于初学者来说，从零开始构建可复用的组件是一个很好的学习经验，值得推荐。无论它是 dropdown、radio button 还是 checkbox ，你最终都应该知道如何创建这些UI组件组件。

9cfee04ec2b5bc4e265003501b6dff2c.png

然而，在某些时候，你想要使用一个UI组件库，它可以让你访问许多共享一套设计系统的预构建组件。以下所有的UI组件库都带有基本组件，如 Buttons、Dropdowns、Dialogs 和 Lists：

  • Material UI (MUI) (最流行)：https://material-ui.com/

  • Mantine (最推荐)：https://mantine.dev/

  • Chakra UI (最推荐)：https://chakra-ui.com/

  • Ant Design（国内最流行）：https://ant.design/

  • Radix：https://www.radix-ui.com/

  • Primer：https://primer.style/react/

  • NextUI：https://nextui.org/

  • Tailwind UI (收费的)：https://www.tailwindui.com/

  • Semantic UI：https://www.robinwieruch.de/react-semantic-ui-tutorial

  • React Bootstrap：https://react-bootstrap.github.io/

尽管所有这些UI组件库都带有许多内部组件，但它们不能让每个组件都像只专注于一个UI组件的库那样强大。例如 react-table-library 提供了非常强大的表格组件，同时提供了主题（例如 Material UI），可以很好的和流行的UI组件库兼容。

阅读：

  • 《从零到一搭建React组件库》：https://segmentfault.com/a/1190000039852833

动画库

3a6aa5b09b4c2f3db11bc94b6c7d8e81.png

Web 应用中的大多数动画都是从 CSS 开始的。最终你会发现 CSS 动画不能满足你所有的需求。通常开发者会选择 React Transition Group，这样他们就可以使用 React组件来执行动画了，React 的其他知名动画库有：

  • Framer Motion (最推荐)：https://www.framer.com/motion/

  • react-spring (也推荐一下)：https://github.com/react-spring/react-spring

  • react-motion：https://github.com/chenglou/react-motion

  • react-move：https://github.com/sghall/react-move

  • Animated (React Native)：https://facebook.github.io/react-native/docs/animated

可视化图表

a5d287ea385bf96d2478cadf01122bb3.png

如果你真的想要自己从头开始开发一些图表，那么就没有办法绕过 D3 。这是一个很底层的可视化库，可以为你提供开发一些炫酷的图表所需的一切。然而，学习 D3 是很有难度的，因此许多开发者只是选择一个 React 图表库，这些库默认封装了很多能力，但是缺失了一些灵活性。以下是一些流行的解决方案:

  • Recharts：http://recharts.org/

  • react-chartjs：https://github.com/reactchartjs/react-chartjs-2

  • nivo：https://nivo.rocks/

  • visx：https://github.com/airbnb/visx

  • Victory：https://formidable.com/open-source/victory/

表单

–

9946894ff6c09f5bd2c909b8f17b9501.png

React 现在最受欢迎的表单库是 React Hook Form 。它提供了从验证（一般会集成 yup 和 zod）到提交到表单状态管理所需的一切。之前流行的另一种方式是 Formik。两者都是不错的解决方案。这个领域的另一个选择是 React Final Form 。毕竟，如果你已经在使用 React UI组件库了，你还可以查看他们的内置表单解决方案。

建议：

  • React Hook Form

  • 集成 yup 或 zod 进行表单验证

  • 如果已经在使用组件库了，看看内置的表单能不能满足需求

链接：

  • React Hook Form：https://react-hook-form.com/

  • Formik：https://github.com/jaredpalmer/

  • React Final Form：https://final-form.org/react

阅读：

  • 《React 开源表单组件最佳实践，原理解析，设计分析》：https://toutiao.io/posts/0nh4r9w/preview

类型检查

React 带有一个名为 PropTypes 的内部类型检查。通过使用 PropTypes，你可以为你的 React 组件定义 props。每当将类型错误的 prop 传递给组件时，你可以在运行时收到错误消息：

import PropTypes from ‘prop-types’;

const List = ({ list }) =>

{list.map(item => 

{item.title}
)}

List.propTypes = {

list: PropTypes.array.isRequired,

};

403e54b0924e0cf2b44c56b1f7895e2d.png

在过去的几年里，PropTypes 已经不那么流行了，PropTypes 也已经不再包含在 React 核心库中了，现在 TypeScript 才是最佳的选择：

type Item = {

id: string;

title: string;

};

type ListProps = {

list: Item[];

};

const List: React.FC = ({ list }) =>

{list.map(item => 

{item.title}
)}

阅读：

  • 《TypeScript 终极初学者指南》：https://mp.weixin.qq.com/s/6DAyXFHIMW95FS0f3GyHpA

  • 《如何优雅地在 React 中使用TypeScript》：https://juejin.cn/post/7021674818621669389

代码风格

dce14e34d1caba64f9a9ae06db3d7aa9.png

对于代码风格，基本上有两种方案可以选择：

如果你想要一种统一的、通用的代码风格，在你的 React 项目中使用 ESLint 。像 ESLint 这样的 linter 会在你的 React 项目中强制执行特定的代码风格。例如，你可以在 ESLint 中要求遵循一个流行的风格指南(如 Airbnb 风格指南)。之后，将 ESLint 与你的IDE/编辑器集成，它会指出你的每一个错误。

如果你想采用统一的代码格式，可以在 React 项目中使用 Prettier。它是一个比较固执的代码格式化器，可选择的配置很少。你也可以将它集成到编辑器或IDE中，以便在每次保存文件的时候自动对代码进行格式化。虽然 Prettier 不能取代 ESLint，但它可以很好地与 ESLint 集成。

建议：

  • ESLint：https://eslint.org/

  • Prettier：https://github.com/prettier/prettier

阅读：

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

img

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
辑器集成，它会指出你的每一个错误。

如果你想采用统一的代码格式，可以在 React 项目中使用 Prettier。它是一个比较固执的代码格式化器，可选择的配置很少。你也可以将它集成到编辑器或IDE中，以便在每次保存文件的时候自动对代码进行格式化。虽然 Prettier 不能取代 ESLint，但它可以很好地与 ESLint 集成。

建议：

  • ESLint：https://eslint.org/

  • Prettier：https://github.com/prettier/prettier

阅读：

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

[外链图片转存中…(img-SYYlJrhT-1715282758208)]

[外链图片转存中…(img-9dKSrf7R-1715282758209)]

[外链图片转存中…(img-RIRZWVze-1715282758209)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

2401_84152719
关注
  • 18
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
探索React生态圈
02-20
2004年，对于前端社区来说，是里程碑式的一年。Gmail横空出世，它带来基于前端渲染的原生应用级别的体验，相对于之前的...2014年，React进入我们的视线。让人耳目一新的是，对于其他开源框架遇到的种种问题，React都
带你深入理解 react 生态（全家桶）
Charles_Tian的博客
12-30 3349
序言 市场上开发项目的前端主流技术框架是react ，但说实在的，有很多的前端开发者对 react 的整个生态并不熟悉，停留在能用，能开发，能上线的水平。但这些只是开发者的业务水平，并不代表个人技术水平，而个人水平的高低大致取决于对 react 的整个生态有一个全面的了解（此处所谓的了解并不是知道有这些东西，而是理解了这些东西在整个项目中发挥的作用，甚至在项目中的可拓展性，一旦发现问题，能迅速...
2022 年的 React 生态
热门推荐
前端开发博客
04-16 1万+
关注公众号前端开发博客，领27本电子书回复加群，自助秒进前端群转载公众号：code秘密花园作者：ConardLi今天我们来聊React，React已经风靡前端届很长一段时间了，在这段时间里它发展了一个非常全面而强大的生态系统。大厂喜欢在大型的前端项目中选择React，它的生态功不可没。今天的文章，我们我们将从状态管理、样式和动画、路由、代码风格等多个方面来看看...
2023 年的 React 生态系统
性感的小君君
06-24 361
它提供了一个轻量级、零运行时的解决方案，用于设置 React 组件的样式，并具有完整的 TypeScript 支持。，它是一个构建在 React 之上的框架。在本文中，我们将探索开发人员广泛使用和信任的最基本的库，并帮助您就用于下一个 React 项目的正确工具做出明智的决定。在测试 React 应用程序的上下文中，它是一个测试运行程序，用于查找测试、运行测试、确定测试是否通过或失败，并以人类可读的方式报告。是 React 的另一个状态管理库，它为管理应用程序中的状态提供了清晰且轻量级的解决方案。
揭秘react生态体系
hsany330的专栏
08-29 1689
前言 react 的生态体系比较庞大，它在web端，移动端，服务器端，VR领域都有涉及。 react可以说是目前为止最热门，生态最完善，应用范围最广的前端框架。react结合它的整个生态，它可以横跨web端，移动端，服务器端，乃至VR领域。 可以毫不夸张地说，react已不单纯是一个框架，而是一个行业解决方案。 下面就来说说 react庞大生态体系的构成。 一，rea
2024 年的 React 生态，如何学习web开发
最新发布
rdytfuygiohi的博客
03-29 567
{title}第三，我想推荐作为最流行的解决方案。它提供了预定义的CSS类，你可以在React组件中使用它们，而不用自己定义。这可以提升一些效率，并与你的React程序的设计系统保持一致，但同时也需要了解所有的类：{title}使用还是函数式CSS由你自己决定。所有的方案在大型React应用中都适用。最后一点提示：如果你想在React中有条件地应用一个className，可以使用像clsx这样的工具。
Nextui使用
Bu2n的博客
12-11 1253
https://nextui.org/docs/frameworks/nextjshttps://nextui.org/docs/customization/customize-theme 调色板 For an effective palette, we recommend using color ranges from to . You can use tools like Eva Design System, Smart Watch, Palette or Color Box to generate
react及react生态知识总结
10-18
对react，react全家桶，react native等的知识点进行汇总
React SVG绘制生态自然景观特效
07-24
在本项目“React SVG绘制生态自然景观特效”中，开发者利用SVG的优势，为用户提供了一种独特的体验——点击按钮即可生成逼真的自然场景特效。这种功能在网页背景切换、增强用户体验和营造沉浸式环境方面具有显著价值...
react-react生态体系架构winterfall的简化版
08-14
接下来是React-Router，它是React生态中的路由解决方案。React-Router允许我们在单页面应用（SPA）中实现URL与组件之间的映射，使得页面跳转时无需刷新整个页面，提高了用户体验。在"react-winterfall"简化版中，它...
react 最佳入门_推荐18个最佳React.js项目示例「值得收藏」
weixin_39982236的博客
12-19 7947
前言无论您是编程的新手还是经验丰富的开发人员，您都可能在寻找资源来帮助您构建自己的应用程序。React.js是一个非常流行的前端框架，具有强大的社区，这意味着您可以找到很多项目作为示例。我们希望简化您的研究工作，因此在本文中，我们将介绍18个React.js项目，它们的复杂程度各不相同，并且可以用作新项目的灵感来源。检查它们还可以帮助您了解更多关于React.js的信息。该列表正在收集新鲜的示例，...
react.JS并非完全开源，百度、Wordpress等带头弃之
wubaohu1314的博客
12-18 705
　　屋漏偏逢连夜雨，来形容此时的facebook太恰当不过了，虽然facebook在国内被墙，但是作为一个web前端，其实我们还是在用着facebook的产品 —— react.JS ，也是目前很热门的一个JS框架 　　BAT纷纷放弃，百度为首 　　就在近日，百度要求外部产品线停止使用React/React Native，给出半年时间转型，新产品则禁止使用React。 　　在反观国外Wordpress官方也已经声明，将寻找react的替代方案，而放弃react，wordpress官方表示：虽然对于..
每个开发者都必须创建的 6 个 React 项目
我的博客，不一样的自我表达
06-23 71
通过这些项目，您将增强您的 React 技能，并获得构建复杂应用程序和探索新功能和策略的信心。总的来说，这个使用 React 构建的任务管理应用程序提供了优雅的用户界面、高效的状态管理以及任务过滤、排序和优先级设置的基本功能。由于其基于组件的架构、高效的虚拟 DOM 渲染以及庞大的模块和工具生态系统，React 已成为 Web 开发人员的首选。在深入项目之前，必须掌握 React 的基本概念。请记住设置您的开发环境，学习 React 的基础知识，并从一个简单的 React 应用程序开始以获得实践经验。
react与vue分别适合什么样的开发需求呢？有哪些利弊？
2301_76418831的博客
06-06 377
需要注意的是，React和Vue都是优秀的前端框架，选择哪个框架主要取决于你的项目需求、团队经验和个人偏好。如果你需要更大的灵活性和庞大的生态系统支持，同时愿意面对较陡峭的学习曲线，那么React可能是一个不错的选择。生态系统不如React丰富：相比于React，Vue的生态系统相对较小，但也有大量的第三方插件和组件可用。学习曲线相对陡峭：React的学习曲线相对较陡峭，需要掌握JSX语法和一些React特定的概念。生态系统丰富：React拥有庞大的生态系统和强大的社区支持，提供了大量的开源组件和工具。
「首席架构师推荐」React生态系统大集合
全网:架构师研究会
09-18 986
关于React生态系统的一系列令人敬畏的事情。ReactReact一般资源React社区React在线游乐场React教程React通用教程React钩子React和TypeScriptReact性能React内部React面试问题React工具React开发工具React框架React造型React路由React组件库React真棒组件对命令行做出ReactReact测...
2023 年的 React 生态
郊眠寺
03-10 466
整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。
Vue与React对比(基础篇) ： 一、Hello World
郊眠寺
10-07 789
React 是一套用于构建用户界面的渐进式框架，由Facebook团队开发并维护。中文官网英文官网Vue 通过全局的vue实例来对容器内容进行操作；而React则是通过ReactDOM.render方法将我们的渲染内容挂载目标对象上从而来进行一些逻辑操作。Vue的双向数据绑定会自动监听data数据变化，并且会根据变化来进行相应视图层面的更新；而React中只有在props和state发生变化时，才会触发rerender，从而进行视图层的更新。Vue 中我们只需要引入vue 这一个依赖库即可；
【React】1929- 2024 年 React 生态系统一览
pingan8787
01-18 63
React 已经经历了相当长的发展历程。与此同时，一个功能全面且复杂的库生态系统在 React 的基础上逐渐形成。本文就来深入探讨一下 2024 年你可以 React 项目中使用的库！创建新项目对于初学 React 的开发者，首先要面临的问题就是如何搭建一个 React 项目。市面上的工具众多，目前最受 React 社区欢迎的是 Vite。Vite 不仅支持多种库（如 React）与TypeScr...
Fullstack React：精通ReactJS及其生态系统
4. **React Router**：React应用通常需要导航功能，本书可能会涵盖React Router的使用，它是React生态中常用的路由解决方案，帮助构建多页面应用。 5. **React Hooks**：自React 16.8版本引入的Hooks，如`useState`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值