G

🚀 GitHub 上面向 Web 开发者的 10 个热门项目 - 2021 年 1 月 15 日 📊 指标 React 开发者路线图 JavaScript 问题 Node-RED es6-cheatsheet 简介 Material Dashboard 2

2025-06-08

🚀GitHub 上面向 Web 开发者的 10 个热门项目 - 2021 年 1 月 15 日

📊 指标

React 开发者路线图

JavaScript 问题

节点RED

es6-cheatsheet

介绍

材料仪表板 2 鸣叫 不和谐

《Trending Projects》以每周简讯形式提供,请在www.iainfreestone.com上注册,以确保您不会错过任何一期。

1. React Boilerplate 与 CRA 的结合

React Boilerplate 官方的 Create React App 模板。使用 React Boilerplate 设置 Create React App。高度可扩展、最佳 DX、注重性能、最佳实践

GitHub 徽标 react-boilerplate / react-boilerplate-cra-template

🔥 使用 React Boilerplate 设置创建 React 应用。高度可扩展、最佳 DX、注重性能、最佳实践。

React Boilerplate 与 CRA 的相遇


专为高度可扩展高性能易于维护的React.js 应用程序 而设计
,专注于最佳 DX最佳实践



React Boilerplate官方Create React App模板discontinued

create-react-app使用为您准备的最佳、行业标准的工具和实践,在几秒钟内开始您的项目。

📚 文档: Gitbook

🎨 查看示例应用程序: 演示功能

📂 在 VS Code 中浏览: 在 Visual Studio Code 中打开

📦软件包: npm

版本 版本


安装并启动

⚠️ 建议使用Yarn 包管理器npm

使用模板创建 React App

yarn create react-app --template cra-template-rb my-app
Enter fullscreen mode Exit fullscreen mode

如果您愿意,请启动并检查我们的示例应用程序

cd my-app
yarn start
Enter fullscreen mode Exit fullscreen mode

删除示例应用程序以启动您的项目!

yarn cleanAndSetup
Enter fullscreen mode Exit fullscreen mode

特征

该项目并非框架、UI 组件库或设计系统。此模板的唯一目的是帮助您使用可靠的工具堆栈启动 CRA 应用程序……


2.统一

Unform 是一个专注于性能的库,它可以帮助您利用不受控制的组件性能和 React Hooks 的强大功能在 ReactJS 和 React Native 中创建漂亮的表单。

GitHub 徽标 统一/统一

专注于性能的 React 表单 API 🚀

统一

轻松实现高度可扩展的 ReactJS 和 React Native 表单!🚀

npm 覆盖状态

概述

Unform 是一个注重性能的 API,用于为 React 和 React Native 创建强大的表单体验。使用钩子,您可以基于高度可扩展的组件构建轻量级且可组合的表单。它可以与任何表单库集成,验证您的字段,并让您的数据开箱即用。

想要在使用 Unform 之前先测试一下吗?

ps:不适用于 React Native Web 或 Expo Web,请使用 Expo Snack 中的 iOS/Android 设备。

需要幫助嗎?

我们正在使用GitHub Discussions围绕 Unform 展开讨论。这是一个让社区成员就想法、疑问、问题和建议相互交流的地方。

路线图

如果您觉得 Unform 目前没有某个很棒的功能,请务必查看路线图,看看未来是否已计划添加该功能。否则,我们建议……





3. 指标

生成可嵌入到任何地方的指标,包括您的 GitHub 个人资料自述文件!一个包含 20 多个 GitHub 帐户指标的图片生成器,例如活动、社区、代码库、编码习惯、网站性能、播放的音乐、加星标的主题等等,您可以将它们放在您的个人资料或其他地方!

GitHub 徽标 低光/指标

📊 一个信息图表生成器,具有 30 多个插件和 300 多个选项,可显示有关您的 GitHub 帐户的统计信息并将其呈现为 SVG、Markdown、PDF 或 JSON!

📊 指标

持续集成

生成可嵌入任何地方的指标,包括你的 GitHub 个人资料自述文件!支持用户、组织甚至代码库!

对于用户帐户 对于组织帐户
📅 等距提交日历 🈷️ 语言活动
全年日历
半年日历
深入分析(克隆和分析存储库)
最近使用(分析最近的活动事件)
默认算法
默认算法(包含详细信息)
✨ 观星者 👨‍💻 代码行数已更改
经典图表
图表
世界地图
存储库和差异历史记录
基础插件中的紧凑显示
📌 加星标的主题 🌟 最近加星标的仓库
带有图标
带标签
📜 存储库许可证 💡 编码习惯和活动
许可、限制和条件
许可证概述
最近活动图表
略有趣味的事实
🏅 代码库贡献者 🎟️ 问题和拉取请求的跟进
按贡献类型
按贡献数量
深入分析
在用户的存储库上创建
由用户创建
🎭 评论反应 🧑‍🤝‍🧑 人

