H5学习之路

h5.jpg

持续更新中...

前言

从iOS开发入坑，途中掉入Android小坑，现在公司负责iOS及Android大坑，已经成功入坑前端开发......掌握了PC端前端，移动端(iOS、Android)可能是真正的前端了。公司前端紧缺，已经开始开发一些模块，感觉还不错，主要还是旁边有一个前端大牛带路...

学习记录 https://github.com/tikeyc/HTML-Study

开发工具

• Visual Studio Code
  https://visualstudio.microsoft.com/zh-hans/
  https://visualstudio.microsoft.com/zh-hans/downloads/
• Atom https://atom.io/
• Sublime Text http://www.sublimetext.com/
• Webstorm http://www.jetbrains.com/webstorm/

Atom 常用插件

搜索地址 https://atom.io/packages

• file-icons https://atom.io/packages/file-icons

• atom-beautify https://atom.io/packages/atom-beautify

• atom-html-preview https://atom.io/packages/atom-html-preview

• minimap https://atom.io/packages/minimap

• atom-ternjs https://atom.io/packages/atom-ternjs

• highlight-selected https://atom.io/packages/highlight-selected

• autoclose-html https://atom.io/packages/autoclose-html

• autocomplete-paths https://atom.io/packages/autocomplete-paths

• browser-plus https://atom.io/packages/browser-plus

• click-link https://atom.io/packages/click-link

• color-picker https://atom.io/packages/color-picker

• pigments https://atom.io/packages/pigments

• docblockr https://atom.io/packages/docblockr

• emmet https://atom.io/packages/emmet

• eslint https://atom.io/packages/eslint

• linter-eslint https://atom.io/packages/linter-eslint

• hyperclick https://atom.io/packages/hyperclick

• js-hyperclick https://atom.io/packages/js-hyperclick

• open-in-browser https://atom.io/packages/open-in-browser

Atom 使用React常用插件

搜索地址 https://atom.io/packages

• atom-react-autocomplete–项目内，组件名及状态的自动补全

• autocomplete-js-import–模块导入智能提示

• emmet-jsx-css-modules– React内的Emmet补全，非单纯的expand【class => className 】！！

• language-javascript-jsx – JavaScript, ES6, ES7, React JSX, Flow支持

• language-babel – 写React必不可少【atom内开发react的核心插件！】

• react-es6-snippets – es6写法的react snippet，挺实用

• react-snippets – 和上面的搭配“口味更加”哦！

• js-func-viewer– 新插件，但是很实用，可以查看函数的结构~~~~

• atom-react-native-autocomplete – RN的智能补全，react开发也能受用一部分，相当实用！智能提示非autocomplete那种【类似静态语法分析器】

• autocomplete-modules – 模块智能提示【node_modules】

学习资料

第一部分

• BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务 http://www.bootcdn.cn/

• MDN Web 文档 https://developer.mozilla.org/zh-CN/

• Bootstrap中文网 http://www.bootcss.com/

• jQuery中文文档 http://jquery.cuishifeng.cn/

• Can I use... Support tables for HTML5, CSS3, etc https://caniuse.com/

• 一套绝佳的图标字体库和CSS框架 http://fontawesome.dashgame.com/

• 谷歌字体中文版 http://www.googlefonts.cn/

• http://www.material-ui.com/#/

• https://github.com/mui-org/material-ui

• 尺寸图片库 https://picsum.photos/images

学习视频

花了点钱

• HTML+CSS零基础入门 https://edu.csdn.net/course/detail/5419

• HTML5 + CSS3 从 0 到 1 实战详解 https://edu.csdn.net/course/detail/5124

• JavaScript编程入门 https://edu.csdn.net/course/play/3578

• ReactJS全讲 https://edu.csdn.net/course/play/6609

学习框架

第一部分

• JavaScript 教程 http://www.w3school.com.cn/js/index.asp

• jQuery 教程 http://www.w3school.com.cn/jquery/index.asp

• React 中文文档 https://doc.react-china.org/

第二部分 React Router

创建create-react-app,包含配置: https://segmentfault.com/a/1190000012505414

• react-router https://github.com/ReactTraining/react-router
• React Router简易入门 https://segmentfault.com/a/1190000010174260
• React Router文档 https://reacttraining.com/react-router/web/example/route-config

第三部分 React Redux

• Redux入门教程
• React技术栈之Redux异步流
• React技术栈之Redux高阶运用
• 个人觉得比较好的实战讲解 https://www.jianshu.com/p/815ec73b1354
• redux教程 https://cn.redux.js.org
• redux https://github.com/reduxjs/redux
• react-redux https://github.com/reduxjs/react-redux
• redux-in-chinese https://github.com/camsong/redux-in-chinese
• React China http://react-china.org/
• Redux管理你的React应用 http://react-china.org/t/redux-react/2749

第四部分 开源UI组件

• Ant Design
• Material-UI
• React bootstrap
• React Desktop
• Amaze UI React

第五部分 react-app 配置信息

• 全面掌握webpack https://www.webpackjs.com/
• 命令行暴露配置文件 https://www.jianshu.com/p/a144eb3d55e7
• 创建create-react-app,包含配置: https://segmentfault.com/a/1190000012505414
• 一步一步搭建一个react项目环境 https://github.com/sundaypig/react-build-tutorial
• 如何在react中使用antd+less+css modules https://www.jianshu.com/p/51ff1c8be301

第六部分 学习

• 创建create-react-app,包含配置: https://segmentfault.com/a/1190000012505414
• 快速入门less https://less.bootcss.com/
  web前端开发, 前端开发工程师, 前端资源, CSS, JavaScript, Ajax, jQuery, html,html5,css3,浏览器兼容, 前端开发工具, 前端招聘, jQuery API, CSS整形和优化工具 , JS压缩工具 , JS格式化工具 , CSS参考手册 ,HTML参考手册

第七部分 React应用常用的框架(不断增加中...)

后来发现视乎没必要写了

学习记录

• 学习中所有代码 https://github.com/tikeyc/HTML-Study

HTML+CSS

html+css.png
02html+css.png

学习记录 https://github.com/tikeyc/HTML-Study

待续...
持续更新中...