下载APP

慕课网APP - 随时随地学编程

App Store下载 Android下载

扫描下载慕课网APP

/ 实战 / 结合基础与实战学习React.js 独立开发新闻头条平台
收藏

React.js入门基础与案例开发

开发适配PC端及移动端新闻头条平台

结合基础与实战学习React.js 独立开发新闻头条平台

难度 初级 时长 15小时23分钟 学习人数 2768 综合评分 9.69
报名人数已满 该课程已出新版，查看新课 >>

结合基础与实战学习React.js 独立开发新闻头条平台

报名人数已满
  • 第1章 课程简介

    课程导读，介绍了课程的基本结构、课程的特点、最终实战项目演示、前置知识点以及源码打包结构和后期相关学习资料的更新方式。

    • 1-1 课程简介 试看
    • 1-2 演示云编程系统前端加后台
  • 第2章 React 简介

    对 React 进行了详细地简介并对课程的前置知识点进行了详细地梳理。

    • 2-1 React简介 试看
    • 2-2 课程前置知识点梳理 试看
    • 2-3 课程前置知识点梳理--演示利用 babel 把 ES6 转化为 ES5
  • 第3章 React 初体验

    介绍了此课程中使用的 React 版本以及官网学习包 React Starter Pack 的下载与安装，并对 React 的框架运行进行了初体验。

    • 3-1 课程 React 版本选择
    • 3-2 React Starter Pack 下载使用与 React 初体验
  • 第4章 NodeJS简介与安装

    对 NodeJS 进行了详细地介绍，并完整演示了 NodeJS 的安装过程。同时讲解了针对国内的网络环境如何去配置 NPM 加载国内源。

    • 4-1 NodeJS简介
    • 4-2 NodeJS安装
    • 4-3 NPM配置国内源
    • 4-4 必看的课程常见问题解答大合集
  • 第5章 React 环境配置与调试技巧

    共计五个小节，讲解了使用 NPM 配置 React 的开发环境。并分三个小节课程由浅入深地讲解了前端必备组件 webpack 的热加载配置。同时还介绍了 React 开发的必备插件 Chrome React 插件。

    • 5-1 使用NPM配置React环境
    • 5-2 webpack热加载配置（上）
    • 5-3 webpack热加载配置（中）
    • 5-4 webpack热加载配置（下）
    • 5-5 ChromeReact插件使用
  • 第6章 开发工具与必要组件

    讲解了开发工具 Atom 的基本使用，并用一个单独的章节介绍了 React 开发相关 Atom 插件配置，这将大大提高开发 React 项目的效率。

    • 6-1 开发工具Atom
    • 6-2 React开发相关Atom插件配置
  • 第7章 React 组件基础

    共计五个小节，详细讲解了 React 虚拟 DOM 概念、React 组件的概念、React 多组件嵌套、JSX 内置表达式、生命周期，并都有详细的源码演示。这些 React 组件基础是 React 最基础也是最重要的知识点。

    • 7-1 React虚拟DOM概念
    • 7-2 React组件
    • 7-3 React多组件嵌套
    • 7-4 JSX内置表达式
    • 7-5 生命周期
  • 第8章 React 属性与事件

    共计六个小节，继续用概念和源码结合的方式对 State 属性、Props 属性、事件与数据的双向绑定、可复用组件、组件的 Refs、独立组件间共享 Mixins 这些重要的概念进行了深入地讲解与演示。

    • 8-1 State属性
    • 8-2 Props属性
    • 8-3 事件与数据的双向绑定
    • 8-4 可复用组件
    • 8-5 组件的Refs（操作DOM的二种方法）
    • 8-6 独立组件间共享Mixins
  • 第9章 React 样式

    共计六个小节，还是用概念和源码结合的方式对 React 中的内联样式、内联样式中的表达式、CSS 模块化、JSX 样式与 CSS 的互转、Ant Design 样式框架介绍、Ant Design 样式框架使用这几个重要的知识点进行了讲解。

    • 9-1 内联样式
    • 9-2 内联样式中的表达式
    • 9-3 CSS模块化
    • 9-4 JSX样式与CSS的互转
    • 9-5 AntDesign样式框架介绍
    • 9-6 AntDesign样式框架使用
  • 第10章 React Router

    用一个独立的大章节介绍了 React 中的重要概念：React Router 概念以及 React Router 的参数传递。

    • 10-1 Router概念
    • 10-2 Router参数传递
  • 第11章 项目实战-开发环境初始化

    实战项目初始化，分别用四个小节课程介绍了项目初始化、Ant Design 框架的引入、头条新闻的数据接口简介、测试环境介绍。

    • 11-1 项目初始化
    • 11-2 Ant Design 框架的引入
    • 11-3 头条新闻的数据接口简介
    • 11-4 测试环境介绍
  • 第12章 项目实战-页头页脚模块

    实战项目的页头页脚开发，分别包含了PC 端页头组件开发、移动端页头组件开发、PC 端页脚组件开发、移动端页脚组件开发，并且每个独立的章节对有对应的独立源码文件夹供下载学习。

    • 12-1 PC端页头组件开发
    • 12-2 移动端页头组件开发
    • 12-3 PC端页脚组件开发
    • 12-4 移动端页脚组件开发
  • 第13章 项目实战-注册登录模块

    共七个小节课程，分别实际源码演示开发了 PC 端注册功能模块开发（上中下）、移动端注册功能模块开发、PC 端登录功能模块开发、移动端登录功能模块开发、退出登录功能完善。

    • 13-1 注册功能模块设计（上）
    • 13-2 注册功能模块设计（中）
    • 13-3 注册功能模块设计（下）
    • 13-4 移动端注册功能模块开发
    • 13-5 PC端登录功能模块开发
    • 13-6 移动端登录功能模块开发
    • 13-7 退出登录功能完善
  • 第14章 项目实战-首页模块

    用九个小节的课程继续实战开发了 PC 端导航栏布局开发、移动端导航栏模块开发、首页模块划分、PC 端首页模块布局开发（上）、PC 端首页模块布局开发（中）、PC 端首页模块布局开发（下）、移动端首页模块布局开发（上）、移动端首页模块布局开发（中）、移动端首页模块布局开发（下）。...

    • 14-1 PC端导航栏布局开发
    • 14-2 移动端导航栏模块开发
    • 14-3 首页模块划分
    • 14-4 PC端首页模块布局开发（上）
    • 14-5 PC端首页模块布局开发（中）
    • 14-6 PC端首页模块布局开发（下）
    • 14-7 移动端首页模块布局开发（上）
    • 14-8 移动端首页模块布局开发（中）
    • 14-9 移动端首页模块布局开发（下）
  • 第15章 项目实战-详情模块

    继续用是十一个小节的课程继续实战开发了 PC 端详情页面开发（上）、PC 端详情页面开发（中）、PC 端详情页面开发（下）、移动端详情页面开发、评论模块开发（上）、评论模块开发（中）、评论模块开发（下）、移动端评论模块开发、PC 端用户收藏功能开发（上）、PC 端用户收藏功能开发（下）、移动端用户收藏功能开发...

    • 15-1 PC 端详情页面开发（上）
    • 15-2 PC 端详情页面开发（中）
    • 15-3 PC 端详情页面开发（下）
    • 15-4 移动端详情页面开发
    • 15-5 评论模块开发（上）
    • 15-6 评论模块开发（中）
    • 15-7 评论模块开发（下）
    • 15-8 移动端评论模块开发
    • 15-9 PC 端用户收藏功能开发（上）
    • 15-10 PC 端用户收藏功能开发（下）
    • 15-11 移动端用户收藏功能开发
  • 第16章 项目实战-个人中心模块

    进行了项目的最后收尾开发，实战演示了 PC 端用户个人中心开发、移动端用户个人中心开发、个人头像的上传与处理、个人收藏文章列表开发（上）、个人收藏文章列表开发（下）、个人评论列表开发（上）、个人评论列表开发（下）共七个小节的功能开发，且仍然提供了独立的源码文件夹供下载学习或二次开发。...

    • 16-1 PC 端用户个人中心开发
    • 16-2 移动端用户个人中心开发
    • 16-3 个人头像的上传与处理
    • 16-4 个人收藏文章列表开发（上）
    • 16-5 个人收藏文章列表开发（下）
    • 16-6 个人评论列表开发（上）
    • 16-7 个人评论列表开发（下）
  • 第17章 项目实战-最后调优

    进行了整个实战项目的总结，并演示了在 React 中如何快速使用 HTML 代码块，同时将完整的课程思维导图分享给了大家。

    • 17-1 快速使用HTML代码块
  • 第18章 网页优化

    简单讲解雅虎军规和工具。

    • 18-1 网页优化军规介绍（上）
    • 18-2 网页优化军规介绍、插件（下）
  • 第19章 课程扩展-React的实用组件

    本章讲解上拉刷新加载数据、下拉刷新加载数据组件，以及Redux 一些简介与一个小的实例演示。

    • 19-1 点击加载更多-上拉刷新加载数据
    • 19-2 点击加载更多-下拉刷新加载数据
    • 19-3 Redux 简介与实例演示
    • 19-4 页面表单框架
  • 第20章 课程扩展-使用 Webpack 2 与 React Router 4 升级项目

    此章节为课程后续更新，详细演示了如何将课程的项目从 Webpack 1 以及 React Router 2 的版本更新到最新的 Webpack 2 与 React Router 4 版本。 对于后续的版本更新以及开发过程中的问题快速解决都具有极强的参考意义。

    • 20-1 使用 Webpack 2 重新配置项目
    • 20-2 使用 React Router 4 重写项目（一）
    • 20-3 使用 React Router 4 重写项目（二）
    • 20-4 使用 React Router 4 重写项目（三）
  • 第21章 课程扩展-深入 React 原理与算法

    此章节深入讲解了 React 最底层的 Virtual DOM，从产生的场景、原理以及底层算法都进行了详细的讲解，掌握最基础的设计才能更好地理解 React。并在讲解 Virtual DOM 与 React Diff 算法的基础上，完全一行一行带大家写了属于自己的 React 框架，加深对底层算法的理解。...

    • 21-1 再看 Virtual DOM
    • 21-2 Virtual DOM 与 React Diff 算法
    • 21-3 尝试写一个属于自己的 React 框架，ReMooc（一）
    • 21-4 尝试写一个属于自己的 React 框架，ReMooc（二）
    • 21-5 尝试写一个属于自己的 React 框架，ReMooc（三）
    • 21-6 尝试写一个属于自己的 React 框架，ReMooc（四）
  • 第22章 课程扩展-使用 Webpack 进行项目打包

    此章节全面讲解了 Webpack 2.0 的最常见使用技巧，从打包前的代码压缩、使用 Webpack 将项目代码与组件代码进行分离、项目生成 SourceMaps 与源码调试到非常实用的借助 Webpack 图表优化项目，都进行了实际的代码演示操作讲解，Webpack 作为前端开发必备框架，相信一定对你有很大的帮助和启发。...

    • 22-1 打包前的代码压缩
    • 22-2 使用 Webpack 将项目代码与组件代码进行分离
    • 22-3 项目生成 SourceMaps 与源码调试
    • 22-4 借助 Webpack 图表优化项目
  • 第23章 课程扩展-服务器部署相关

    此章节属于拓展章节，讲解了如果你需要部署在实战部分开发的 React 项目，你需要了解的服务器部署相关知识，如云服务器主要知识点、域名、DNS、HTTP 与 HTTPS 详解以及 React 项目部署的方案，这些软件开发人员从业的必备相关知识，超越 React 课程内容，但是绝对是你值得学习的相关知识体系。...

    • 23-1 云服务器主要知识点
    • 23-2 关于域名
    • 23-3 DNS 详解
    • 23-4 HTTP 与 HTTPS 详解
    • 23-5 React 项目部署的方案
本课程已完结


讲师

Parry 其它

邱鹏源，先后在支付宝、Cuscapi就职，先后担任支付宝高级软件工程师、Cuscapi核心数据传输架构师等职务。饭妈妈创始人，技术博客推荐博主，微软技术社区精英，和微软合作录制过IE10的推广视频。多年软件开发经验（MIS，F&B），主要从事ASP.NET(C#)，熟悉Web前端技术，擅长Web性能优化和调优，喜欢软件架构及项目管理。http://u2l.info/3iBXWX

课程预览

检测到您还没有关注慕课网服务号，无法接收课程更新通知。请扫描二维码即可绑定
重新观看
意见反馈 帮助中心 APP下载
官方微信