4. React 开发者路线图

成为 React 开发者的路线图。这张图表的作用是“作为 React 开发者,我下一步应该学习什么?”

GitHub 徽标 adam-golab / react-developer-roadmap

成为 React 开发人员的路线图

React 开发者路线图

中文自述文件

日语自述文件

韩语自述文件

葡萄牙语(巴西)自述文件

俄语自述文件

西班牙语自述文件

2019 年成为 React 开发人员的路线图:

下面这张图表展示了成为 React 开发者可以选择的学习路径以及需要学习的库。我制作这张图表是为了给所有问我“作为 React 开发者,我下一步应该学什么?”的人提供一些建议。

免责声明

本路线图旨在帮助您了解行业概况。如果您对下一步学习什么感到困惑,路线图会为您提供指导,而不是鼓励您选择那些时髦和流行的。您应该了解为什么某种工具在某些情况下比另一种更适合,并且记住,时髦和流行并不总是意味着最适合……


5. JavaScript 问题

一长串(高级)JavaScript 问题及其解释。

GitHub 徽标 lydiahallie / javascript 问题

一长串(高级)JavaScript 问题及其解释✨

JavaScript 问题

笔记

此代码库创建于 2019 年,因此此处提供的问题基于当时的 JavaScript 语法和行为。由于 JavaScript 是一门不断发展的语言,因此此处的问题并未涵盖一些较新的语言特性。


从基础到高级:测试你对 JavaScript 的掌握程度,稍微复习一下知识,或者为编程面试做准备!💪 🚀 我会定期更新这个 repo,添加新问题。答案都放在了问题下方的**折叠部分**里,点击即可展开。纯属娱乐,祝你好运!❤️

欢迎随时联系我!😊

Instagram || Twitter || LinkedIn ||博客







欢迎在项目中随意使用它们!😃 非常感谢大家对这个代码库的引用,我创建了问题和解释(是的,我很难过,哈哈),社区也帮助了我。






6. Node-RED

事件驱动型应用程序的低代码编程。Node-RED 是一款编程工具,用于以新颖有趣的方式将硬件设备、API 和在线服务连接在一起。

GitHub 徽标 节点红色/节点红色

事件驱动应用程序的低代码编程

节点RED

https://nodered.org

构建状态

针对事件驱动应用程序的低代码编程。

Node-RED:事件驱动应用程序的低代码编程

快速入门

请查看https://nodered.org/docs/getting-started/以获取有关入门的完整说明。

  1. sudo npm install -g --unsafe-perm node-red
  2. node-red
  3. 打开http://localhost:1880

获取帮助

更多文档可以在这里找到

如需进一步帮助或一般讨论,请使用Node-RED 论坛slack 团队

开发人员

如果您想从 git 运行最新代码,请按照以下步骤开始:

  1. 克隆代码:

     git clone https://github.com/node-red/node-red.git
     cd node-red
    
  2. 安装 node-red 依赖项

     npm install
    
  3. 构建代码

     npm run build
    
  4. 跑步

     npm start
    

贡献

在提出拉取请求之前,请阅读我们的贡献指南

本项目遵守贡献者契约 1.4 。参与本项目即表示您同意遵守此准则。如有任何不可接受的行为,请通过team@nodered.org向项目核心团队的任何成员报告

作者

Node-RED 是OpenJS 基金会的一个项目

它由以下人员维护:


7. es6-cheatsheet

一份包含 ES2015 [ES6] 提示、技巧、最佳实践和代码片段示例的备忘单,可用于您的日常工作流程。

GitHub 徽标 DrkSephy / es6-cheatsheet

ES2015 [ES6] 速查表,包含提示、技巧、最佳实践和代码片段

es6-cheatsheet

一份包含 ES2015 [ES6] 技巧、窍门、最佳实践和代码片段示例的速查表,助您轻松上手。欢迎贡献!

目录

var 与 let / const

此外var,我们现在可以使用两个新的标识符来存储值——letconst。与 不同varletconst语句不会被提升到其封闭范围的顶部。

使用示例var

var snack = 'Meow Mix';

function getFood(food) {
    if (food) {
        var snack = 'Friskies';
        return snack;
    }
    return snack;
}

