React

Original MOTTO: An easy way to learn React through examples.

Updated MOTTO: Learning React topic by topic.

Table of contents

Intro

• 00.0 Intro to React
• 00.1 JS beyond JavaScript
• 00.2 Functional Programming patterns
• 00.3 ES2015 / ES6 essentials

Getting started

• 01.0 First steps with React
• 01.1 React Elements
• 01.2 JS Module Systems

Components & data

• 02.0 Components
• 02.1 Props
• 03 Local state
• 04 Methods
• 05 Controlled components & forms
• 06 Lifecycle events
• 07 Conditional rendering

Ecosystem

• 08 Redux
• 09 Packages (PropTypes, React Router, Redux Logger, Redux Thunk, Axios)
• 10 Unit tests
• 11 Webpack (custom toolchain, SSR)
• 12 Full client app — layouts

Before starting

---

2/21/19 UPDATE: Many things happened in React and its ecosystem. I will try to update the sections to React 16.8.\* (Hooks and some interesting new APIs) and go deeper in the “Life cycle” paragraph for class-based Components. Also, I will be splitting sections in sub-sections for better understanding and proper grouping.

---

After several years of contributing, mentoring and working with JS and React, I decided to “put together” some notes linked to recurrent doubts and obstacles that friends and co-workers have to face daily.

This is a pure practical guide (ps, it was at the beginning): please, keep the practical intention present throughout these "shared notes"; I don't have the intent of challenging the great and plentiful coaching classes, nor the books/"white papers" that today, you can easily find anywhere (starting with Facebook's own proprietary documentation).

My aim, as I stated before (even with the latest add-ons and updates), is -still- clearly pragmatic. You will see some concepts and technicalities (as general and well-needed context), but you should (perhaps must) complement this "joint exercise" with other materials. I try to avoid quoting or referencing, given that an important part of your training is discovering good sources and picking those that satisfy your own and extremely personal "way to learn". However, taking a look at the mother source will not hurt you: react.

Getting Started

Pre-requisites

You should have an intermediate knowledge of JavaScript, including some exposure to ES2015 / ES6. The lessons introduce more advanced topics (closures, currying, the event loop) as needed, but a missing JS foundation will make the React parts much harder than they need to be.

Concretely, before starting you should be comfortable with:

• ES6+ syntax: let/const, arrow functions, template literals, default parameters, rest/spread.
• Destructuring (objects and arrays) and shorthand object properties.
• Modules: import/export (default and named).
• Higher-order functions and array methods: .map(), .filter(), .reduce().
• Asynchronous JavaScript: callbacks, promises, async/await.
• The this keyword and how its value is determined.
• Prototypes and class syntax.

If any of these are unfamiliar, work through the Intro chapters first and come back when they feel comfortable.

Before proceeding with the tutorial, be sure that you have installed or, install...

Required

• Node.js
• Package manager (npm which comes with Node or yarn)

Note: packages, dependencies, libraries... are going to be referenced on-demand. Those whose scope is bigger will be addressed in 09_packages

Recommended

• For Windows users: Git bash https://git-scm.com/downloads as a CMD replace, or, PowerShell

Alternatives

• yarn https://yarnpkg.com/lang/en/docs/install/

  Alternative to npm. I will be using yarn (At the moment of writing this doc there are no major differences between the two.)

  Learn more about the npm registry consumed by both, yarn and npm