weitanx / frontend-tutorial

:art: 前端技术指南

FRONTEND-TUTORIAL

一个后端程序员的前端技术总结。

• 🔁 项目同步维护：Github | Gitee
• 📖 电子书阅读：Github Pages | Gitee Pages

📖 内容

Html, Css, JavaScript

前端基础 - Html, Css, JavaScript

• Html 入门
• Css 入门
• JavaScript 入门

Nodejs

• Node.js 入门
• Npm 入门
• Yarn 入门

Webpack

Webpack 是一个模组打包工具（module bundler）。其主要目的是将 JavaScript 文件捆绑在浏览器中，但它也能够转换，捆绑或打包任何资源文件。

webpack 允许根据需要去加载应用程序的部件。使得 Javascript 应用可以高度复用。

• 如何学习 Webpack
• Webpack 概念
• Webpack 入门
• Webpack 资源管理
• Webpack 代码分离
• Webpack 开发工具

ES6, Babel, ESLint

• Babel 入门
• ES6 入门
• ESLint 快速入门
• ESLint 配置
• ESLint 命令

React 技术生态

• React 入门
• React Router
  • React Router 简介
  • React Router 基础
  • React Router 进阶
  • React Router API
• Redux
  • Flux 入门
  • Redux 入门

Vue 技术生态

• Vue.js 基础
• Vue Router 基础
• Vue Router 进阶
• Vuex 基础
• Vuex 进阶
• Vue Loader
• Vue Devtools

前端常用工具

• Axios 入门
• Prettier 入门
• Lodash 入门

📌 说明

• docs ：所有文档存放于 docs 目录。
• codes ：所有示例代码存放于 codes 目录。

我在学习 React 过程中，发现网上大部分示例动不动就是一大堆 React 技术整合在一起。这让初学者经常感觉很无力：一个技术还没搞懂，就要学另外一个技术，立不动心啊。

所以，我建立了一个连续性项目: jigsaw（拼图） 。之所以叫连续性项目，是因为它是一步步引入 React 技术。

每个 jsgsaw 目录，都是基于前面 chapter 的基础上，引入本 chapter 重点学习的技术。我觉得，通过这种方式，能更加晰的理解，如何搭建一个完整的 React 项目。