« Previous Tutorial Next Tutorial »

All right, guys. We’ve got our editors installed and configured, our database set up, our testing ready to go, and our API responding to calls to its (single, for now) endpoint. We’ve established good coding practices via linting, got our github repo set up, and prepared our site for user authentication. It’s finally time to tackle the thing that’s most obviously been missing from this series called Five Minute React: Facebook’s React.js framework.

If you’re brand new to React, great – we’re going to cover things from the ground up in the same, bite-sized, five-minute chunks we’ve been doing so far. If you have some React experience, you might still find this valuable. Every time I work with React, I learn something new about it, and hopefully that’ll prove true for you as well.

Let’s talk for a minute about Create React App, which is an awesome project that seeks to reduce all of the stuff one has to do to get set up with a React application and instead lets you just get to work. It installs everything you need and lets you get your app up and running in just four lines in the command prompt. Tools like Webpack are hidden, allowing you to just focus on writing React code, although at any time you can “eject” Create React App and gain control over your node_modules folder, webpack config, and the like (though this is a one-way process – once you do it, it’s done).

Create React App is incredible, seriously. I could probably just tell you to download and run it, and skip making the next couple of tutorials, at least. The reason I’m not doing that is because presumably you’re here to learn how things work, and those things include under-the-hood stuff like Webpack. You should check Create React App out in your own time, though, because it’s great.

We begin, as usual, with installing. We’re going to need a few things right off the bat to start working with React, and a few other things that we won’t need just yet but want to have available when we do need them. So today we’re going to cover installing React, Babel, Webpack, and the plugins necessary to allow Webpack to do its job.

Some of you are probably thinking something along the lines of “That all sounds great … what the hell are you talking about?” That’s a fair question. Let’s explain what this stuff is:

React – React is a JavaScript framework with which we can build web applications. What this means is that React provides a suite of tools to help us keep from having to reinvent the wheel when it comes to things like manipulating the DOM and filling in components of our application with data harvested in our API. It has a lot of what some programmers call “automagic,” which means when you feed it information or call certain methods, stuff just happens without you having to a) write the code or b) even tell it to happen. React combines beautifully with Redux, which we’ll get to later, and which allows us to cleanly track and manipulate the state of our entire application. Much more on app state will be coming in the future Redux videos. For now, think of React both a foundation on which to build your front-end, and a toolbox full of stuff that helps you build.

Babel – Babel is what’s called a “transpiler”. It’s a program built to take in code in one language, and spit it out in another. In our case, that means we can write ES6 and JSX, and Babel will automatically convert them to ES5, meaning our application can run on a much wider array of browsers. As a very simplified example, Babel would take this code:

const myFunc = (myParam) => {
};

and turn it into this code:

var myFunc  = function(myParam) {
};

Babel can do a lot more than that, but that’s our principal use case. It allows us to write in React’s weird but much cleaner JSX language, which is sort of a JavaScript/HTML hybrid, rather than having to write all of our React components in pure JavaScript.

Webpack – Webpack is a bundler. It can take a hundred separate .js files and compile them all into a single build.js file. It can take a hundred separate .scss files and compile them all into a single build.css file. It can also optimize those files to a degree, filtering out unused functions, for example, and doing some amount of caching on repeated code. The benefits of this are multifold, but a few of them include making far fewer http requests, which speeds your site significantly; better compression; and just generally being able to break your code out into smaller files for ease of use.

All right, with that explanation, let’s get to installing! To a terminal window or command prompt we go. Type the following:

yarn add react@16.1.1 react-dom@16.1.1 webpack@3.4.1 babel-loader@7.0.0 babel-core@6.24.1 babel-jest@20.0.3 babel-preset-react@6.24.1 sass-loader@6.0.6 node-sass@4.5.3

That’s a whole bunch of stuff, so let’s break it down real quick:

  • React and React-Dom are necessary components for React development
  • Webpack is, well, Webpack
  • Babel-Loader and Babel-Core let us use Babel while compiling with Webpack
  • Babel-Jest gives us hooks for jest testing
  • Babel-Preset-React gives us hooks for JSX transpiling
  • Sass-Loader and Node-Sass allow us to use Webpack to bundle .scss files into a single .css file

All right, that’s the basics. We’re at about five minutes, so let’s wrap up for now. In the next tutorial, we’ll get started configuring Webpack to use Babel and output our various build files. Later!

« Previous Tutorial Next Tutorial »