react-redux-react-router直通车
发布在geekjc2016年9月24日view:1451ES6BrettBatReactreduxwebpack
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

简单说明

这篇文章是我学习react一个多月来的总结,从基础开始(包括编辑器设置,构建工具搭建),一步一步走向react开发。相信我,看完这篇文章,跟着文章的步骤走,保证让你入门react并爱上react,掌握react-router,redux。本文遵循由浅入深的原则。

一、编辑器开始

这里介绍的是sublime text3 配置react开发环境,支持es6 jsx react自动补全。

教程: Sublime3玩转ES6+ReactJs

二、webpack神器

相信你照着这个教程敲一篇,就可以入门并深入了

webpack demo

如果你实在不想搭建webpack 我这里有一个很好的东西介绍给你,绝对不比高手自己搭建webpack开发环境差!! 上文档代码:

{
  "name": "yourAppName",
  "version": "0.0.1",
  "private": true,
  "devDependencies": {
    "enzyme": "^2.4.1",
    "react-addons-test-utils": "^15.3.0",
    "react-scripts": "^0.4.0"
  },
  "dependencies": {
    "react": "^15.3.0",
    "react-dom": "^15.3.0",
    "react-redux": "^4.4.5",
    "redux": "^3.5.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "eject": "react-scripts eject",
    "test": "react-scripts test"
  },
  "eslintConfig": {
    "extends": "./node_modules/react-scripts/config/eslint.js"
  }
}

将上面文档保存为package.json 放在你工程的根目录下 然后运行npm install(npm i 也可以,为npm install的简写) 关键的是 react-scripts 这个包为你做了一切webpack的构建工作,包地址为(https://www.npmjs.com/package/react-scripts)

三、react基础篇

1、javascript

在学习之前的你,理应对 JavaScript 有所了解,或至少是 ES5 标准下的 JavaScript。可若了解甚少,那么,你就应该停下手头上的工作,学习好该基础部分后,才可迈步前行。

可倘若早已熟知 ES6 所带来的新特性,那么请继续。因为如你所料,React 的 API 接口在 ES5 和 ES6 两标准间存在着较大的差异性。所以对于你来说,熟悉两种标准其特性的不同至关重要。尽管发生了异常,你也可以通过两种标准之间的转换,寻找出广泛有效的答案。

推荐阮一峰的es5,es6教程: * JavaScript 标准参考教程(alpha) * ECMAScript 6 入门

2、NPM

NPM 在 JavaScript 世界中,可谓是软件管理方的王者。然而,在这里你却并不需要学习太多关于 NPM 自身的东西。只要在安装好后 (连同 Node.js),学习如何使用其安装软件即可。(npm install <package name>

推荐npm的官网:https://www.npmjs.com/

3、react

学习一个新的编程技术,我们往往会从熟悉的 Hello World 教程开始。首先,我们可以通过使用 React 官方教程所展示的原生 HTML 文件来实现,而该文件包含有一些 script 标签。其次,我们还可以通过使用像 React Heatpack 这样的工具来快速上手。

尝试一下该三分钟运行起 Hello World 的教程

推荐教程: * 英文好的,直接react官网啦 react * 读英文比较吃力的可以看 * react官网翻译 react-china * 菜鸟教程的react react-tutorial * demo实战 阮一峰的 “React 入门实例教程” (建议看完react文档在动手实操)

四、react-router篇

说到router,大家都知道是路由的意思,但它可不是家里的那种路由。这里的React Router 是专为 React 设计的路由解决方案,在使用 React 来开发 SPA (单页应用)项目时,都会需要路由功能,而 React Router 应该是目前使用率最高的。

React Router 并不是 Facebook 的 React 官方团队开发的,但是据说有官方人员参与开发。React Router 的设计思想来源于 Ember 的路由,如果原来有用过 Ember 的路由和开发过后端,那么应该对 React Router 不会陌生。

文章阅读 推荐: 从 React Router 谈谈路由的那些事

教程推荐: * React Router文档 * React Router demo

五、redux篇

Dan Abramov,作为 Redux 的创造人,他会告诉你们不要过早地接触 Redux。其实,这是有缘由的 —— Redux 其复杂度在早期的学习过程中,将会带来灾难性的影响。

虽然,在 Redux 背后所隐藏着的原理相当简单,但想要从理解跃至实践,却是一个很大的跨度。

因此,重复第二步所做的:构建一次性的应用程序。通过些许的 Redux 经验,去逐渐理解其背后的工作原理。

推荐教程: * Redux文档 * Redux 莞式教程 真心推荐,这小伙子写的真的很好,从源码分析,理解深入透彻 * Redux demo

最后

对于 React 来说,虽然有大量的学习计划需要采取,且有大量的东西需要学习 —— 但一切需要循规蹈矩,一步一脚印。站在前辈的肩膀上,照着我列出的教程敲一遍,相信你会从中受益的。

上面列举的教程和demo我都整理成了一个文档 react-tutorial 欢迎star 会一直持续更新,一起交流学习

作者:cll

评论
发表评论
1年前

这不是老姚吗

WRITTEN BY
cll极客
web开发者 专注react,react-native开发
TA的新浪微博
PUBLISHED IN
geekjc

分享原创文章和翻译国外优秀文章

我的收藏