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

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

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

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

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

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

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

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

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

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

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

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

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

第13章 项目实战-注册登录模块
共七个小节课程,分别实际源码演示开发了 PC 端注册功能模块开发(上中下)、移动端注册功能模块开发、PC 端登录功能模块开发、移动端登录功能模块开发、退出登录功能完善。

第14章 项目实战-首页模块
用九个小节的课程继续实战开发了 PC 端导航栏布局开发、移动端导航栏模块开发、首页模块划分、PC 端首页模块布局开发(上)、PC 端首页模块布局开发(中)、PC 端首页模块布局开发(下)、移动端首页模块布局开发(上)、移动端首页模块布局开发(中)、移动端首页模块布局开发(下)。...

第15章 项目实战-详情模块
继续用是十一个小节的课程继续实战开发了 PC 端详情页面开发(上)、PC 端详情页面开发(中)、PC 端详情页面开发(下)、移动端详情页面开发、评论模块开发(上)、评论模块开发(中)、评论模块开发(下)、移动端评论模块开发、PC 端用户收藏功能开发(上)、PC 端用户收藏功能开发(下)、移动端用户收藏功能开发...

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

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

下载地址;百度网盘下载

原文地址:https://www.cnblogs.com/MaxLing/p/10306563.html

时间: 2024-10-09 12:27:56

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

APPCAN学习笔记001---app高速开发AppCan.cn平台概述

1.APPCAN学习笔记---app高速开发AppCan.cn平台概述 1. 平台概述 技术qq交流群:JavaDream:251572072 AppCan.cn开发平台是基于HTML5技术的跨平台移动应用高速开发一体化解决方式. 开发人员利用HTML5+CSS3+JavaScript技术能够高速地开发与本地应用体验相媲美的移动应用. AppCan.cn平台提供了UI高速开发框架.本地功能调用API接口.应用打包系统.IDE集成开发环境和本地应用调试模拟器, 预置数百套界面模板和数十种应用插件,

APPCAN学习笔记---app快速开发AppCan.cn平台概述

1.APPCAN学习笔记---app快速开发AppCan.cn平台概述 1. 平台概述 技术qq交流群:JavaDream:251572072 AppCan.cn开发平台是基于HTML5技术的跨平台移动应用快速开发一体化解决方案. 开发者利用HTML5+CSS3+JavaScript技术可以快速地开发与本地应用体验相媲美的移动应用. AppCan.cn平台提供了UI快速开发框架.本地功能调用API接口.应用打包系统.IDE集成开发环境和本地应用调试模拟器, 预置数百套界面模板和数十种应用插件,提

APPCAN学习笔记002---app快速开发AppCan.cn平台特色

技术qq交流群:JavaDream:251572072 1.多窗口机制 常见应用只支持单一窗口 2.原生UI与交互支持 大量原生UI与交互支持(如Action Sheet等) 3.第三方开放平台支持 相比国外中间件更具本土优势, Sina.QQ.百度.人人等.. 4.HTML5+CSS3支持 完全兼容HTML5,丰富支持CSS3. 5.终端设备调用API 提供大量设备调用API,如各种传感器.摄像头等. 6.在线编译发布 无需本地开发环境,通过在线设置图标和启动图片.证书.发布渠道,一键编译发布

APPCAN学习笔记002---app高速开发AppCan.cn平台特色

技术qq交流群:JavaDream:251572072 1.多窗体机制 常见应用仅仅支持单一窗体 2.原生UI与交互支持 大量原生UI与交互支持(如Action Sheet等) 3.第三方开放平台支持 相比国外中间件更具本土优势, Sina.QQ.百度.人人等. . 4.HTML5+CSS3支持 全然兼容HTML5,丰富支持CSS3. 5.终端设备调用API 提供大量设备调用API,如各种传感器.摄像头等. 6.在线编译公布 无需本地开发环境.通过在线设置图标和启动图片.证书.公布渠道,一键编译

从node.js模块化开发来了解javascript闭包

之前看过很多关于javascript闭包的解释,只有短短几个demo,一大段晦涩难懂的介绍,巴拉巴拉一大段闭包的概念,但是到最后也没看懂闭包到底是什么意思,起什么作用,直到昨晚凌晨,我在学习node.js模块开发的时候,才突然恍然大悟,所以赶紧记下来,免得以后忘记.代码来源:廖雪峰的网站node.js教程. 直接上代码: 我们首先编写了一个hello.js文件,这个hello.js文件就是一个模块,模块的名字就是文件名(去掉.js后缀),所以hello.js文件就是名为hello的模块. 我们把

React.js学习知识小结(一)

学习React也有半个月了吧,这里对所学的基础知识做个简单的总结.自己先是跟着官方文档学,差不多学了四五天,也跟着入门教程做了一个简单的小栗子.然后跟着阮一峰老师的教程上手了几个小Demo,后来在网上发现了一本很好的书React.js小书,自己断断续续也学了几天,上面也几个实战的小项目,可以跟着练练手. 话不多说,就直接来总结吧! JSX 组件 区分props和state 生命周期函数 事件系统 高阶组件 React.js的context 函数式编程 使用PropTypes检查类型 ref属性和

React.js 基础入门三 ---组件状态state

React 组件实例在渲染的时候创建.这些实例在接下来的渲染中被重复使用,可以在组件方法中通过 this 访问.唯一一种在 React 之外获取 React 组件实例句柄的方式就是保存React.render 的返回值.在其它组件内,可以使用 refs 得到相同的结果(后面会简单解释refs). 从上几章的学习,我们可以这么理解组件,学过php的Yii框架的都知道widget组件,react.js定义一个组件,通过在组件中定义各种'方法','属性'最后通过render来渲染这个组件. 其中<组建

react.js学习之路一

今天新老大来了,我们要学习他使用的框架react.js,现在是两眼一抹黑,对于我这个前端菜鸟来说,是真正的重新开始,好了,不说那么多了,开始随便记录我的学习,之后再整理内容. (1)对于react来说,任何UI的变化都是通过整体刷新来完成的,也就是说,每做一点界面的更新,都可以认为是刷新了整个页面(怎么感觉跟canvas有点像),至于如何进行局部更新以保证性能,则是React框架要完成的事情.对于react来说,我不用关心每次内容dom的添加到dom树上,我只需要关心数据整体,两次数据之间UI如

React JS和React-Native学习指南

自己在学习React-Native过程中整理的一份学习指南,包含 教程.开源app和资源网站等,还在不断更新中.欢迎pull requests! React-Native学习指南本指南汇集React-Native各类学习资源,给大家提供便利.指南正在不断的更新,大家有好的资源欢迎Pull Requests! 同时还有Awesome React-Native系列 https://github.com/jondot/awesome-react-native 教程react-native 官方api文