react-tutorials.md

React Tutorials

Basic Introductions

• React Documentation
  https://facebook.github.io/react/docs/hello-world.html
  https://facebook.github.io/react/tutorial/tutorial.html
  The official React documentation, recently rewritten with an excellent set of tutorials, explanations, and API information.

• Modern Web Development with React and Redux
  http://blog.isquaredsoftware.com/2017/02/presentation-react-redux-intro/
  An up-to-date HTML slideshow that introduces React and Redux, discusses why they help make applications easier to write via declarative code and predictable data flow, and demonstrates their basic concepts and syntax. Includes several interactive React component examples.

• 30 Days of React
  https://www.fullstackreact.com/30-days-of-react/
  A tutorial series that walks you through how to use React, from the ground up, in 30 bite-size articles covering everything from "What is React?" to data management to testing and deployment.

• 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 to the Future
  http://elijahmanor.com/talks/react-to-the-future/dist/#/
  A well-written HTML slideshow describing what React is, what makes it special, and how to work with it

• 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

• 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.

• 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 Productive 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.

• 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.

• React Workshop
  https://github.com/jesstelford/react-workshop
  A self-directed set of workshop lessons that teach React basics.

• How React Do?
  http://blog.jfo.click/how-react-do/
  A tutorial written by someone as they learned React, stepping up through a series of React concepts.

• React Tutorials for Beginners
  https://www.youtube.com/playlist?list=PL6gx4Cwl9DGBuKtLgPR_zWYnrwv-JllpA
  A set of video tutorials introducing React concepts

• A Walk Through My "Just Enough React To Get You Into Trouble" Presentation
  http://www.globalnerdy.com/2016/07/22/a-walk-through-my-just-enough-react-to-get-you-into-trouble-presentation-at-tampa-code-camp-2016/
  A blog post version of a talk introducing React's core concepts, and demoing them in JSFiddle

• React Intro
  https://docs.google.com/presentation/d/19DaabQG8CB4INKGpaHao0hIXcB7zmETg4IHOZkF7MPM
  A slideshow from Lee Byron, one of React's early team members, giving an overview of what React is, how it works, and how it can fit into applications.

• Events in React
  https://www.kirupa.com/react/events_in_react.htm
  An introduction to React's event handling system, including useful tips and some gotchas

• React 101: Condensed
  http://erikaybar.name/react-101-medium-and-slides/
  Links to an HTML slideshow and accompanying blog post that introduce just enough info to give you a taste of what React is about.

• JSX In Depth - an interactive tutorial
  http://blog.klipse.tech/javascript/2016/12/14/jsx.html
  An interactive version of the "JSX in Depth" tutorial from the React docs

• React events in depth
  https://www.youtube.com/watch?v=dRo_egw7tBc
  A video chat between Kent C Dodds, Dan Abramov, and Ben Alpert, discussing how events work in React

React Project Setup

• Simple React Development in 2017
  https://hackernoon.com/simple-react-development-in-2017-113bd563691f
  An excellent set of instructions for setting up a React project with minimal fuss and effort needed. Includes links to some useful resources, and info on deploying the app to production.

• 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).

• Kick-Start React Projects with Create-React-App
  https://www.sitepoint.com/create-react-app/
  Some quick tips on how to use Create-React-App to create a new React project and tweak the setup.

• 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

• The Minimal React Webpack Babel Setup
  https://www.robinwieruch.de/minimal-react-webpack-babel-setup/
  A clear walkthrough for the key steps needed to set up a useful Webpack+Babel config from scratch for a productive React dev environment. Very helpful if you choose not to use Create-React-App.

• How to get Create-React-App to work with your API
  https://www.fullstackreact.com/articles/using-create-react-app-with-a-server/
  An example of how to set up a server to work with Create-React-App

React Concept Overviews

• React's Five Fingers of Death: Master these concepts to master React
  https://medium.freecodecamp.com/the-5-things-you-need-to-know-to-understand-react-a1dbd5d114a3
  A humorously-titled quick introduction to some of React's basic concepts

• 13 Things you need to know about React
  http://aimforsimplicity.com/post/13-things-you-need-to-know-about-react/
  A list of useful key concepts to understand if you want to "speak React"

• React Interview Questions
  https://tylermcginnis.com/react-interview-questions/
  Assorted questions and answers that come up while learning React

• React Cheat Sheet
  http://reactcheatsheet.com/
  A filterable list of React's APIs and concepts

• React Cheat Sheet
  https://ihatetomatoes.net/react-cheat-sheet-pdf/
  A downloadable PDF with snippets demonstrating uses of React's syntax and APIs

• The philosophy of React
  https://medium.com/@malinnaleach/the-philosophy-of-react-e2c126c61af3
  Some high-level overviews of React's concepts, like state, props, and control flow

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+Redux Workshop
  https://github.com/btholt/react-redux-workshop
  An online workshop that gets you up to speed on using React and Redux

