The React Platform
I get a decent amount of questions that roughly resolve to “wtf is all this stuff in node_modules?” from friends and coworkers when they start learning React. Typically this is because they found a boilerplate like Create React App or a tutorial that only gave “run this, run that” commands. This post is a collection of links that give more insight into the tools that are used in such boilerplates and why we use them.
If you are already wondering what goes on under the hood I hope this will point you in the right direction. It is not required reading for getting started with React and similar technologies.
The first technology is less of a specific technology and more of a platform. React has become a style of thinking about a class of problems related to rendering. Notice that I didn’t say rendering UI because you can do some really cool stuff with the Fiber reconciler.
- React Codebase
The overview of the React codebase will touch on Renderers, Reconcilers, the event system, colocating tests, development vs production builds, and how React handles warnings and invariants.
- React Implementation Notes
The React implementation notes cover making React from scratch along with linking to more documentation on components, their instances, and elements. It goes over mounting and updating in more detail as well as a nice list of what got left out of the document.
- Fiber Architecture
Fiber is a new reconciler that many people are talking about.
- React Design Principles
What matters to React as a project and what kinds of changes you can expect in the future.
- Thinking in React
This doc is useful if you don’t have much experience with the React platform or similar component-based projects.
- The Babel Handbook
The babel handbook is split into two sections. One for users of plugins and one for authors of plugins. Roughly these sections are “How to Use Babel” vs “How Babel Works Internally”.
- AST Explorer
A tool that allows you to explore the AST for a given compiler.
- Awesome Babel
An awesome list focused on babel. Check this out if want to see what’s possible with plugins.
- TC39 Proposals
This is a list of active proposals for inclusion in ECMAScript. Typically each of these proposals has a corresponding babel plugin and can be found in the stage-n set of presets. Each year’s spec can be found in the ESnnnn presets.
- Learn ES2015
If you haven’t been keeping up with recent ECMAScript advances, this will get you up to speed.
- Try Babel
This is will let you type code on the left and see what babel transforms it to on the right. You can choose various plugins.
Jest is a testing platform, developed as a monorepo of packages.
- Jest Snapshots and Beyond — Rogelio Guzman
Covers Snapshots, Serializers and Jest’s platform/ecosystem.
- Flow Typing a React Codebase — Forbes Lindesay
A great introduction to static typing with Flow. Starts with basics, moves into Flow with React, and moves into advanced types with generics.
- The Flow Type System
Information about how Flow’s type system works. Covers soundness, completeness, and some more interesting comparisons to other language’s type systems.
Prettier is a pretty printer in the vein of Wadler’s [pdf]. This effectively means being able to get rid of every [nit] in code review and lint rules relating to code layout and formatting. Code layout becomes something you never think about. If you’ve never worked in a language with a pretty printer like this before it’s sure to change your workflow for the better.