精华内容
下载资源
问答
  • react开源项目
    2021-09-23 22:31:39

    2021SC@SDUSC

    React简介

    正如React项目官网所说,React是一个「用于构建用户界面的 JavaScript 库」。人们往往也会将React与Vue、Angular作为前端三大框架进行对比(但如今Angular的热度也越来越小了,而前两者的社区规模和热度仍在不断发展壮大)。React相对其他前端框架(说前端框架其实并不准确,因为React早已不再单纯地面向“前端”,本身也并不是所谓的“框架”)来说,不仅写法上更灵活,语法也更贴近ES标准,对Typescript也有着更好的支持。

    同时,React本身在整体架构设计上更有优势,React日益庞大而成熟的技术栈便是得益于此。在浏览器端有我们有 ReactDOM 把React应用渲染在WEB页面,React 还可以使用 Node 进行服务器渲染(SSR),在小程序端也有Taro直接将React代码编译成对应的小程序,在原生 IOS 和 Android 平台更有React Native来帮助我们使用 React 来创建 Android 和 iOS 的原生应用。可以说,React已经真正做到了「一次学习,随处编写」。在之后的分析中我们也可以深入体会到这一点。

    让我们先看一看React的代码,体会一下神奇的React是如何工作的:

    class HelloMessage extends React.Component {
      render() {
        return (
          <div>
            Hello World!
          </div>
        );
      }
    }
    
    ReactDOM.render(
      <HelloMessage />,
      document.getElementById('root')
    );
    

    这样的代码可以在html页面中id为root的节点上挂载我们的React应用,在其中显示 Hello World! 的文本。

    上面的 HelloMessage 被称为类组件,它通过继承 React.Component 类,使用render()方法返回需要渲染的内容。当然还有另外一种更简洁的写法,我们是用函数式组件:

    const App = ()=>{
      return(
        <div>
          Hello world!
        </div>
      )
    };
     
    ReactDOM.render(
        <App />,
        document.getElementById("root")
    );
    

    这两个组件是等价的。同时,组件之间还能构成嵌套关系,并且每个组件都拥有自己的生命周期,可以在自己生命周期的各个阶段执行不同的任务。并且,每个组件只会在自己本身的状态发生改变时进行部分更新,不会影响其他组件,性能非常高效。

    总之,声明式组件化一次学习,跨平台编写 是React的三大特性。

    主要架构

    React 是一个相当庞大的库,由于要同时考虑 ReactDom 和 ReactNative ,还有服务器渲染ReactDomServer等,其代码抽象化程度很高,嵌套层级非常深,理解起来是要费很大的力气的。今后的代码分析工作我们也会多多参考官方文档的源码概述以及其他大佬的分析文章,希望能站在巨人的肩膀上得到自己的一些粗浅的理解。

    根据官方的源码概述,React项目主要包含以下四个模块:

    1. React Core 核心API

    React Core 中定义了所有全局 React API,比如:

    • React.createElement()
    • React.Component
    • React.Children

    因此 React Core 只包含定义组件必要的 API。它不包含协调算法或者其他平台特定的代码。它同时适用于 React DOM 和 React Native 组件。

    React 核心代码对应源码的 packages/react 目录中。最终以react包发布在npm上,并被build为 react.js 运行在浏览器环境中,它会导出一个称为 React 的全局对象。

    2. Renderers 渲染器

    React 最初只是服务于 DOM,但是这之后被改造成能同时支持原生平台的 React Native。因此,在 React 内部机制中引入了“渲染器”这个概念。

    渲染器用于管理一棵 React 树,使其根据底层平台进行不同的调用。

    React DOM Renderer 将 React 组件渲染成 DOM。它实现了全局 ReactDOM API,这在npm上发布为 react-dom 包。这也最终被build为 react-dom.js 在浏览器环境中使用,导出一个 ReactDOM 的全局对象。它对应于源码的 packages/react-dom

    React Native Renderer 将 React 组件渲染为 Native 视图。此渲染器在 React Native 内部使用。它对应于源码的packages/react-native-renderer

    我们将主要分析 React DOM Renderer,对 React Native Renderer 可能只会略有涉及而不会深入分析。

    3. Reconcilers 协调器

    即便 React DOM 和 React Native 渲染器的区别很大,但也需要共享一些逻辑。特别是协调算法需要尽可能相似,这样可以让声明式渲染,自定义组件,state,生命周期方法和 refs 等特性,保持跨平台工作一致。

    为了解决这个问题,不同的渲染器彼此共享一些代码。我们称 React 的这一部分为 “reconciler”。当处理类似于 setState() 这样的更新时,reconciler 会调用树中组件上的 render(),然后决定是否进行挂载,更新或是卸载操作。

    在React 15 之前,主要使用的 Reconciler 是 Stack reconciler,目前官方已经停止了对其的使用。从 React 16 开始,React采用了 Fiber reconciler 作为默认的协调器,同时解决了 stack reconciler 中固有的问题。

    它的主要目标是:

    • 能够把可中断的任务切片处理。
    • 能够调整优先级,重置并复用任务。
    • 能够在父元素与子元素之间交错处理,以支持 React 中的布局。
    • 能够在 render() 中返回多个元素。
    • 更好地支持错误边界。

    Fiber reconciler 对应于源码的 packages/react-reconciler 目录。

    4. Event System 事件系统

    React对原生事件(onclick() addEventListener()之类)进行了封装以磨平不同平台、浏览器之间的差异。其源码在packages/react-dom/src/events目录下。

    小组分工安排

    我们小组共三人,基于React的主要架构,我们决定各自负责相应模块的分析工作:

    小组成员郭嘉伟(博客地址)负责React Core 核心API的相关代码分析。
    我本人作为小组队长,负责 Renderers 渲染器的相关代码分析。
    小组成员邢钟毓(博客地址)负责Reconcilers 协调器的相关代码分析。

    此外,如果有小组成员提前结束了自己负责的部分的代码分析工作的话,将转而继续分析 Event System 事件系统 的相关代码。

    源码拉取和概览

    在拉取源码之前,需要在系统中配置好Nodejs环境,并配置npm源、yarn源和electron源为国内镜像源以加快依赖安装速度。

    首先使用Git拉取react项目源码:
    git pull https://github.com/facebook/react.git

    我们可以看到拉取下来的源码是这样的:
    React项目源码

    随后,在项目目录使用yarn包管理工具安装源码依赖:
    yarn
    安装过程涉及到原生模块的编译和electron相关资源的下载,根据网速情况的不同,大概需要10-30分钟不等的时间。

    (如果出现autoreconf 命令不存在之类的报错问题,需要手动安装automakeautoconf工具)

    当项目依赖全部安装完毕后,就可以正式开始分析工作了。

    根据官方文档的源码概览介绍,寻找各个模块的对应源码位置,以React Core为例:

    React Core 核心API:
    React Core 核心API
    且每个模块目录下都有自己的README.md说明文件,还是以 React Core 为例:

    README.md说明文件
    可见这样组织良好、文档详细的源码对于 contributor 还是相当友好的。

    对于每个模块,其模块根目录下的index.js导出了主要的API,我们在分析过程中可以基于其导出的API进行分析,以 React Core 中的index.js为例:

    /**
     * Copyright (c) Facebook, Inc. and its affiliates.
     *
     * This source code is licensed under the MIT license found in the
     * LICENSE file in the root directory of this source tree.
     *
     * @flow
     */
    
    // Keep in sync with https://github.com/facebook/flow/blob/main/lib/react.js
    export type StatelessFunctionalComponent<
      P,
    > = React$StatelessFunctionalComponent<P>;
    export type ComponentType<-P> = React$ComponentType<P>;
    export type AbstractComponent<
      -Config,
      +Instance = mixed,
    > = React$AbstractComponent<Config, Instance>;
    export type ElementType = React$ElementType;
    export type Element<+C> = React$Element<C>;
    export type Key = React$Key;
    export type Ref<C> = React$Ref<C>;
    export type Node = React$Node;
    export type Context<T> = React$Context<T>;
    export type Portal = React$Portal;
    export type ElementProps<C> = React$ElementProps<C>;
    export type ElementConfig<C> = React$ElementConfig<C>;
    export type ElementRef<C> = React$ElementRef<C>;
    export type Config<Props, DefaultProps> = React$Config<Props, DefaultProps>;
    export type ChildrenArray<+T> = $ReadOnlyArray<ChildrenArray<T>> | T;
    
    // Export all exports so that they're available in tests.
    // We can't use export * from in Flow for some reason.
    export {
      __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
      act as unstable_act,
      Children,
      Component,
      Fragment,
      Profiler,
      PureComponent,
      StrictMode,
      Suspense,
      SuspenseList,
      cloneElement,
      createContext,
      createElement,
      createFactory,
      createMutableSource,
      createRef,
      forwardRef,
      isValidElement,
      lazy,
      memo,
      startTransition,
      unstable_Cache,
      unstable_DebugTracingMode,
      unstable_LegacyHidden,
      unstable_Offscreen,
      unstable_Scope,
      unstable_getCacheForType,
      unstable_useCacheRefresh,
      unstable_useOpaqueIdentifier,
      useCallback,
      useContext,
      useDebugValue,
      useDeferredValue,
      useEffect,
      useImperativeHandle,
      unstable_useInsertionEffect,
      useLayoutEffect,
      useMemo,
      useMutableSource,
      useSyncExternalStore,
      useSyncExternalStore as unstable_useSyncExternalStore,
      useReducer,
      useRef,
      useState,
      useTransition,
      version,
    } from './src/React';
    
    

    其中export {xxx}的部分就可以作为我们分析代码的索引进一步深究了。

    关于React……想法

    React实在是一个非常伟大的项目,作为我大一初刚步入大学校园时加入的第一个学生组织时所学习的第一个技术栈,我依稀记得自己写的第一个react app是一个类似于打地鼠的简单小网页:一个50x50大小的button在页面上随机游走,并根据点击次数不断加快变化速率。我从那个时刻就坚信React灵活的语法特性能够实现几乎任何页面需求。

    react在大学两年里给我带来了相当多的项目经验,我曾和学生组织里志同道合的朋友们一起开发上线过许多大大小小的项目,从中真的积累了好多好多的实践经验。我从当初连类组件都搞不懂是怎么回事的react小白,到现在不光是课设系统、接的外包小程序还是桌面electron应用,都是使用react前端+koa后端自己一个人做的前后端全栈,过程中还学习了许多大佬的最佳实践,也摸索总结出了自己的一套开发流。在这门课中,我也很幸运能够说服老师增加React项目的源码分析题目。我希望能借此机会深入了解React内部的工作流程和原理,也希望能为更多像这样的开源项目贡献出自己的力量!

    更多相关内容
  • 大家好,我是若川。持续组织了近一年的源码共读活动,感兴趣的可以加我微信ruochuan12参与,每周大家一起学习200行左右的源码,...之前有很多小伙伴问过我,通过文档或者视频学习 React 已经有一段时间了,想学习一...

    大家好,我是若川。持续组织了近一年的源码共读活动,感兴趣的可以 加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外:目前建有江西|湖南|湖北籍前端群,可加我微信进群。

    之前有很多小伙伴问过我,通过文档或者视频学习 React  已经有一段时间了,想学习一些好的开源项目来获得一些实战经验。我之前也没有很好的答案,确实很难找,因为一般企业级应用都是不开源的,Github 上大部分都是很简单的 DEMO 项目,很难挑选。

    今天就给大家梳理了几个我觉得还不错的 React 开源项目。

    Jira Clone

    4840d52d121a8b1088e9116d0dfe17c9.png
    • 仓库:https://github.com/oldboyxx/jira_clone

    • Github Star:8.6K

    这是一个基于 React 开发的模仿 Jira 的项目,前端全部使用 React Hooks 实现 。另外还有一些其他亮点:

    • 后端是基于 TypeScriptTypeORM,和 Postgres 进行通信

    • 在前端使用自定义 Webpack 配置

    • 基于 Cypress 进行端到端测试

    作者还使用 styled-components 和全局样式进行混合开发,使他看起来和 Jira 非常像。

    RealWorld aka Conduit

    73e85834f1cabe7a5069cb5e7a129c01.png
    • 仓库:https://github.com/gothinkster/react-redux-realworld-example-app

    • Github Star:5.3K

    • 预览:https://react-redux.realworld.io/

    ThinksterRealWorld 以超过 24 种不同的语言和框架重新实现了一个相同的应用程序(一个名为 Conduit 的仿 Medium.com 程序),这是它的 React/Redux 版本。

    它基于 create-react-app 创建,用 react-router 实现路由,用 Redux 实现状态管理,基于 classNames 编写样式,基于 superagent 请求远程数据。

    Real World App

    125086e441b1451195c1bc66ee83fef1.png
    • 仓库:https://github.com/cypress-io/cypress-realworld-app

    • Github Star:3.7K

    Real World App 是使用 Cypress 对程序进行端到端测试的一个很好的 DEMO 项目。在 repo 中包含了示例数据,自动化测试和应用程序都可以开箱即用地运行。

    它基于 create-react-app 构建,使用 TypeScript 编写,带有 Express 后端,使用 Material UI 作为 UI/组件库,使用 Formik 实现表单,使用 react-router 实现路由。

    HospitalRun

    53714c4e2f47909429629f69f193e649.png
    • 仓库:https://github.com/HospitalRun/hospitalrun-frontend

    • Github Star:6.5K

    HospitalRun 是一个成熟的电子健康记录系统 (EHR) 和医院信息系统 (HIS)  Web 应用。它是一个非常完整的 OSS 解决方案。使用 TypeScript + React 编写,并使用 SCSS 编写样式。大多数组件都存在于 components 包中。

    Simorgh

    aec21c0614fda36143f1f4c1e39e68d1.png
    • 仓库:https://github.com/bbc/simorgh

    • Github Star:751

    • 预览:https://astexplorer.net/

    SimorghBBC(没错,就是那个天天抹黑中国的新闻网站) 的 React SPA,目前为全球数百万生产用户提供服务。它正在逐步推广到每个 BBC World Service News 网站。

    它使用 PropTypes 进行类型检查,使用 JestEnzyme 进行单元测试(覆盖率已经达到 98% ),使用 Cypress 进行端到端测试,使用 styled-components 编写样式,使用 Express 处理服务端渲染。

    AST Explorer

    1aa4d61144a2740cfb8d788a2ea8ce2a.png
    • 仓库:https://github.com/fkling/astexplorer

    • Github Star:4.8K

    AST Explorer 是一个在线生成抽象语法树的工具。

    作为一个 React 项目很值得一试,因为它是持续开发很多年项目的一个很好的例子。使用 PropTypes 进行类型检查,使用 Redux 进行状态管理。

    虽然你不会在这里找到像 TypeScript/Flow 这样的花哨的东西,但它的代码注释很完善,也很清楚地指出了很多编码技巧。另外,它们也逐步在将类组件迁移到 Hooks 上。

    Excalidraw

    db6c233a48cbde01f8fb229b46a88a96.png
    • 仓库:https://github.com/excalidraw/excalidraw/

    • Github Star:31.2K

    Excalidraw 是一个在线图形绘制工具(手绘风格),我一直在用。

    它使用 TypeScript + React Hooks 编写,使用 SCSS 进行样式处理。

    Spectrum

    724371d14f209e985ddc3f7f246b8137.png
    • 仓库:https://github.com/withspectrum/spectrum

    • Github Star:10.6K

    Spectrum 是一个社区网站,它的目标是将实时聊天应用程序的功能和论坛的功能结合起来。它自从 2017 年初以来一直在积极开发中,并于 2018 年底被 GitHub 收购。

    Spectrum 在早期是非常有趣的,因为它使用 RethinkDB 实时更新查询、服务器渲染和 GraphQL(在当时看来都是非常先进的技术)。

    代码库使用 Flow 进行类型检查,使用 Apollo (GraphQL) 进行数据获取,使用 Redux 进行状态管理,使用 Express 服务器进行服务器渲染,并编写了大量的自定义 React Hooks

    Sentry

    fc255a1877e2bcf138b92f4131549c93.png
    • 仓库:https://github.com/getsentry/sentry

    • Github Star:31.5K

    Sentry 是一个开源的前端异常监控工具。后端基于 Django 实现,前端基于 TypeScript + React 实现,使用 Emotion 进行样式管理,基于 react-router 实现路由,使用 Redux 进行状态管理。

    Grafana

    63a2b93949bb17f9e0374f21ccae598a.png
    • 仓库:https://github.com/grafana/grafana

    • Github Star:50.2K

    它是一个正在从 AngularJS 迁移到 React 的项目,基于 TypeScript 编写,用 Redux 进行状态管理。

    GoAlert

    45a6346e1a697d83ac31637d308d631a.png
    • 仓库:https://github.com/target/goalert

    • Github Star:1.7K

    GoAlert 是一个开源的 oncall 调度程序和通知程序(类似于 PagerDutyOpsgenie)。

    他的后端是 Go 实现的,使用 Apollo (GraphQL) 进行数据获取,使用 react-router 实现路由,使用 Redux 进行状态管理,Cypress 进行端到端测试,使用 Material UI 用于样式组件,使用原生的 CSS 编写样式。

    最后

    参考链接:https://maxrozen.com/examples-of-large-production-grade-open-source-react-apps

    我在阿里招前端,我该怎么帮你?(现在还可以加模拟面试群)
    如何拿下阿里巴巴 P6 的前端 Offer
    如何准备阿里P6/P7前端面试--项目经历准备篇
    大厂面试官常问的亮点,该如何做出?
    如何从初级到专家(P4-P7)打破成长瓶颈和有效突破
    若川知乎问答:2年前端经验,做的项目没什么技术含量,怎么办?

    如何准备20K+的大厂前端面试

    62ee21b634e754015b135e45b0f3e3ab.gif

    ················· 若川简介 ·················

    你好,我是若川,毕业于江西高校。现在是一名前端开发“工程师”。写有《学习源码整体架构系列》20余篇,在知乎、掘金收获超百万阅读。
    从2014年起,每年都会写一篇年度总结,已经坚持写了8年,点击查看年度总结
    同时,最近组织了源码共读活动,帮助4000+前端人学会看源码。公众号愿景:帮助5年内前端人走向前列。

    b2e5bd0cd30bea38e639a4aa972dcb55.jpeg

    扫码加我微信 lxchuan12、拉你进源码共读

    今日话题

    目前建有江西|湖南|湖北 籍 前端群,想进群的可以加我微信 lxchuan12 进群。分享、收藏、点赞、在看我的文章就是对我最大的支持~

    展开全文
  • React项目 React项目
  • 为了保证开源项目的质量,所以我们通过AI来进行全方位的分析,22个项目GitHub的Star的平均数为1681。只为给予开发者灵感和高质量的开源项目。开源的项目可以帮助初学者更好的学习阅读代码,且方便高级程序员使用现有...

    React是由facebook的开源的一个JavaScript库,用于构建“可预期的”和“声明式的”Web用户界面。

    为了保证开源项目的质量,所以我们通过AI来进行全方位的分析,22个项目GitHub的Star的平均数为1681。只为给予开发者灵感和高质量的开源项目。

    开源的项目可以帮助初学者更好的学习阅读代码,且方便高级程序员使用现有代码来节省时间。我们整合这些开源项目的初衷就是帮助开发者节省时间,而不是花几个小时的时间来寻找。

    注意React UI组件,模板,工具和框架是分离开来的,这样使得React构建的应用更易于管理。

    Courtesy of Alex Kotlyarskiy[5780 Stars]

    Courtesy of Simar Singh [2004 Stars]

    Courtesy of Catalin MIRON [1073 Stars]

    注:Dribbble 是一个面向创作家、艺术工作者、设计师等创意类作品的人群,提供作品在线服务,供网友在线查看已经完成的作品或者正在创作的作品的交流网站。

    Courtesy of Farid from Safi [919 Stars]

    Courtesy of kf [609 Stars]

    Courtesy of Race604 [2624 Stars]

    Courtesy of @CharlieHawker [1140 Stars]

    Courtesy of David Tse [1106 Stars]

    Courtesy of WangZixiao[586 Stars]

    Courtesy of Andrei Hrabouski [220 Stars]

    Courtesy of Farid from Safi [111 Stars]

    Courtesy of Andrew Nguyen[1335 Stars]

    Courtesy of Benoit VALLON [2796 Stars]

    Courtesy of Case Sandberg [1966 Stars]

    Courtesy of kylemathews [2816 Stars]

    Courtesy of Armin Ronacher [9229 Stars]

    Courtesy of Arthur Stolyar [505 Stars]

    Courtesy of Mican [509 Stars]

    [591 Stars]

    Courtesy of Brandon Tilley[39 Stars]

    Courtesy of Ovidiu Cherecheș [71 Stars]

    Courtesy of Twitter Engineer Bonnie Eisenman

    等等:

    欢迎添加稀土区微信号【xituqu】 ,一起来水水撒。

    展开全文
  • Create React App入门 该项目是通过引导的。 可用脚本 在项目目录中,可以运行: npm start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑,则页面将重新加载。 您还将在控制台中看到任何...
  • 大家好,我是你们的 猫哥,那个不喜欢吃鱼、又不喜欢喵 的超级猫又在线营业啦 ~平时如何发现好的开源项目,可以看看这篇文章:GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目1. r...

    bb904407c8192803a06b8727eabfdfc0.png

    大家好,我是你们的 猫哥,那个不喜欢吃鱼、又不喜欢喵 的超级猫又在线营业啦 ~

    平时如何发现好的开源项目,可以看看这篇文章:GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目

    ea14e3b86f7901a6601480dd3648ec98.png

    1. react-use

    3be349ca3003667b41f179361ceafb7b.png

    必不可少的 React Hooks 集合. 移植 libreact。

    https://github.com/streamich/react-use

    2. gatsby

    7fd71e5a266fff6e9773721c99542258.png

    Gatsby是一个基于反应的自由和开源框架,帮助开发人员构建炽热的快速网站和应用程序。

    它将动态呈现的网站的控制和可扩展性与静态站点生成的速度结合起来,创建了一个全新的可能性网络。

    https://github.com/gatsbyjs/gatsby

    3. preact

    47eb01541213f51c23a82f2f707517c5.png

    具有相同现代 API 的快速 3kB React 替代方案。组件和虚拟 DOM。

    • 虚拟 DOM 组件的所有功能,没有开销:

    • 熟悉的 React API 和模式:ES6 类,挂钩和功能组件

    • 通过简单的简易/ Compat别名进行广泛的反应兼容性

    • 您需要的一切:JSX,VDOM,DevTools,HMR,SSR。

    • 从服务器端渲染的高度优化的差异算法和无缝水合

    • 支持所有现代浏览器和 IE11

    • 透明异步渲染与可插拔的调度程序

    • 即时生产级应用程序设置与精简 CLI

    https://github.com/preactjs/preact

    4. formik

    2d9c2f01b6b8154ecf11b006a670fa7e.png

    Formik 是世界上最流行的 React 和 React Native 开源表单库。

    https://github.com/jaredpalmer/formik

    5. docusaurus

    c9926c8f34a330e348a58bd144424db3.png

    快速构建以内容为核心的最佳网站。

    Markdown 驱动、使用 React 构建、翻译就绪。

    https://github.com/facebook/docusaurus

    6. awesome-react-components

    ffbde74e71382567a6231129c491c1a0.png

    React 组件和库的精选列表。

    https://github.com/brillout/awesome-react-components

    7. react-beautiful-dnd

    2efc1e8c739faa276533d0346d1fb956.png

    漂亮且易于使用的 React 列表拖放

    https://github.com/atlassian/react-beautiful-dnd

    8. react-hook-form

    c76ed687ea557fcc22df996e61d015d2.png

    用于表单状态管理和验证的 React Hooks (Web + React Native)

    https://github.com/react-hook-form/react-hook-form

    9. react-query

    368c47bb671e6fc99732ad44b580eab2.png

    在 React 中获取、缓存和更新异步数据的钩子

    https://github.com/tannerlinsley/react-query

    10. react-select

    fe676aad05bb1f1e0dde6a8df15ea263.png

    React.js 的 Select 组件

    https://github.com/JedWatson/react-select

    11. react-virtualized

    91ce6537610ed62b0b2c9a3db99f87d0.png

    React 组件可有效呈现大型列表和表格数据。

    https://github.com/bvaughn/react-virtualized

    12. slate

    3e5beec6c38af528f7700d199644bb6b.png

    用于构建富文本编辑器的完全可定制的框架。

    https://github.com/ianstormtaylor/slate

    最后

    平时如何发现好的开源项目,可以看看这篇文章:GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目

    更多精彩项目,请看下方宝藏仓库,请慎入!

    https://github.com/FrontEndGitHub/FrontEndGitHub

    不知不觉,原创文章已经写到第 63 期了呢,几乎每一篇都是猫哥精心挑选的优质开源项目,推送的每一篇文章里面的项目几乎都是对前端开发很有帮助的。

    原创不易,一篇优质的文章都是要肝几个晚上才能肝出来的,花费很多时间、精力去筛选和写推荐理由,大佬们看完文章后顺手点个赞或者转发吧,就当给猫哥一点鼓励吧。

    往期精文

    关注公众号:前端GitHub,回复 电子书 即可以获得下面 1000 本技术精华书籍哦,猫哥微信号:CB834301747

    8ffabb1663465ba62ab7e5788ac48ea0.png e978be820b5c3c74f820651525a5b387.png

    如果不想错过精彩内容,请多给本公众号点赞哦,这样就会先收到内容推荐的。

    0aa4a41fc32f1fb69d97b7eb5c502947.png
    展开全文
  • 推荐一款牛逼的开源 React 前端项目

    千次阅读 多人点赞 2020-06-18 10:44:48
    开源项目地址:https://github.com/nervosnetwork/ckb-explorer-frontend 很多人都听说过比特币、以太坊等区块链项目,也了解过区块链的工作原理,可能还动手写过 Solidity 智能合约代码。对于一个之前未曾了解过...
  • vue开源项目 1. vue-element-admin git地址:https://gitee.com/panjiachen/vue-element-admin.git 这是一款基于vue2.x+element后台管理系统开源项目,开箱即用。但是首次使用的话最好是分析下源码思路,对后期开发...
  • React Native 开源项目:厕所在哪(React Native App)
  • react最全项目实战

    2019-01-08 18:10:14
    项目采用react最新技术,结合react-redux,redux-thunk等核心技术,使用axios来获取数据请求。immutable.js、redux-immutable等核心技术。
  • React移动端企业级数据项目实战.txt打包整理.zip
  • 基于ThinkPHP6和React的极简后台管理系统
  • 阿里的下拉刷新又不符合项目的风格,只能 自己实现了。 采用better-scroll+react实现。 实现的效果 为什么要采用better-scroll better-scroll 是一款重点解决移动端(已支持 PC)各种滚动场景需求的插件。它的核心 是...
  • 使用Ignite的开发人员报告说,与React Native项目的开始相比,它平均可以节省两到四个星期的时间! Ignite应用程序包括开箱即用的坚决技术决策,例如React Native,React Navigation 5,MobX-State-Tree(为什么不...
  • Arco-admin-template是一个免费开源的中后台模板你,使用了React17、vite2、react-router-dom v6、less 等主流技术开发,开箱即用的中后台前端解决方案。 项目目的: 学习React Hook相关 Api 掌握Vite2插件机制、...
  • React练手小项目之简易电商管理系统
  • 项目描述 此项目为一个前后台分离的招聘的 SPA, 包括前端应用和后端应用 ... 前端: 使用 React 全家桶+ES6+Webpack 等技术 后端: 使用 Node + express + mongodb + socketIO 等技术 ...会使用ES6+npm构建项目,会react
  • 开源项目,帮助人们探索,开发和学习React
  • 贝岭的matlab的代码任何与 ReactJS ...使用react开源大型项目列表 React + React路由器 + redux React + React路由器 + 回流 使用 react 的简单项目列表 React界面 俄语书籍 俄文文件 俄语视频教程
  • 前言嗨, 大家好, 我是每年都会开源一些自研且有价值的开源项目的 徐小夕, 之所以开源是为了检验自己的设计是否能满足更多的市场需求, 同时也能弥补自己代码设计能力的空缺, 当然更多的是为了能帮助大家成长(事实确实...
  • - React 开源奖 - JavaScript 开源奖 - Umi 4 发布 - 5 月登陆浏览器的 API - Component party 9 大框架的语法和特性概览 - Ecma International 批准的新标准 - Git Command Explorer - Jiffy Reader ...
  • react-移动端项目

    2021-06-20 16:01:33
    移动端项目 一 明确案例的需求 需要理解的概念有: 手机验证码的登录 手机验证码的获取 第三方平台的授权登录 第三方平台用户信息的获取 二 antd的基本使用 需要理解的概念有: React的UI框架有哪些 ...
  • 大家好,我是你们的 猫哥,那个不喜欢吃鱼、又不喜欢喵 的超级猫又在线营业啦 ~平时如何发现好的开源项目,可以看看这篇文章:GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目1. r...
  • 使用 Ignite 的开发人员报告说,从 React Native 项目开始,它平均为他们节省了两到四个星期的时间! Ignite 应用程序包括开箱即用的坚如磐石的技术决策,例如 React Native、React Navigation 5、MobX-State-Tree...
  • Reactotron是一个macOS,Windows和Linux应用程序,用于检查您的React JS和React Native应用程序。 查看您的应用程序状态,显示API请求和响应,执行快速... 作为一个开源项目,Reactotron是免费的,并且将永远是免费的。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 38,946
精华内容 15,578
关键字:

react开源项目