前端资源库分类收集

date
Sep 29, 2021
slug
2021-features-4
status
Published
tags
Design
React
summary
前端资源库分类收集
type
Post
weixin
authors
topic
Description
Link
分类整理收集前端各资源类库,方便开发查找。
 

🏝️ 开发基础

 

🏖️ 前端工程化

深入浅出 Webpack —— 内容涵盖Webpack,或者说涵盖现代前端技术基础、构建与优化的方方面面。如果你已经上手 Webpack,那么本书将带领你进一步学习,真正掌握 Webpack
 
 

⚒️ 开源与库

React周边

concent —— 内置依赖收集,可预测、零入侵、渐进式、高性能的react开发框架
 

React 面试题 & 回答

 
React Hooks
usehooks —— 3.1 K⭐️
 

React源码原理

 

 

状态管理

teaful —— 602 ⭐️ 小于1K的包,没有actions, reducers, selectors, connect, providers等,使用也必将简单
zustand —— 12.9 K⭐️ 小型、快速和可扩展的状态管理解决方案库。
nanostores —— 1.2 K⭐️ 一个小巧(199字节)的状态管理器,用于React/RN/Preact/Vue/Svelte
jotai.org —— 7.2K ⭐️
valtio —— 3.9K ⭐️
akita —— 3.4K ⭐️
Hookstate —— 1.3 K⭐️
 
 
 

 
 

微前端框架

garfish.top —— 1.4 K⭐️ ByteDance的微前端框架
MicroApp —— 2.2 K⭐️ 京东微前端框架
 
 

 
 

UI组件库

chakra-ui —— 23.4K ⭐️
Geist UI —— 2.6K ⭐️ 一个优雅美观,拥有浓厚 Geek 风格的 React 组件库,灵感来自于 Vercel 的设计风格。
arco.design —— 2.6K ⭐️ 字节跳动出品的企业级设计系统
mantine —— 10.1K ⭐️
 
 

TailwindCSS UI

tailwindui.com —— 官方出品,缺点是收费 💰💰 😭
Flowbite —— 1.1K ⭐️ themesberg 开发的组件库,免费,组件系统比较完整。同时提供 figma 设计稿 👍🏻
Tailwind UI Kit —— 部分收费
daisyUI —— 9.1K ⭐️ 免费
Mamba UI —— 免费
Meraki UI —— 1.1K ⭐️ 免费
Tailblocks —— 6.9K ⭐️ 免费
Tailwind Starter Kit —— 4.6K ⭐️ creative-tim 加持
Material Tailwind —— 573 ⭐️
tailgrids —— 138 ⭐️
 
 

 
 

算法

JavaScript 算法描述 —— 政采云前端团队小册
JavaScript 算法与数据结构——多种基于 JavaScript 的算法与数据结构
leetcode 解题之路 —— 记录自己的leetcode解题之路
吴师兄学算法——用动画的形式呈现解 LeetCode 题目的思路
数据结构与算法项目推荐——GitHub 上 170K+ Star 的前端学习的数据结构与算法项目
JavaScript 数据结构与算法之美 - 十大经典排序汇总
算法可视化工具——算法可视化工具是一个交互式的在线平台,可以从代码中可视化算法
观察算法的工作方式——变量和操作的可视化表示增强了控制流和实际源代码
前端瓶子君—— 基础理论+JS框架应用+实践,从0到1构建整个前端算法体系
 
 

博客

前端工匠 —— 关注基础知识,打造优质前端博客
前端面试 —— 前端面试,独有前端面试题详解,前端面试刷题必备,1000+前端面试真题,Html、Css、JavaScript、Vue、React、Node、TypeScript、Webpack、算法、网络与安全、浏览器
 

教程

1. JavaScript数据结构和算法完全解析 —— 几乎涵盖了常用数据结构和算法的解析和JavaScript实现,每一个算法都有对应的解释,说的非常的详细,而且还有对应的视频教程(YouTube)
2. 30秒代码 —— 满足您所有开发需求的简短 JavaScript 代码片段,充分利用你的零碎时间吧,学习各种实用的代码片段
3. JavaScript 样式指南 —— 各种代码规范
4. 你不知道的JavaScript —— 超级经典的书,主要讲的是JavaScript语言的核心机制,想要进阶前端就必须要了解这些东西。
5. 什么他妈的JavaScript? —— 各种有趣的JavaScript知识库,很多面试官都喜欢问的问题可以在这儿找到原型,非常不错。
6. 正确的学习JavaScript —— 各种关于JavaScript的最佳实践,以及各种标准的参考。
7. JavaScript 进阶问题列表 —— 从基础到进阶,测试你有多了解 JavaScript,刷新你的知识,或者帮助你的 coding 面试! 面试必备,包含多种高级进阶问题。
8. 干净的代码javascript —— 主要是一些原理性和代码整洁性的东西,可以帮助你更好的理解JavaScript,让你的代码变得更加优雅。
9. 33 个 JavaScript 概念 —— 每个开发人员都应该知道的 33 个 JavaScript 概念。
10. 编写 ES6 的 kickstarter 指南 —— 学习ES6的一本不错的书籍。
11. 很棒的JavaScript —— 一组很棒的浏览器端JavaScript库、资源和闪亮的东西。
12. 现代 JavaScript 备忘单 —— 本指南的目的不是从头开始教你 JavaScript,而是帮助具有基本知识的开发人员,他们可能因为使用的 JavaScript 概念而难以熟悉现代代码库(或者比如说学习 React)。
13. JavaScript提示 —— 这是一个很棒的项目,关于简短而有用的 JavaScript 技巧,可让您改进代码编写。在不到 2 分钟的时间内,您将能够阅读有关性能、约定、技巧、面试问题以及这门令人敬畏的语言的未来为我们提供的所有项目。
14.从零开始的 JavaScript 堆栈 —— 这是组装 JavaScript 堆栈的直截了当的指南。
15.30天挑战 —— 初学者文件 + JavaScript 30 天挑战的完整解决方案。
16.项目指南 —— JavaScript 项目的一组最佳实践,没有做过完整项目,看这个就够了,包含中文版指南。
17.JavaScript面试题 —— 1000道关于JavaScript的面试题。
 
 
 

🌋 建站相关

动效类

React Animated Cursor —— 替换鼠标箭头跟随圈点动效,使用介绍
AOS —— 18K ⭐️ Animate On Scroll Library 页面滚动动画效果,3年不更新了🤩
 
 

🌋 在线工具

在线设计协同工具

mastergo.com —— 蓝湖旗下产品 面向团队的专业 UI/UX 设计工具,多人同时编辑、随时在线评审、设计一键交付,让想法更快实现
即时设计—— 可云端编辑的专业级 UI 设计工具,为中国设计师量身打造Windows 也能用的「协作版 Sketch」
pixso.cn —— 新一代设计协作工具
 
 

程序员私活站

  1. 程序员客栈:程序员的经纪人
  1. 开源中国众包平台 oschina 众包
  1. 码市:来码市,找人才/任务快人一步
  1. 我爱方案网:电子方案开发,供应链平台
  1. 人人开发:让管理软件开发更容易
  1. 我要外包网
  1. 码易-高质量软件众包交付服务平台
  1. freelancer
  1. upwork
  1. Fiverr