React for Beginners - Episode 1 - Setting up repository, babel, express web server & webpack

Valerii Iatsko
Valerii Iatsko / Blog
5 min readFeb 6, 2016

--

Episode 2 — building an isomorphic react+redux app and deploying it on Heroku is out!

I know, there’s a lot of articles in the network and boilerplates which are aiming to help you setting up the stuff to start your first React application. But what I’m worrying about is that they are still too hard, over-engineered and are leaving more questions than answers.

In these series, I assume that you know JavaScript and that you understand ES6 syntax (still, I’ll try to explain hard parts of syntax here).

In the React for Beginners cycle, we’ll create a full-stack application with authorization and admin panel using React/Redux on the frontend and nodejs on the backend. I’ll assume you already have nodejs, npm and git installed.

-> Most of the stuff here came up after I invested some time investigating https://github.com/erikras/react-redux-universal-hot-example works and how to build isomorphic app using the same approach step-by-step.

GitHub

First of all, we’ll work on our project on the GitHub. Go and create an account there and start creating a new repository.

Cool! Now, let’s clone it! To do it, go to your repository page and copy repository url:

Now, let’s “git clone” it. Open the terminal and enter commands (sure you can skip creating projects directory, and your repository url should be a bit different :P):

Creating npm’s package.json

Now, let’s create an npm’s package.json file there to keep track of our future dependencies and run-scripts of our project:

You can just hit “Enter” for every question asked or enter whatever you find fitting your project (regarding keywords, name, version, license, link to repository or author):

If you’ve done everything correctly, your project tree will look like something like this https://github.com/viatsko/react-for-beginners/tree/434417d3a07b1e460e725d535e347eeec8a43f64 (I’ll publish project tree step-by-step for you to check whether your actions were correct or not).

Babel

Nowadays, most of the projects and code written for modern javascript stack are written in ES6, Babel provides an ability to use ES6 in environments which are not supporting it in full as well as it’s providing plugin system which allows to include custom transformers such as jsx transformer for React.

Let’s set Babel up for our project!

What are all of these for?

  1. babel-register allows you to use babel in nodejs
  2. babel-polyfill emulates full ES6 environment (includes core.js)
  3. babel-preset-es2015, babel-preset-stage-0, babel-preset-react are presets to enable most of the ES6 features as well as some needed for react, and jsx.
  4. babel-plugin-transform-runtime allows using async/await operators (I’ll explain what are they for and how to use them later — we’ll use them a lot!)
  5. babel-plugin-transform-class-properties is for using static variables inside ES6 classes (it’s not a very common practice, but I find this syntax a little bit more natural for people to understand, I’ll explain this later)

We’ll also need to create .babelrc file inside the project’s directory:

This enables all the stuff we installed.

Your directory tree will look like this https://github.com/viatsko/react-for-beginners/tree/6f6148130a919ddcef6fe8c0630a65d3aeddddac (plus node_modules directory which I’ve been excluded from the repository).

Express

Express is the most popular web server used in nodejs world. Let’s add it to our project!

First, let’s install it as the dependency:

Now, we’ll need to create two files — server.js and server.babel.js. server.js will be used to initialize babel’s require hook and then will run server.babel.js.

Here’s server.js:

We’ll use express only to host static files in the first part. Here’s the server.babel.js:

If you want to understand express API deeper, here’s their official API documentation. I’ll only explain here the line process.env.PORT || 3000, which means that if we’ll run application with environment variable PORT set, it will use the port declared by it, otherwise it will use port 3000. In one of the next parts of the tutorial, I’ll explain deployment process to Heroku, which is setting PORT env variable to point application where to bind on.

Now, let’s start the application using command:

$ node server

If everything’s ok, you can now visit http://localhost:3000/ in browser and see “Cannot GET /” message:

This means that everything is working fine :)

Here’s our checkpoint https://github.com/viatsko/react-for-beginners/tree/f130535874df519bc73cbefdffa208c9616855be

Webpack

In the previous chapter we created a simple server using express to host static files, now let’s create a static file called public/index.html:

Express’s static module will automatically use index.html as the index file in static directories, so now, if you’ll start web server using node server again and go to the http://localhost:3000/, you’ll see a blank page with title “Hello, world”.

Now, let’s build that bundle.js!

We are going to install webpack, a special plugin for it to compile babel javascript files and react. Yep, we are finally going to write something in React. :)

After the dependencies installation, let’s create our client javascript file as src/client.js:

It does nothing but renders Hello, world! inside h1 element to container, which is an element with id=”root”.

We need to create that element in index.html. Simply add <div id=”root”></div>:

Now, to build bundle.js, let’s write a config file for webpack bundler:

Save it as webpack.config.js in the project directory.

What’s now? We need to run webpack in the way it will constantly watch and rebuild our bundle file; we also need to run our node server as its serves webpack’s bundle for us.

To solve this, let’s write a simple script in package.json to simplify our work.

Before that, we’ll need one super-useful package called concurrently:

After that, you’ll need to extend “scripts” section in your package.json to look like this:

And this is the final package.json:

Now, Ctrl+C all the running processes of your application and try to use npm run dev to start it:

If everything went fine, you’d now see large Hello, world text on http://localhost:3000/:

That’s it for the Episode 1!

Now you can play with React. If something went wrong, here’s the final code for this chapter https://github.com/viatsko/react-for-beginners/tree/58374deb088ec8ce3296898b10ae276897720829

Episode 2 about isomorphic apps is now available!

--

--