前端React入门.md

HTML和CSS基础

1. 熟悉 VS Code，注意几个常用插件的配置
2. 熟悉 html 页面结构 ( 强调 doctype ), 注意 html规范
3. 使用 Chrome dev tools 调试 CSS, HTML
4. 使用 jsbin.com 写自己的 demo 页面
5. reset.css 例如 normalize.css (为什么会有rest.css 和 浏览器的差异性)
6. 盒模型
7. CSS Layout 一些知识 传送门
   • block, inline 和 inline-block 元素特点
   • 浮动布局 和 清理浮动
   • 定位布局
   • flex布局 （必须掌握，推荐阮一峰的两篇文章）
   • box-sizing
   • 垂直居中 传送门
8. CSS 样式优先级 和 CSS 选择器
9. CSS规范
10. 一些常见的组件的写法, 例如导航栏, 登录页面, 菜单, 商品展示等, 可以参考京东或天猫首页, 重点在于HTML结构选择
11. 工作流(从原型到html页面(PSD2HTML), 随便截取一张网页的一部分, 让新人实现, 导师可以进行示范)
    • 拿到设计稿, 分析结构, 标注
    • 先写出HTML结构
    • 在添加上CSS样式
    • 最终效果与设计稿一致

推荐阅读书籍

精通CSS 高级Web标准解决方案

目标: 独立完成UX设计稿到静态HTML页面转换 (PSD2HTML)

JS基础 (ES5和ES6)

1. 语法: 标识符, 数字, 字符串, 语句, 表达式, 字面量, 函数, 对象, 函数, 继承, 数组, 正则, 变量提升, 闭包, 原型继承, 立即自执行函数, 高阶函数, 函数的四种调用方式等
2. DOM, BOM, Ajax 和 Fetch 请求
3. JavaScript权威指南 （认真阅读，查漏补缺）
   • codecademy.com Javascript 练习 (可选)
   • NodeSchool JS教程 (可选)
4. 阮一峰的 ES6 https://es6.ruanyifeng.com/

推荐阅读书籍

• JavaScript语言精髓
• Effective JavaScript：编写高质量JavaScript代码的68个有效方法
• JavaScript模式 (选读)
• JavaScript DOM高级程序设计 (选读)

目标：可以了解常见 JS 语法以及语言知识点，可以读懂别人代码（JS有很多语言怪癖），独立完成像轮播图，导航栏切换等页面效果

React

1. React官方指南
2. think in react
3. 练习
   • 饿了吗练习

推荐阅读

• React（第2版）：引领未来的用户界面开发框架 入门经典
• React Design Patterns and Best Practices 进阶神器

目标：可以看懂项目代码，并 fix issue