10个最佳的ReactJS实例教程［译文］

摘要: 10 Best ReactJS Tutorials With Examples
原文地址，http://noeticforce.com/best-reactjs-tutorials-with-examples

Read on if you are looking for resources and tutorials to learn ReactJS framework. ReactJS is the fastest growing JavaScript framework as of today and powers the user interface of Facebook, Instagram and many more by now. The power of ReactJS lies in its ability to render complex and interactive user interfaces with high performance. The key concept behind ReactJS framework is the use of virtual DOM that ensures high performance.
如果你正在寻找资源和教程去学习ReactJS框架，那么请往下读。ReactJS是当今快速发展的 JavaScript框架和掌控着Facebook,Instagram 和很多其它网站的用户界面。ReactJS的强大之处在于它能够渲染有着复杂交互的用户界面，同时保持页面的高性能。在ReactJS框架背后是有着一个虚拟的DOM来确保高性能。
Developers across the globe have started using ReactJS for developing complex web apps and websites. There is no dearth of great resources and tutorials that teach you how to build your own ReactJS applications.
全球各地的开发者已经开始使用ReactJS来开发复杂web应用和网站。这里并不缺乏大量的资源和教程来教会你如何去构建一个你自己的ReactJS应用。
Let us look at the best Tutorials around the web written by ReactJS experts for creating kickass user interfaces of dynamic and interactive web apps.
We will cover ReactJS introductory tutorials for beginners, intermediate level ReactJS tutorials and also the tutorials that teach how to build the most advanced ReactJS applications.
让我们看看网络上ReactJS专家写的最好的教程－－用于构建强大的动态和交互的网络应用。
我们的ReactJS介绍教程将会覆盖初学者，中级水平，同样也包含一些教程如何去构建一些最高级的ReactJS应用。

Introduction to ReactJS JavaScript Framework

ReatJS JavaScript 框架的介绍

This is the ReactJS tutorial for beginners to understand the basics and fundamentals of ReactJS. Tutorial is written by app developer Aurelio De Rosa on Telerik.com. In this tutorial Aurelio talks about React fundamentals like virtual DOM, server side rendering, data binding, react components, props and state, JSX syntax and finally describes how to build a hello world application using ReactJS.
这是给ReactJS初学者的教程，帮助理解ReactJS的基础和基本原理。教程是由 app开发者Aurelio De Rosa在Telerik.com发布的。在这篇教程中，Aurelio讲述了React的基本原理，如 虚拟DOM， 服务端渲染，数据绑定，react部件，维持状态,JSX语法，最后描述了如何用ReactJS 创建一个hello world的应用。
You can find the tutorial at - developer.telerik.com.
你可以在developer.telerik.com.找到这篇教程。

ToDo Application Using React and Flux Architecture

ToDO 应用－使用React和Flux架构

This tutorial is for intermediate level users who are already familiar with the basics of ReactJS. In this tutorial Chris Harrington builds a simple todo application using ReactJS and Flux architecture. The tutorial covers two key aspects of application development i.e. user interface rendering and data access. You will learn how multipleviews are rendered using ReactJS and how data access is accomplished using Flux Architecture with help of mocked out server API.
这份教程是给那些已经熟悉ReactJS的中级开发者。在这个教程中， Chris Harrington 建立了一个使用ReactJS和Flux架构的todo应用.这份教程覆盖了开发应用过程中的两个主要方面，例如用户界面渲染和数据访问。你会学会如何使用ReactJS渲染多个页面和如何通过模拟服务器API，使用 FLux架构完成数据的访问。
You can find the tutorial at - codementor.io.
你可以在codementor.io.找到这份教程。

React Apps Using Flux and Backbone

使用Flux和 Backbone的React应用

