React 前端学习RoadMap

前言

  此手册旨于让非前端开发工程师 快速入手进行 前端 、Weex 开发，安利好用的编译工具，帮助读者避坑，规范代码，幸福开发。

入门

入门准备

  首推VScode 更流畅的使用体验，更好的插件社区维护，是一个可以让工作提效很多的编译器。 

好用插件

1.  ESLint

ESLint是一种静态代码分析工具，用于识别JavaScript代码中发现的有问题的模式。 ESLint中的规则是可配置的，并且可以定义和加载自定义规则。 ESLint涵盖了代码质量和编码样式问题。 

ESLint 中文官网

ESLint 超简单入门教程

强推的工具，统一一个Napos 通用的ESLint 配置文件，提供编码规范，提供自动检验代码的程序，并打印检验结果，规范每个人的代码 能让CR 更加清晰和高效，一次配置终身受益。

1. Prettier

一保存代码就会自动格式化；使得整个团队的代码风格统一，减少不必要的代码 Review，节省时间和能量

强推工具， 方便CR 。建议共建的同学，统一一份 .prettier 文档，避免因为代码格式问题 导致多次代码marge 操作。

1. GitHub Copilot

智能代码提示工具, 但不建议在新工程中过度使用，基础代码较少，提示方案 错误的偏多。

1. Git History / Git History Diff ： git 查看比较工具
2. Path Intellisense ： 地址提示工具 （好用）
3. Sass : Css 增强工具 （）
4. Snippets ： 代码自动补全工具  ()

一张图

Html CSS基础

• ​MDN 上的 HTML 部分的 HTML 基础
• MDN 上 CSS 部分的 CSS 基础

JS基础教程

万物基础

• ​developer.mozilla.org/zh-CN/docs/… （主文档）
• ​developer.mozilla.org/zh-CN/docs/… （重要介绍）
• ​developer.mozilla.org/zh-CN/docs/… （箭头函数）
• ​developer.mozilla.org/zh-CN/docs/… （类）
• ​developer.mozilla.org/zh-CN/docs/… （let 块级作用域的局部变量）

包管理

个人主要使用npm进行包管理

React教程

Weex2 开发语言 ReactJS

react.docschina.org/ （推荐教程）

zh-hans.reactjs.org/learn/insta…

思考