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.
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.
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.
Jest Snapshots and Beyond — Rogelio Guzman Covers Snapshots, Serializers and Jest’s platform/ecosystem.
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.
The Yarn Workflow Pay attention to the “additional reading” sections in this guide.
Top comments (0)