react-tutorials

Basic Introductions

• React to the Future http://elijahmanor.com/talks/react-to-the-future/dist/#/ A fantastic HTML slideshow describing what React is, what makes it special, and how to work with it

• React Docs Tutorial https://facebook.github.io/react/docs/tutorial.html The original React tutorial page from the React docs

• React: Getting Started and Concepts https://scotch.io/tutorials/learning-react-getting-started-and-concepts Walks through the basics of components, JSX, props/lifecycle, and data flow

• React.js for Stupid People http://blog.andrewray.me/reactjs-for-stupid-people/ A high-level overview of what React is, and some pros and cons

• Learn Raw React http://jamesknelson.com/learn-raw-react-no-jsx-flux-es6-webpack/ A ground-up React tutorial that leaves out any other related "modern" technologies, Very recommended if you want to skip the buzzwords and acronyms.

• React.js Tutorial and Guide to the Gotchas https://zapier.com/engineering/react-js-tutorial-guide-gotchas/ Excellent look at what React and JSX are, and how to handle components and state. Also some excellent guidelines to be aware of when writing React code.

• Intro to the React Framework http://code.tutsplus.com/tutorials/intro-to-the-react-framework--net-35660 Discusses components, JSX, component lifecycle, state/props, and mixins. Covers an older version of React, but most of the information is still useful.

• React.js Introduction For People Who Know Just Enough jQuery To Get By http://reactfordesigners.com/labs/reactjs-introduction-for-people-who-know-just-enough-jquery-to-get-by/ A step-by-step tutorial that builds a simple component with jQuery and with React

• Build with React http://buildwithreact.com/#articles A series of short articles introducing React concepts

• Survive.js Training https://survivejs.github.io/training/#/0 An interactive presentation that goes through quick intros to Babel and Webpack before covering React basics, type checking, state management with Redux and MobX, async data, routing, performance, testing, and structuring applications.

• Taming the React Setup http://developer.telerik.com/featured/taming-react-setup/ Describes seven different setups for writing React code, from simple (plain react.js loaded into the browser), to complex (use of Babel with Webpack or JSPM).

• React From Zero https://github.com/kay-is/react-from-zero A simple (99% ES2015 less) tutorial for React. Everything runs in the browser without a manual pre-compilation.

• React Hello World Examples https://gist.github.com/danawoodman/9cfddb1a0c934a35f31a A one-page set of simple snippets demonstrating usage of React

• I Learned How to be Productve in React in a Week and You Can, Too https://css-tricks.com/productive-in-react/ A solid article written by a React newcomer, covering the basics, some gotchas, and important takeaways. Aimed at general web devs who are curious about React.

• Getting Started with React the Easy Way http://codeutopia.net/blog/2016/01/10/getting-started-with-react-the-easy-way/ Shows the simplest way to load React into a web page and start using it

• React Enlightenment http://www.reactenlightenment.com/ A straightforward, cookbook-style approach to learning React. (Currently a work-in-progress.)

• ReactJS Tutorial http://www.tutorialspoint.com/reactjs/index.htm A multi-part tutorial covering numerous aspects of React. Each part is short and the writing is a bit awkward, but the topics and info are useful.

• React Tutorial http://www.pshrmn.com/tutorials/react/react/ A very readable intro to React's concepts.

Project-Based Tutorials

• A Comprehensive Guide to Building Apps with React http://tylermcginnis.com/reactjs-tutorial-a-comprehensive-guide-to-building-apps-with-react/ Walks through the major concepts and API functions in React

• Hacking with React http://www.hackingwithreact.com/ A hands-on introduction to making a web app using React 0.14, React Router 1.0, ES6, Jest and more. Book is free to read online, and can also be purchased to get other formats.

• React/Flux Tutorial Part 1: React http://spapas.github.io/2015/06/05/comprehensive-react-flux-tutorial/ Demonstrates building up a CRUD app UI using React

• Learn React https://www.kirupa.com/react/index.htm A series of articles that cover a variety of topics, including project setup, components, styling, JSX, state, and more.

• React Primer (Draft) https://github.com/mikechau/react-primer-draft A very long and well-written dive into React's concepts. Note that the "draft" label is accurate - it still says it covers React 0.12 and 0.13, and the non-React sections listed in the Table of Contents are empty. However, the existing React content is still useful, just be aware that some of the details may be out of date.

• React.js Program - React.js Fundamentals http://courses.reactjsprogram.com/courses/reactjsfundamentals A 12-part text+video course that includes quizzes and a hands-on curriculum. The Fundamentals course is free, and the site also includes paid courses for other React and Redux-related topics.

• Step by Step Guide to React and Redux http://satyam.github.io/book-react-redux/ A complete guide to building an app with React and Redux, from tool selection to project configuration to server and client code. (NOTE: Currently in-progress as of May 2016 - only covers project configuration and server-side setup so far, but the content looks promising.)

• React Speed Coding https://leanpub.com/reactspeedcoding https://github.com/manavsehgal/reactspeedcoding A complete book that covers the entire application stack, from project setup to component design to connecting to a backend. Free to read online, other formats purchasable. Repo includes demos, samples, code from the book, and the manuscript.

