我在慕課網的「React.js 入門與實戰之開發適配PC端及移動端新聞頭條平台」課程已經上線了,文章中是目前整個課程的大綱,以后此課程還會保持持續更新,此大綱文檔也會保持更新,備查。
原文發表於我的技術博客
1. 課程簡介
在此 React 入門與實戰課程中,主要使用的課程結構是 React 基本概念與實戰結合。課程從 React 的簡介講起,在正式開始學習 React 前將對目前火熱的前端知識點進行了梳理,包括基礎的 JS、ES5 / ES6、CSS、HTML5,也包含了NodeJS的簡介與安裝、開發環境熱加載組件 webpack 的簡介安裝與配置,甚至包括前端開發工具Atom 及其相關插件都進行了詳細的介紹。這些知識也是前端開發最先進、必備的知識點,此課程種都進行了相關的介紹與實戰演示。
課程地址:http://coding.imooc.com/class/83.html
2. 課程特色
-
上手更直觀:前期只需掌握JavaScript,HTML和CSS知識點,課程中手寫每一行代碼,在介紹了大量的前端知識以及 React 的基本知識后,接入一個比較大的實戰項目進行技術演練 。
-
緊跟前沿新技術:不僅僅介紹了 React 的知識,也從前端開發的層面給大家講解了一些開發技巧以及后期的性能優化知識。
-
基礎與實戰相結合:課程按照5分理論5分實戰。在實戰中大家更能加深對基礎知識的理解。
-
分集的源碼提供:課程每一節課都有單獨的源碼打包提供,解決了小白同學對於環境以及糅合在一起的代碼的困惑,課程里講到那里,就有一個單獨的源代碼文件夾供同學下載學習,和課程完全一樣。
-
超級全面的思維導圖:在課程的最后給同學們提供了一個超級大的思維導圖,所有的課程重點難點我們都記錄在了這個思維導圖中,我也相信這個文件將幫同學們很好地梳理好課程中的疑難點。在后續的QQ 群交流中我也將根據大家的學習反饋及時地更新這個非常有意義的思維導圖。
3. 課程大綱
章節 01 課程介紹
- 課程大綱與導讀
章節 02 React 簡介
- React 簡介課程
- 前置知識點梳理
章節 03 React 初體驗
- 課程 React 版本選擇
- React Starter Pack 下載使用與 React 初體驗
章節 04 NodeJS簡介與安裝
- NodeJS 簡介
- NodeJS 安裝
- NPM 配置國內源
章節 05 React 環境配置與調試技巧
- 使用 NPM 配置 React 開發環境
- webpack 熱加載配置(上)
- webpack 熱加載配置(中)
- webpack 熱加載配置(下)
- Chrome React 插件使用
章節 06 開發工具與必要組件
- 開發工具 Atom
- React 開發相關 Atom 插件配置
章節 07 React 組件基礎
- React 虛擬 DOM 概念
- React 組件
- React 多組件嵌套
- JSX 內置表達式
- 生命周期
章節 08 React 屬性與事件
- State 屬性
- Props 屬性
- 事件與數據的雙向綁定
- 可復用組件
- 組件的 Refs
- 獨立組件間共享 Mixins
章節 09 React 樣式
- 內聯樣式
- 內聯樣式中的表達式
- CSS 模塊化
- JSX 樣式與 CSS 的互轉
- Ant Design 樣式框架介紹
- Ant Design 樣式框架使用
章節 10 React Router
- Router 概念
- Router 參數傳遞
章節 11 項目實戰之開發環境初始化
- 項目初始化
- Ant Design 框架的引入
- 頭條新聞的數據接口簡介
- 測試環境介紹
章節 12 項目實戰之頁頭頁腳模塊
- PC 端頁頭組件開發
- 移動端頁頭組件開發
- PC 端頁腳組件開發
- 移動端頁腳組件開發
章節 13 項目實戰之注冊登錄模塊
- PC 端注冊功能模塊開發(上中下)
- 移動端注冊功能模塊開發
- PC 端登錄功能模塊開發
- 移動端登錄功能模塊開發
- 退出登錄功能完善
章節 14 項目實戰之首頁模塊
- PC 端導航欄布局開發
- 移動端導航欄模塊開發
- 首頁模塊划分
- PC 端首頁模塊布局開發(上)
- PC 端首頁模塊布局開發(中)
- PC 端首頁模塊布局開發(下)
- 移動端首頁模塊布局開發(上)
- 移動端首頁模塊布局開發(中)
- 移動端首頁模塊布局開發(下)
章節 15 項目實戰之詳情模塊
- PC 端詳情頁面開發(上)
- PC 端詳情頁面開發(中)
- PC 端詳情頁面開發(下)
- 移動端詳情頁面開發
- 評論模塊開發(上)
- 評論模塊開發(中)
- 評論模塊開發(下)
- 移動端評論模塊開發
- PC 端用戶收藏功能開發(上)
- PC 端用戶收藏功能開發(下)
- 移動端用戶收藏功能開發
章節 16 項目實戰之個人中心模塊
- PC 端用戶個人中心開發
- 移動端用戶個人中心開發
- 個人頭像的上傳與處理
- 個人收藏文章列表開發(上)
- 個人收藏文章列表開發(下)
- 個人評論列表開發(上)
- 個人評論列表開發(下)
章節 17 項目實戰之最后調優
- 快速使用 HTML 代碼塊
- 項目重要知識點回顧
章節 18 網頁性能調優技巧
- 網頁優化軍規介紹(上)
- 網頁優化軍規介紹、插件(下)
章節 19 React 實用組件
- 上拉刷新加載數據
- 下拉刷新加載數據
- Redux 簡介與實例演示
- 頁面表單、圖表、圖標框架
4. 學習收獲
- 了解React 的發展、適用平台、基本概念
- React 相關知識點的梳理
- NodeJS 的概念、安裝與國內源的配置
- 使用 NPM 配置 React 項目
- webpack 的概念、安裝與配置
- 開發工具 Atom 的安裝與插件配置
- 虛擬 DOM 的理解
- React 的所有基本知識點
- React 中的樣式模塊化
- Ant Design 框架的熟練掌握
- 網站的項目開發流程及技術要點
- 快速地適配 PC 端與移動端
- PC 端與移動端的開發快速調試
- 網頁性能優化技巧
- 超級全面的 React 學習思維導圖
- 分集的源代碼完整打包