yaocq / JuanFanQianDuan

JuanFanQianDuan

卷翻前端学习路线

1. 打基础
   不管是MDN还是其他，免费资源就够。先大致了解html语法，简单的css属性，js基础语法（会写循环、判断），这一步不要停留太久，不要深究细节，看再多也做不出实际产品来。很多人就陷在这一步。
   强烈推荐购买 https://scrimba.com/learn/frontend ，按照这个路线图学习。这个网站很好的一点是编辑器即视频，随时可以在视频中点击进入编辑状态，强迫你敲代码。根据自身情况选择模块学习。建议新手不要跳过，按顺序来。最起码学到React Basics。
2. html没啥可学的，css太繁杂，但一定要熟练掌握flex、grid布局
   js暂且不用掌握闭包、原型链等高级概念，学会获取DOM并改变元素内容、样式，将数组渲染成界面，就够了。如果你按照上面的路线图学到React基础，此时你应该有能力用react制作一个简单的网站，并且数据是通过API获取的。
3. 开始做一个项目
   从实践中学习,第一次建议设计一个个人网站并实现出来。框架都是成熟的，教程非常多，而且很容易有成就感。过程中会遇到很多教程里不会提到的细节坑，需要你自己搜索解决。如何从零开始从前到后撸一个博客出来，可以问我。 这时候你已经达到多年前初级前端的水平了。接下来按照个人兴趣选择领域深入学习。还是建议通过实践学习：深入学一些，开始做项目，遇到问题就解决，感觉有瓶颈就继续深入学。
4. nodejs
   都学到这份上了怎么能不学node呢。建议先过一遍codewithmosh关于node的教程，对node、express有个大致印象。就可以写个简单的后端接口了，拼接一下字符串之类的。
   消除对后端的恐惧后，了解一点数据库，用node框架如nest做个复杂点的后端应用。
5. 这时候肯定要用到运维知识
   学一下docker和网络知识。

你就可以自称全栈了。

Online Resource

• 前端学习路线图：FrontEnd Roadmap
• React初学教程：React JS Tutorial For Beginners 2023
• 最好的JS教程：javascript.info
• 流行React样式库：Tailwind CSS
• Facebook Official React Course: from Basic to Advanced

Objectives

• Sny‘s Objectives
  • O1: 看懂Figma插件代码
  • O2: 修好之前的插件
  • O3: 用React结合Headless CMS写一个作品集网站
• Fuiru11's Objectives
  • O1: Debug frontend if necessary
  • O2: Set up custom code in analytics tool
  • O3: Rebuild personal website (not very motivated tho...)
• yaooo's Objectives
  • O1: 写一个有一个项目的作品集网站
  • O2: 写一个OA系统的功能模块
  • O3: 用react写一个VR场景下的网页

Things to Learn

• for Sny‘s Objectives
  • O1, O2
    • Typescript for React
    • Figma Plugin API
  • O2
    • Tailwind CSS
    • NextJS
    • Strapi
• for Fuiru11 Objectives
  • O1
  • O2
  • O3
• for yaooo Objectives
  • O1
  • O2
  • O3

React Knowledge Framework

• React Basic Concepts
• Component Types
  • Function Component
  • Class Component
• Data Flow
  • Props & Children in Components
  • useContext Hook Function
• State in Components
  • Function Component State
    • useState Hook Function
    • useReducer Hook Function
  • Class Component State
  • Statefull & Stateless Component
• Event Handling
  • Function Component Event Handling
  • Class Component Event Handling
• Routing
  • react-router-dom Library
• Using Assets
• Conditional Rendering
• Array Rendering
• Form Elements & Controlled Component
• Hooks
  • Rules
  • Common Used Hooks
    • useState Hook
    • useEffect Hook
    • useReducer Hook
    • useRef Hook
• Fetching Data
• JSX
  • React.cloneElement() API
  • React.Children API
  • Spread Operator
• Code Reusability in React (Difficult)
  • High Order Component (HOC)
  • Render Props
• Testing
  • Jest
  • React Testing Library

...