h5.jpg

持續(xù)更新中...

前言

從iOS開發(fā)入坑塞椎，途中掉入Android小坑，現(xiàn)在公司負責(zé)iOS及Android大坑睛低，已經(jīng)成功入坑前端開發(fā)......掌握了PC端前端案狠，移動端(iOS、Android)可能是真正的前端了钱雷。公司前端緊缺骂铁，已經(jīng)開始開發(fā)一些模塊，感覺還不錯罩抗，主要還是旁邊有一個前端大牛帶路...

學(xué)習(xí)記錄 https://github.com/tikeyc/HTML-Study

開發(fā)工具

• 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–項目內(nèi)拉庵，組件名及狀態(tài)的自動補全

• autocomplete-js-import–模塊導(dǎo)入智能提示

• emmet-jsx-css-modules– React內(nèi)的Emmet補全，非單純的expand【class => className 】Ｌ椎佟钞支！

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

• language-babel – 寫React必不可少【atom內(nèi)開發(fā)react的核心插件！】

• react-es6-snippets – es6寫法的react snippet泣懊，挺實用

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

• js-func-viewer– 新插件，但是很實用馍刮，可以查看函數(shù)的結(jié)構(gòu)~~~~

• atom-react-native-autocomplete – RN的智能補全信夫，react開發(fā)也能受用一部分，相當(dāng)實用卡啰！智能提示非autocomplete那種【類似靜態(tài)語法分析器】

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

學(xué)習(xí)資料

第一部分

• BootCDN - Bootstrap 中文網(wǎng)開源項目免費 CDN 加速服務(wù) http://www.bootcdn.cn/

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

• Bootstrap中文網(wǎng) http://www.bootcss.com/

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

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

• 一套絕佳的圖標(biāo)字體庫和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

學(xué)習(xí)視頻

花了點錢

• HTML+CSS零基礎(chǔ)入門 https://edu.csdn.net/course/detail/5419

• HTML5 + CSS3 從 0 到 1 實戰(zhàn)詳解 https://edu.csdn.net/course/detail/5124

• JavaScript編程入門 https://edu.csdn.net/course/play/3578

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

學(xué)習(xí)框架

第一部分

• 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

創(chuàng)建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技術(shù)棧之Redux異步流
• React技術(shù)棧之Redux高階運用
• 個人覺得比較好的實戰(zhàn)講解 http://www.reibang.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應(yīng)用 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/
• 命令行暴露配置文件 http://www.reibang.com/p/a144eb3d55e7
• 創(chuàng)建create-react-app,包含配置: https://segmentfault.com/a/1190000012505414
• 一步一步搭建一個react項目環(huán)境 https://github.com/sundaypig/react-build-tutorial
• 如何在react中使用antd+less+css modules http://www.reibang.com/p/51ff1c8be301

第六部分 學(xué)習(xí)

• 創(chuàng)建create-react-app,包含配置: https://segmentfault.com/a/1190000012505414
• 快速入門less https://less.bootcss.com/
  web前端開發(fā), 前端開發(fā)工程師, 前端資源, CSS, JavaScript, Ajax, jQuery, html,html5,css3,瀏覽器兼容, 前端開發(fā)工具, 前端招聘, jQuery API, CSS整形和優(yōu)化工具 , JS壓縮工具 , JS格式化工具 , CSS參考手冊 ,HTML參考手冊

第七部分 React應(yīng)用常用的框架(不斷增加中...)

后來發(fā)現(xiàn)視乎沒必要寫了

學(xué)習(xí)記錄

• 學(xué)習(xí)中所有代碼 https://github.com/tikeyc/HTML-Study

HTML+CSS

html+css.png

02html+css.png

學(xué)習(xí)記錄 https://github.com/tikeyc/HTML-Study

待續(xù)...
持續(xù)更新中...