• 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.

• Building Your First Real-World React Application
  http://academy.plot.ly/#react
  Max Stoiber's full-size tutorial on building an app using React. Includes an intro to React, project setup, using external libraries, data management with Redux, use of Immutable.js, and testing with Jest.

• React 101
  https://blog.tighten.co/react-101-building-a-gif-search-engine
  https://blog.tighten.co/react-101-using-redux
  https://blog.tighten.co/react-101-routing-and-auth
  https://blog.tighten.co/react-101-part-4-firebase
  A great 4-part series that progressively builds up a Giphy search engine

• #ReactForNewbies: Building a Todo App with Create-React-App
  https://edemkumodzi.com/reactfornewbies-building-a-todo-app-with-create-react-app-part-1-5aae4bd637ee
  https://edemkumodzi.com/reactfornewbies-building-a-todo-app-with-create-react-app-part-2-f846e2d8b820
  An ongoing series, written by someone who is writing the posts as he learns React.

• Rock and Roll React Tutorial
  http://myappincome.co.uk/rock-and-roll-reactjs-tutorial-part-1/
  http://myappincome.co.uk/rock-and-roll-react-js-tutorial-part-2/
  http://myappincome.co.uk/rock-and-roll-react-js-tutorial-part-3/
  A tutorial that builds a React version of the Ember "Rock and Roll App" example. Covers more intermediate topics, and is aimed at new React devs trying to grow their knowledge.

• Find Your Park with React and the DarkSky API
  https://appendto.com/2016/10/find-your-park-with-reactjs-and-the-darksky-api/
  Demonstrates building a small app that displays info on a Google map

• React Daily UI
  http://codepen.io/collection/DoLZRm/ https://www.fullstackreact.com/react-daily-ui/001-sign-up-form/
  https://www.fullstackreact.com/react-daily-ui/002-checkout/
  https://www.fullstackreact.com/react-daily-ui/003-landing-page/
  https://www.fullstackreact.com/react-daily-ui/004-calculator/
  A series of tutorials that build small apps, and explain React features and concepts that are used in the process.

• Building your First React Javascript App
  http://www.primaryobjects.com/2016/09/19/building-your-first-react-javascript-app/
  A tutorial that builds a small app demonstrating form inputs and remote data requests.

• From React to Flux to Redux
  http://react.tips/from-react-to-flux-to-redux/
  Four implementations of a shopping list application, built with varying approaches to help you see the differences: React/ES5, React/ES6, React/Flux/ES5, React/Redux/ES6.

• Create an Instagram-like App with Node.js, React, and Redux
  http://www.eloquentwebapp.com/instagram-app-node-react-redux/
  An in-depth tutorial that demonstrates several advanced React concepts, including routing, hot loading, use of Redux and redux-saga, and more.

• Building a chat component in React and ES6
  http://www.zsoltnagy.eu/building-a-chat-component-in-react-and-es6/
  An introduction to React by building a small chat app

• Learning React with Create-React-App
  https://medium.com/@diamondgfx/learning-react-with-create-react-app-part-1-a12e1833fdc
  https://medium.com/@diamondgfx/learning-react-with-create-react-app-part-2-3ad99f38b48d
  https://medium.com/@diamondgfx/learning-react-with-create-react-app-part-3-322447d14192
  https://medium.com/@diamondgfx/learning-react-with-create-react-app-part-4-9f843c8c1ccc
  A tutorial series that introduces React's concepts, using the Create-React-App tool to handle starting the project.

• Retrogames Library with Node, React, and Redux: Server API and React Frontend
  https://scotch.io/tutorials/retrogames-library-with-node-react-and-redux-1-server-api-and-react-frontend
  Part 1 of a series building an application using Node, React, Redux, and MongoDB with Mongoose.

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).

• React: Up & Running
  http://shop.oreilly.com/product/0636920042266.do
  http://www.phpied.com/react-up-and-running/
  A book that starts with 0 setup and no tools, just React, then moves on to introduce additional syntax while building a CRUD app. Also covers linting, testing, build processes, and data management.

  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.

• The Road to Learn React
  http://www.robinwieruch.de/the-road-to-learn-react/
  A pay-what-you-want ebook that teaches a good foundation for React itself, including React component patterns, working with data (fetching, sorting, and filtering), unit testing, and more. The author's blog posts are excellent, and this book is definitely recommended.

• Learn Pure React
  https://daveceddia.com/learn-pure-react/
  A paid ebook that lays out a guided step-by-step process for learning React quickly and in the right order, with a focus on the fundamentals of React.

• Best ReactJS Books in 2017
  https://reactdom.com/blog/reactjs-books
  A list of available React-related books, with some quick reviews.