React + React-Router4 + es6 + nodejs + flex布局 重写 react-china 社区.
- 由于技术更新飞快,社区很多教程都已经是过时的技术.仅有的一些可能过于复杂,并不适合新手学习.
- 本教程是专门针对新手的入门教程.本教程会使用2017年4月10号为止,最新版本的react和相关依赖进行开发. 手把手教大家把一个项目从0到1搭建起来,同时整理了react相关的学习资料.
- 为了方便大家学习,降低学习难度,项目并没有使用redux.
- react基本语法学习 http://www.ruanyifeng.com/blog/2015/03/react.html
- react书籍推荐 https://book.douban.com/subject/26918038/
- react-router语法 https://reacttraining.com/react-router/web/guides/quick-start
- react-router中文 http://blog.csdn.net/sinat_17775997/article/details/69218382
- es6语法学习 http://es6.ruanyifeng.com/
- nodejs基础 http://www.nodebeginner.org/index-zh-cn.html
- h5 History API https://segmentfault.com/a/1190000007238999
单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用。它将所有的活动局限于一个Web页面中，仅在该Web页面初始化时加载相应的HTML、JavaScript 和 CSS。一旦页面加载完成了，SPA不会因为用户的操作而进行页面的重新加载或跳转。而是利用 JavaScript 动态的变换HTML的内（采用的是div切换显示和隐藏），从而实现UI与用户的交互。由于避免了页面的重新加载，SPA 可以提供较为流畅的用户体验。得益于ajax，我们可以实现无跳转刷新，又多亏了浏览器的histroy机制，我们用hash的变化从而可以实现推动界面变化。
在web开发中,'route'是指根据url分配到对应的处理程序。
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 // 启动项目- http://localhost:3000 // 打开项目主页
- 如果觉得有帮助的话,请作者喝杯咖啡吧！
- 感谢大家的支持,项目会继续完善,其他教程也会提交到github,欢迎关注！