This tutorial is written by Alex Rattray on toptal.com and is not for the weak hearted. In this tutorial, Alex talks about most powerful concepts and patterns for building ReactJS apps using Flux and backbone.
Backbone library is used to fill in the gaps of flux architecture, you can grasp quickly if you have already tried your hands building ReactJS apps with Flux.
You can find the tutorial at – toptal.com.
这份教程是由Alex Rattray在toptal.com上面写的，不是为那些软心肠的人写的。在这份教程中，Alex 讲述了使用Flux和backbone来构建ReactJS应用的最有效的概念和模式。
Backbone库是用来填充flux架构之间的空隙的，如果你已经有亲手使用Flux构建ReactJS应用的经验，那么你可以快速掌握它。

5 Practical Examples for Learning React

学习React的5个实践例子

This tutorial is for you if you are the one who believes to fiddle around with the code and examples to learn rather than getting into too much of theory.
This ReactJS tutorial is written by Martin Angelov on tutorialzine.com and demonstrates five JSFiddle code examples - Timer, Navigation Menu, Real Time Search, Order Form and Image App with Ajax.
这份教程适合于那些宁愿相信折腾代码和例子，而不是陷入太多的理论的人。这篇ReactJS的教程是由Martin Angelov在tutorialzine.com上写的，示范了5个JSFiddle的代码例子-时间，导航菜单，实时搜索，订单表格和使用Ajax的图像应用。
You can find the tutorial at – tutorialzine.com.
你可以在 tutorialzine.com找到这片教程。

Getting Started with ReactJS and Concepts

开始使用 ReactJS和概念

This is another good beginners tutorial to get quickly on boarded with ReactJS development. This tutorial is written by Ken Wheeler on Scotch.io, very well organized, readable and gets off to the mark straight away. In this tutorial you will learn, what is React? How does the virtual DOM work? ReactJS Starter Kit, JSX, Components, Props, Specs, Lifecycle and State, Events and Unidirectional data flow.
You can find the tutorial at – scotch.io.
这是另外一个初学者教程来快速参与到ReactJS的开发中来。这篇教程是由Ken Wheeler在Scotch.io上面编写的，结构清晰，易读,直接有标记。在这个教程中，你会学到，什么是React? 虚拟的Dom是怎么工作的。ReactJS StarterKit,JSX,部件，维护，规格，生命周期,和状态，时间和单向的数据流。

Twitter Stream with Node and React.js

使用Node和React.js的Twitter数据流

This tutorial is for advanced users and here you can learn to build end to end application that fetches and displays twitter stream using node and ReactJS. Tutorial is written by Ken wheeler and definitely is one of the best free ReactJS tutorials you will find on the web today.
Ken uses isomorphic JavaScript (you will learn) for building live twitter stream app. The other libraries and used in the tutorial are Express, Handlebars, Browserify, Mongoose, Socket.io and nTwitter.
You can find the tutorial at – scotch.io.
这个教程是给高级用户的，这里你能够学会如何去建立一个端到端的应用，使用node和ReactJS来展示twitter的数据流。教程是由Ken wheeler编写的，而且还无疑问，这是一个你在网上可以找到的最好的一个免费的ReactJS教程。
Ken使用了同构的Javascript(你将会学到)来构建实时数据流的twitter应用。在这篇教程中使用的其它库有Express,Handlebars,Brwoserify,Mongoose,Socket.io和nTwitter.
你可以在scotch.io找到这篇教程。

ReactJS in Depth with Shape Editor Component Example

深入ReactJS,创建编辑器部件例子

This tutorial is written by Pavan Podila at tutsPlus.com and is for intermediate level users. Pavan talks about each aspect of ReactJS in depth by taking code example of shape editor component.
This is one of the most comprehensive tutorials and definitely clarifies the some of the deep rooted fundamentals of development using ReactJS.
You can find the tutorial at – code.tutsplus.com.
这份教程是 Pavan Podila在tutsPlus.com上面写的，适合中级用户。Pavan 通过一个塑造编辑器部件的代码例子深入讲述ReactJS的各个方面。这是一个最全面的教程，明确地澄清了一些开发使用ReactJS的深层基本原理。
你可以在 code.tutsplus.com找到这个教程。