• A Complete Intro to React http://btholt.github.io/complete-intro-to-react/ An online workshop intended to get you up to speed on modern development and give you an idea what it's like to develop an app in the React ecosystem.

• React Tutorial: Build a Yelp Clone https://www.fullstackreact.com/articles/react-tutorial-cloning-yelp/ A full-length walkthrough of how to build an app that uses routing, Google Maps integration, and more.

• Build a Music Player with React & Electron https://scotch.io/tutorials/build-a-music-player-with-react-electron-i-setup-basic-concepts https://scotch.io/tutorials/build-a-music-player-with-react-electron-ii-making-the-ui https://scotch.io/tutorials/build-a-music-player-with-react-electron-iii-bringing-it-all-together A 3-part tutorial that builds a desktop music app with React for the UI and Electron for the desktop functionality

• Interactive Guide to Server-side rendering with Webpack, React, React Transmit, CSS modules and more https://github.com/dimaip/server-side-rendering A Github project with a series of commits showing steps for putting together a basic app with server-side rendering and async data fetching.

• Building a Slack-Style Chat Application http://codeutopia.net/blog/2016/01/17/learning-react-basics-and-building-a-basic-application-prototype/ http://codeutopia.net/blog/2016/01/25/getting-started-with-npm-and-browserify-in-a-react-project/ http://codeutopia.net/blog/2016/02/01/react-application-data-flow-where-and-how-to-store-your-data/ http://codeutopia.net/blog/2016/02/08/using-webrtc-and-react-to-build-a-basic-chat-server/ http://codeutopia.net/blog/2016/02/15/improving-our-react-workflow-with-es6-and-functional-stateless-components/ A multi-part series that builds up a chat application

• SurviveJS - React http://survivejs.com/react/introduction A full book online book that shows how to develop a Kanban application. Covers key ideas of React, Flux, and advanced concepts such as styling. The commercial version has more content, but you can complete the basic tutorial for free.

• A Primer on the React Ecosystem http://patternhatch.com/2016/07/06/a-primer-on-the-react-ecosystem-part-1-of-3/ http://patternhatch.com/2016/08/02/a-primer-on-the-react-ecosystem-part-2-of-3/ A multi-part tutorial that demonstrates how to set up a React development environment, create React components and have them respond to data changes, and manage app state with Redux.

React Implementation Walkthroughs

• React Components, Elements, and Instances https://medium.com/@dan_abramov/react-components-elements-and-instances-90800811f8ca Clarifies the differences between these related terms.

• React Elements vs React Components vs Component Backing Instances https://medium.com/@fay_jai/react-elements-vs-react-components-vs-component-backing-instances-14d42729f62 Another solid comparison of what these terms mean, how React uses them, and how they differ.

• Dive Into React Codebase: Transactions http://reactkungfu.com/2015/12/dive-into-react-codebase-transactions/ A deep dive into the implementation of React's internal "transactions" concept

• Dive Into React Codebase: Handling state changes http://reactkungfu.com/2016/03/dive-into-react-codebase-handling-state-changes/ A deep dive into how React implements component state and setState()

• Reverse Engineering React https://vimeo.com/album/3930691 A video series covering the implementation of an alternative/miniature version of React called "Reaction". Note that it doesn't look at React itself, but does cover all the equivalent concepts in a simpler implementation.

• Tiny React Renderer https://github.com/iamdustan/tiny-react-renderer A heavily commented learning implementation of a bare basic React renderer

• How to write your own Virtual DOM https://medium.com/@deathmood/how-to-write-your-own-virtual-dom-ee74acc13060 https://medium.com/@deathmood/write-your-virtual-dom-2-props-events-a957608f5c76 A series of articles that build up a small Virtual DOM system from scratch.

• React.js Reconciliation https://www.infoq.com/presentations/react-reconciliation A video presentation digging into how React's reconciliation algorithm determines how to properly update nodes based on render output.

• React Fiber Architecture https://github.com/acdlite/react-fiber-architecture A description of React's new core algorithm, React Fiber

• On the Async Nature of setState in React http://thereignn.ghost.io/on-the-async-nature-of-setstate-in-react/ Digs into the behavior of setState, and whether it is actually always async or not. Some decent info, although the final section does make some strange statements.

Paid Courses and Books

Also see the course sites listed in the Community Resources page.

• React.js Program http://courses.reactjsprogram.com/courses The complete list of paid courses available on the site, including ES6/7 and Redux + Immutable.js. Courses on React Native and Universal React coming soon.

• React for Beginners https://reactforbeginners.com/ A complete course that teaches how to build full real-world applications. Includes videos and source code.

• Pro React http://www.pro-react.com/ The book teaches you how to successfully structure increasingly complex front-end applications and interfaces. You will learn how to use React completely, and learn best practices for creating interfaces in a composable way. You will also cover additional tools and libraries in the React ecosystem (such as React Router and Flux architecture).

  appendTo Instructor-led React Courses https://appendto.com/courses/react-training/ appendTo offers instructor-led, hands-on React training courses on React, Redux, React Native, ES6, and Webpack.