explaingit

petehunt/react-howto

11,540Audience · developerComplexity · 1/5Setup · easy

TLDR

A short guide by an original React engineer telling beginners exactly what order to learn React and its surrounding tools, and which ones to skip at first.

Mindmap

mindmap
  root((react-howto))
    Learning order
      React basics
      npm
      webpack
      ES6
      Redux
    Key advice
      Skip tools early
      No Flux at start
      Avoid server rendering
    Audience
      HTML CSS JS beginners
      New React learners
    Format
      Plain Markdown
      No code to run
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Read this guide before starting to learn React to avoid wasting time on tools you do not need yet.

USE CASE 2

Use the recommended learning order (ReactnpmwebpackES6Redux) as a personal study roadmap.

USE CASE 3

Share with a teammate or student who is confused by the React ecosystem to give them a clear starting point.

Tech stack

ReactJavaScriptwebpacknpmRedux

Getting it running

Difficulty · easy Time to first run · 5min

This is a plain Markdown reading guide, nothing to install or run.

License terms were not described in the explanation.

In plain English

React-howto is a short written guide to help beginners make sense of the React ecosystem without getting lost in the wrong tools at the wrong time. It was written by one of the original Facebook engineers who helped build and open-source React, and is aimed at people who already know basic HTML, CSS, and JavaScript but find the surrounding landscape of React-related tools confusing. The core advice in the guide is to learn things in a specific order and not skip ahead. Start with React itself, using only the official tutorial and a plain HTML file. Only after getting comfortable with React should you move on to npm, then bundlers like webpack, then ES6, then routing, and finally state management via Flux or Redux. The guide emphasizes that most apps do not need all of these tools, and that adding them too early is a common source of confusion. The guide pushes back on several pieces of common advice from the time it was written. It argues that Flux (a data management pattern from Facebook) is often added before it is actually needed, and that you will know when you need it because your components will start to feel broken without it. It also notes that the popular Create React App tool is a good starting point but has limits, and that server-side rendering and inline styles are advanced topics most beginners should ignore entirely. The document is a plain Markdown file with no code to install or run. It is a reading resource, not a library. It was written in the early years of React when the ecosystem felt particularly fragmented, and some of the specific tool recommendations (such as avoiding require.js) reflect that historical context. The general principle, which is to resist learning the entire stack at once, remains a practical approach for anyone starting out with a new framework.

Copy-paste prompts

Prompt 1
I am following the react-howto learning order. I know basic HTML, CSS, and JavaScript. Write me a minimal React counter component I can run in a plain HTML file with no build tools.
Prompt 2
Based on the react-howto advice, I am ready to add npm and webpack to my React project. Generate a minimal webpack config and package.json that bundles a single React app.
Prompt 3
I have been using React for a few weeks following react-howto. Help me recognize the signs that my app actually needs Redux rather than local component state.
Prompt 4
Explain what Create React App sets up for me and where its limits are, so I know when I will need to eject or switch to a custom webpack config.
Open on GitHub → Explain another repo

← petehunt on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.