{"id":18305116,"url":"https://github.com/dunwu/frontend-tutorial","last_synced_at":"2025-04-05T16:32:33.843Z","repository":{"id":45536206,"uuid":"89352892","full_name":"dunwu/frontend-tutorial","owner":"dunwu","description":":art: 一个后端程序员的前端技术总结","archived":false,"fork":false,"pushed_at":"2022-12-16T05:11:09.000Z","size":5836,"stargazers_count":138,"open_issues_count":5,"forks_count":52,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-03-21T06:51:16.182Z","etag":null,"topics":["antd","babel","css","es6","eslint","fetch","html","javascript","nodejs","npm","react","react-router","redux","webpack"],"latest_commit_sha":null,"homepage":"https://dunwu.github.io/frontend-tutorial/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"cc-by-sa-4.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dunwu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-04-25T11:28:30.000Z","updated_at":"2025-01-24T02:59:43.000Z","dependencies_parsed_at":"2023-01-29T09:45:56.958Z","dependency_job_id":null,"html_url":"https://github.com/dunwu/frontend-tutorial","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dunwu%2Ffrontend-tutorial","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dunwu%2Ffrontend-tutorial/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dunwu%2Ffrontend-tutorial/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dunwu%2Ffrontend-tutorial/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dunwu","download_url":"https://codeload.github.com/dunwu/frontend-tutorial/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247366746,"owners_count":20927576,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["antd","babel","css","es6","eslint","fetch","html","javascript","nodejs","npm","react","react-router","redux","webpack"],"created_at":"2024-11-05T15:32:44.790Z","updated_at":"2025-04-05T16:32:28.830Z","avatar_url":"https://github.com/dunwu.png","language":"JavaScript","readme":"\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://dunwu.github.io/frontend-tutorial/\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n        \u003cimg src=\"http://dunwu.test.upcdn.net/common/logo/dunwu-logo.png\" alt=\"logo\" width=\"150px\"/\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://badgen.net/github/license/dunwu/frontend-tutorial\" alt=\"license\"\u003e\n    \u003cimg src=\"https://travis-ci.com/dunwu/frontend-tutorial.svg?branch=master\" alt=\"build\"\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003eFRONTEND-TUTORIAL\u003c/h1\u003e\n\n\u003e 一个后端程序员的前端技术总结。\n\u003e\n\u003e - 🔁 项目同步维护：[Github](https://github.com/dunwu/frontend-tutorial/) | [Gitee](https://gitee.com/turnon/frontend-tutorial/)\n\u003e - 📖 电子书阅读：[Github Pages](https://dunwu.github.io/frontend-tutorial/) | [Gitee Pages](http://turnon.gitee.io/frontend-tutorial/)\n\n## 📖 内容\n\n![react-stack](https://raw.githubusercontent.com/dunwu/frontend-tutorial/master/docs/assets/images/react-stack.jpg)\n\n### Html, Css, JavaScript\n\n\u003e 前端基础 - Html, Css, JavaScript\n\n- [Html 入门](docs/base/html.md)\n- [Css 入门](docs/base/css)\n- [JavaScript 入门](docs/base/js)\n\n### Nodejs\n\n- [Node.js 入门](docs/nodejs/nodejs.md)\n- [Npm 入门](docs/nodejs/npm.md)\n- [Yarn 入门](docs/nodejs/yarn.md)\n\n### Webpack\n\n\u003e [Webpack](docs/webpack) 是一个模组打包工具（module bundler）。其主要目的是将 JavaScript 文件捆绑在浏览器中，但它也能够转换，捆绑或打包任何资源文件。\n\u003e\n\u003e webpack 允许根据需要去加载应用程序的部件。使得 Javascript 应用可以高度复用。\n\n- [如何学习 Webpack](docs/webpack/webpack-howto.md)\n- [Webpack 概念](docs/webpack/concept.md)\n- [Webpack 入门](docs/webpack/webpack-tutorial.md)\n- [Webpack 资源管理](docs/webpack/asset-management.md)\n- [Webpack 代码分离](docs/webpack/code-splitting.md)\n- [Webpack 开发工具](docs/webpack/development.md)\n\n### ES6, Babel, ESLint\n\n- [Babel 入门](docs/es6/babel/babel-quickstart.md)\n- [ES6 入门](docs/es6/es6/es6-quickstart.md)\n- [ESLint 快速入门](docs/es6/eslint/eslint-quickstart.md)\n- [ESLint 配置](docs/es6/eslint/eslint-configuration.md)\n- [ESLint 命令](docs/es6/eslint/eslint-command.md)\n\n### React 技术生态\n\n- [React 入门](docs/react/react-quickstart.md)\n- React Router\n  - [React Router 简介](docs/react/react-router/react-router-introduction.md)\n  - [React Router 基础](docs/react/react-router/react-router-basic.md)\n  - [React Router 进阶](docs/react/react-router/react-router-advanced.md)\n  - [React Router API](docs/react/react-router/react-router-api.md)\n- Redux\n  - [Flux 入门](docs/react/redux/Flux入门.md)\n  - [Redux 入门](docs/react/redux/Redux入门.md)\n\n### Vue 技术生态\n\n- [Vue.js 基础](docs/vue/vuejs-basic.md)\n- [Vue Router 基础](docs/vue/vue-router-basic.md)\n- [Vue Router 进阶](docs/vue/vue-router-advanced.md)\n- [Vuex 基础](docs/vue/vuex-basic.md)\n- [Vuex 进阶](docs/vue/vuex-advanced.md)\n- [Vue Loader](docs/vue/vue-loader.md)\n- [Vue Devtools](docs/vue/vue-devtools.md)\n\n### 前端常用工具\n\n- [Axios 入门](docs/tool/axios.md)\n- [Prettier 入门](docs/tool/prettier.md)\n- [Lodash 入门](docs/tool/lodash.md)\n\n## 📌 说明\n\n- **docs** ：所有文档存放于 `docs` 目录。\n- **codes** ：所有示例代码存放于 `codes` 目录。\n\n我在学习 React 过程中，发现网上大部分示例动不动就是一大堆 React 技术整合在一起。这让初学者经常感觉很无力：一个技术还没搞懂，就要学另外一个技术，立不动心啊。\n\n所以，我建立了一个连续性项目: `jigsaw（拼图）` 。之所以叫连续性项目，是因为它是一步步引入 React 技术。\n\n每个 `jsgsaw` 目录，都是基于前面 chapter 的基础上，引入本 chapter 重点学习的技术。我觉得，通过这种方式，能更加晰的理解，如何搭建一个完整的 React 项目。\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdunwu%2Ffrontend-tutorial","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdunwu%2Ffrontend-tutorial","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdunwu%2Ffrontend-tutorial/lists"}