getFood(false); // undefined
Enter fullscreen mode Exit fullscreen mode

var但是,观察当我们使用以下方法替换时会发生什么let

let snack =
Enter fullscreen mode Exit fullscreen mode

8. 建造者

使用代码组件进行拖放式页面构建。让您的设计系统焕发生机!

GitHub 徽标 BuilderIO /建造者

React、Vue、Svelte、Qwik 等的可视化开发



Builder.io 徽标

任何堆栈上的可视化开发

将 Figma 设计转化为代码。拖放组件。点击即可发布。

代码风格:Prettier 欢迎 PR 执照 类型

Builder.io 可视化编辑器的动画

Builder.io 平台的工作原理

Builder 连接到您现有的网站或应用程序,并允许您从 Figma 设计或我们的拖放编辑器以可视化方式生成代码(使用您现有的组件),然后导出该代码或通过我们的SDK发布这些更新。

了解Builder 的工作原理

工作原理

尝试一下!

注册一个免费帐户即可立即开始使用。

这个存储库里有什么?

这个 repo 包含各种SDK使用示例启动项目插件

加入社区!

有问题?有需求?有反馈?欢迎在我们的官方论坛与我们交流

我们正在招聘!

帮助我们让任何人都能构建数字体验并将更多想法变为现实 --> https://www.builder.io/m/careers







9. React Diagrams

一个用 React 编写的超级简单、实用的图表库,可以直接使用

GitHub 徽标 projectstorm /反应图

一个用 React 编写的超级简单、实用的图表库,可以直接使用

介绍

加入聊天:https://gitter.im/projectstorm/react-diagrams 新公共管理 包装质量

演示http ://projectstorm.cloud/react-diagrams

文档(未完成) https://projectstorm.gitbook.io/react-diagrams

目前正在编写文档和迁移路径。

什么

受BlenderLabviewUnreal 引擎启发的流程和过程导向图表库

  • 该库完全用 Typescript 和 React 编写,现代代码库利用强大的泛型、先进的软件工程原理,并分为多个模块。
  • 可破解且可扩展的整个库(包括其核心)可以扩展、重新连接和重新组装成根本不同的软件,以满足您自己的软件需求。
  • HTML 节点作为一等公民,该库最初被编写来表示高级动态节点,由于复杂的输入要求 ux 要求,这些节点很难表示为 SVG。
  • 该库专为流程而设计,面向希望在运行时重新连接程序并希望使其软件更具动态性的软件工程师。
  • 快速图表编辑提供的默认值...

10. 材料仪表板

Material Dashboard - 开源 Bootstrap 4 Material Design 管理员

GitHub 徽标 creativetimofficial /材料仪表板

Material Dashboard - 开源 Bootstrap 5 Material Design 管理员

版本 GitHub 问题已开放 GitHub 问题已关闭

图像

Material Dashboard是一款免费的 Material Bootstrap 管理界面,其全新设计灵感源自 Google 的 Material Design。我们非常高兴地通过一套易于使用且美观的组件来展现我们对 Material Design 概念的理解。Material Dashboard 基于流行的 Bootstrap 框架构建,并附带一些经过重新设计的第三方插件,以与其他元素完美契合。

Material Dashboard 巧妙地运用了光线、表面和动感元素。整体布局如同多层纸张,层次感和层次感清晰可见。导航主要集中在左侧边栏,内容则位于主面板的右侧。

这款产品源于我们成功发布Material Kit后,用户提出的 Material 仪表盘需求。我们根据大家的反馈开发了它,它是一款……


《Trending Projects》以每周简讯形式提供,请在www.iainfreestone.com上注册,以确保您不会错过任何一期。

如果您喜欢这篇文章,您可以在 Twitter 上关注我,我会定期发布与 HTML、CSS 和 JavaScript 相关的简短技巧。

鏂囩珷鏉ユ簮锛�https://dev.to/iainfreestone/10-trending-projects-on-github-for-web-developers-15th-january-2021-2ffn
PREV
🚀10 Trending projects on GitHub for web developers - 16th October 2020 Module Federation Examples React-Grid-Layout qiankun(乾坤) Pre-trained TensorFlow.js models Fluid Locomotive Scroll Docusaurus
NEXT
🚀GitHub 上面向 Web 开发者的十大热门项目 - 2020 年 8 月 14 日 CodeceptJS GPU.js 这是什么魔法?Tailblocks Halfmoon 更新 - 2019 年 6 月:第二版 Tabler React 什么是 Nx?Figma 到代码