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.

React

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.

Babel

Babel is a JavaScript compiler. It allows us to operate on an AST to transform our code enabling powerful adaptations. The most common use of babel is to use it to compile newer versions of the ECMAScript spec to older versions. For example, you can use babel to compile ES6 JavaScript to ES5 so that it can run in browsers. This is useful because we have a lot of platforms on which JavaScript can run (node, browsers, iOS/Android, etc) and not all of them support the same language features.

  • 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.
  • Babylon
    The JavaScript parser used in babel, it produces a syntax tree similar to ESTree.
  • 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.

Webpack

Jest

Jest is a testing platform, developed as a monorepo of packages.

Flow

  • 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

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.

Yarn

Yarn is a newer package manager for JavaScript. The following links cover why yarn was created and what it’s useful for.