Fig. 6 A Guide for Developers

React.js From Scratch: Part 1 — An Introduction

We're going from 0 to React in the longest, most overly-explained way possible.

Written by Andy Rossi January 14, 2016

I’ll easily admit that I am new to this whole React thing. What little knowledge and experience I do have is appended to many years of development with other platforms. Again, I don’t know everything about React, but I understand a lot (not all) of the prerequisites.

For those who are just getting into the game, React documentation is built on far too many assumptions which stunt a possible quick startup. It’s tough. It’s confusing. There are many moving parts that are expected to exist within a project, but those parts are provided with minimal explanation or context.

The average React starter kit is a huge mess of tooling. Why are these things needed? What do they actually do? Are these specific tools really required, or are they just fluff?

Wha? Huh?

Throwing aside application development concepts such as MVC (we will cover that in a bit), let’s take a look at some prerequisites to start up a basic “Hello, world” React project. The best results are gotten with Node. Going down the Node.js rabbit hole, the React documentation recommends using a CommonJS module loader such as Browserify or Webpack. Wha?

What is CommonJS? What is a module? What does Browserify or Webpack have to do with it? Which one should I choose and why?

The documentation continues by recommending the installation of the babel-preset-es2015 package if you plan on using ES6.

If you choose to go sans Node.js (an option in the starter docs), the journey still requires the use of Babel with prebuilt React core libraries. Just make sure you grab the correct Babel version. But first, what the heck is Babel and why should we care?



Do you see where I am going with this? There is no quick start with React. You need to understand the massive (MASSIVE) amount of tooling overhead that comes with any React project.

Where should we start?

I’m writing a series on how to create a React project from scratch. Not to steal from Carl Sagan (okay, I’m stealing) but we need to first invent the React universe. The available starter kits out there are super helpful, but without context, it feels like just tracing over somebody else’s work and not making it your own. Each piece of the React puzzle should be understood enough to allow for any developer to swap it for something better, or tweak the parts to improve the whole. Context and understanding are key components to allow for this.

It may be a bit ambitious, but the goal of this series is to get somebody from 0 to “Hello, world” with nothing, while simultaneously explaining the tooling needed for a competent and lightweight development environment. Again, no assumptions will be made.

Also, I plan to learn a few things along the way! I have built a couple simple React applications, but it was using a series of black box plugins that just worked. I still want to know what are in these boxes and why (and if) they are necessary.

Where are we going?

Follow along as I take you from nothing to something. We will talk about Node.js, task runners, ES5 and ES6, JSX, and any other satellite topics that a “Hello, world” React app depends on to exist.

Nothing will be discussed without context and links to resources. Remember, I’m learning too. I am the type of person that needs granular understanding to feel comfortable with any language, and I hope that type of understanding can benefit you.

Part 2 will be posted soon.

Here’s Part 2!

We can do this.