ReactJS Tutorial and Guide to the Gotchas

ReactJS教程和指引问题

In this tutorial Justin deal from Zapier.com attempts to clarify some of the confusing aspects and gotchas of ReactJS development. I would categorize this tutorial into the one that turns beginners into advanced developers. A must read for every ReactJS developer.
You can find the tutorial at - zapier.com.
在这个教程中，来自Zapier.com的Justin deal尝试澄清几个ReactJS开发过程中各种遇到的困惑的方面。我会将这些教程分类整合成一个，让初级开发者变成高级开发者。这是一个所有 ReactJS开发者必须读的。
你可以在zapier.com发现这个教程。

Employee Directory with ReactJS and Cordova

ReactJS和Cordova的员工目录

The best way to learn any new framework is by building an application. Christophe Coenraets has written a step by step tutorial to build Employees directory mobile application with ReactJS and runs it in Cordova.
Christophe starts this tutorial by building static version of the Employee directory app, incorporates data flow and inverse data flow, implements async service, codes for state maintenance, routing, styling and finally runs the application in Cordova.
This tutorial is good for you if you already have your concepts clarified and need some hands on coding to see how everything works in ReactJS.
You can find the tutorial at - coenraets.org.
最好的方式去学习一个框架就是建立一个应用。Christophe Coenraets 写了一个一步接一步的教程来使用ReactJS创建员工目录的移动应用，并且运行在Cordova中。
Christophe通过建立一个静态版本的员工目录应用开始这个教程，合并数据流和反转数据流，实现了异步服务，代码状态的维护，风格，最后在Cordova运行应用。
这个教程很适合那些你已经澄清了这些概念，然后想通过一些实例代码来了解在ReactJS中一切都是如何工作的。
你可以在coenraets.org找到这个教程。

Create High Performance, Maintainable Components with ReactJS

Another must read article to understand the workings of a ReactJS application at architectural level. This one is from IBM developer works, written by Sing Li and focuses mostly on the concept of react components architecture, how to build custom components, and usage of third party ReactJS component libraries.
Li also touches upon Flux architecture, workings of JSX and gives a brief introduction of Relay and React Native, the future state ecosystem of ReactJS.
You can find the tutorial at - ibm.com/developerworks.
通过ReactJS创建高性能，可维护的部件
另外一个必须要读的文章，就是要在架构级别上去理解ReactJS应用的核心。这篇文章是来自IBM的开发者，由 Sing Li 编写，而且主要聚焦在 react 部件架构的概念，如何去建立可定制化的部件，还有使用第三方的ReactJS部件库。

Conclusion

结论

ReactJs is a fantastic javascript framework and promises to support high performance complex web applications. There are many ReactJS tutorials around the web, free as well as paid. Of course, you can spend time searching for tutorials, read through and ultimately learn to build killer apps with ReactJS.
However, as they say, time is money, better to save on time by relying on right ReactJS tutorials from day one. Christophe Coenraets, Ken Wheeler, Alex Ratteray and Pavan Podila and others mentioned in this article are the experts in the field and have written reliable tutorials. So, go for these and get on boarded with greatness of ReactJs. Share with the community if you have reference to a great ReactJS tutorial.
ReactJS是一个极棒的javascript框架，并且承诺支持高性能负责的网络应用。网上有很有许多 ReactJS的教程，有免费的也有付费的。当然，你可以花费一些时间寻找这些教程，读然后最终学会如何通过ReactJS创建杀手级应用。
但是，正如她们说的。时间就是金钱，最好就是省下时间，依赖来自day one 的正确的ReactJS教程。Christophe Coenraets, Ken Wheeler, Alex Ratteray，Pavan Podila和其它在这篇文章中提到的都是这个领域的专家，而且已经写了很多可靠的教程。所以就寻找这些，然后找到ReactJS 伟大的之处。如果你有一些好的ReactJS教程参考，那么请和社区分享这些。