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