/react-china

React + React-router4 + nodejs + spa + es6 + flex 新手教程

Primary LanguageJavaScript

React + React-Router4 + nodejs + spa + es6 + flex 新手教程

React + React-Router4 + es6 + nodejs + flex布局 重写 react-china 社区.

  • 由于技术更新飞快,社区很多教程都已经是过时的技术.仅有的一些可能过于复杂,并不适合新手学习.
  • 本教程是专门针对新手的入门教程.本教程会使用2017年4月10号为止,最新版本的react和相关依赖进行开发. 手把手教大家把一个项目从0到1搭建起来,同时整理了react相关的学习资料.
  • 为了方便大家学习,降低学习难度,项目并没有使用redux.

React基础

JS基础

什么是SPA

单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用。它将所有的活动局限于一个Web页面中,仅在该Web页面初始化时加载相应的HTML、JavaScript 和 CSS。一旦页面加载完成了,SPA不会因为用户的操作而进行页面的重新加载或跳转。而是利用 JavaScript 动态的变换HTML的内(采用的是div切换显示和隐藏),从而实现UI与用户的交互。由于避免了页面的重新加载,SPA 可以提供较为流畅的用户体验。得益于ajax,我们可以实现无跳转刷新,又多亏了浏览器的histroy机制,我们用hash的变化从而可以实现推动界面变化。

什么是前端路由

在web开发中,'route'是指根据url分配到对应的处理程序。

什么是react-router

SPA应用由于只有一个页面,无法很好的处理页面的前进,后退,书签管理等功能.这时候就需要借助react-router来进行页面跳转和管理

本项目实现的功能

  • webpack搭建react开发环境,热加载等功能
  • nodejs爬取react-china接口数据,返回给前台
  • react + flex布局实现前端界面UI
  • 用fetch实现react的数据获取
  • 用react-router 实现路由切换
  • 滚动条下拉自动获取下一页内容,并重新渲染

项目搭建

git clone git@github.com:fjmhzyh/react-china.git      // 将项目下载到本地
$ npm install       // 安装依赖
$ npm start         // 启动项目

你的支持,我的动力

  • 如果觉得有帮助的话,请作者喝杯咖啡吧!
  • 感谢大家的支持,项目会继续完善,其他教程也会提交到github,欢迎关注!

image

项目预览

image