Step by Step! React, Redux and Webpack

Part 1. Setting up React environment

The purpose of writing this article was to help beginners to start easily with React and answer their main question — How the hell does it work??? 👿

In this article, I want to describe workflow as clearly as I can, with all the explanations such as “why we need this library” and code examples step by step. I remember my first time with React and Webpack so I know with what problems beginners may encounter. This article consist of two main parts:

1. Setting up React environment
2. Creating project management app

If you can’t wait, you can go to the final Github repository: https://github.com/enkot/Minimal-React. 🏃

This article is aimed at people who want to start with React, have at least some background in JavaScript and familiar with Node.

Getting started

As mentioned above you need Node installed on your machine to continue working. In this project Yarn Package Manager used (why? see the link below), but you can still use NPM (comes with Node). How to install Yarn you can find here.

Facebook’s Yarn vs npm — Is Yarn really better?

First of all, on the project folder, initialize the project by typing command yarn init (or npm init). You can press Enter for every question.

$ cd my-project-folder
$ yarn init
or with NPM:
$ cd my-project-folder
$ npm init

This command just generates package.json file that stores all the info about our project.

The Boss Webpack and his band(le) 😎

Important concept of development with React, or just development, is splitting a project into small pieces, components. You create set of functions or class that solves a specific problem — put it in a separate file, then just include where you need in the project. But browser don’t understand include or import commands, it just get files and execute them one by one.

Here comes the Webpack. It gets every module your application needs, then packages all of those modules into one bundle file (if needed — few bundles). Installation:

$ yarn add webpack --dev
or with NPM:
$ npm install webpack --save-dev

Flag --dev (--save-dev) says that this dependency will be saved in devDependencies in package.json and required only in development.

Then, on the project folder, create configuration file. By default Webpack will be looking for webpack.config.js :

Property entry tells to bundle all assets from src/index.js together. The output property tells Webpack that final bundle.js file should be saved into dist folder.

The path.resolve() method resolves a sequence of paths into an absolute path.

On the next step add one necessary script to the package file:

We need it because there is not webpack command globally, but when run yarn start (npm start), Node takes local installation of Webpack.

Create two files in src directory, where one import function from another:

Now, create index.html file (in dist directory) and include bundle file inside body tags and run yarn start:

If you look, you may notice that bundle.js file appeared 👽 in dist directory. Open the page with browser and you should see — Hello WEBPACK. Profit! It works.

Moving on. ⏬

Only JavaScript is not enough

The main React development “tradition” is the use of ES6 and HTML-like syntax (JSX) in JavaScript (JS) code. It’s time to move on to the new JS standard.

• ES6 (EcmaScript 6) is a standard of JavaScript that gives a lot of new AWESOME features!!.
• JSX is just a syntactic sugar for the React.createElement function.

ES6, because it’s the 6th Edition of JavaScript, but officially, the name is ECMAScript 2015 Language (ES2015).

For example, JSX code:

<div className=”sidebar”></div>

compiles into:

React.createElement( ‘div’, {className: ‘sidebar’}, null )

Isn’t JSX easier to read? Definitely! But we need somehow transform JSX and ES6 into “old” JavaScript which understand all browsers (because only new browsers know about ES6). 🤔

Babel

And there is a solution — Babel. But it doesn’t have ES2015 and JSX compilers by default, Babel has been split into multiple packages:

• babel-core — ️the main package, contains JavaScript parser, utilities and helper functions. ⚙
• babel-preset-es2015 — “chief worker” that compiles ES6 into ES5.
• babel-preset-react — transforms JSX into JS.

$ yarn add babel-core babel-preset-es2015 babel-preset-react --dev

But even after installing a presets, you need to tell Babel to use them by creating a .babelrc file in your project directory:

What do we need next? We need tell the Webpack to somehow transform code, using Babel. For this Webpack uses the concept of loaders. Loaders are transformations that are applied on the source code of a module. They allow you to pre-process files as you import or “load” them.

$ yarn add babel-loader --dev

Now there are all the dependencies that we need to make Babel works. 🎉 We should add babel loader to configuration. It will be using babel-core with presets that we installed before for transformations.

All other loaders can be added to the rules property array. Here Webpack watches all .js and .jsx files, imported in the app (except those in node_modules folder), and loads them using Babel.

Webpack Dev Server

But it’s not very convenient every time open index.html manually in browser. And Webpack comes to the rescue again 😉. What we need is called webpack-dev-server:

$ yarn add webpack-dev-server --dev

The webpack-dev-server provides us with a simple web server and the ability to use live reloading. We just need to change our start script in package.json in order to work with webpack-dev-server:

The next step we should tell the server where to find files to serve:

Now, if you start server (yarn start), open the page (localhost:8080) and change any file, browser will reload the page. Great! 🕺

CSS loader

The core philosophy of Webpack — everything is a module, CSS and images can also be modules! So, let’s add possibility to import CSS files as modules in our project. Two loaders needed for this:

• css-loader —takes a CSS file and returns the CSS string with resolved imports and url(...).
• style-loader — takes CSS string from css-loader and actually inserts it into the page.

$ yarn add css-loader style-loader --dev

The final Webpack config file should look like this:

Actually React

The last step for this part of article is installing actually React. As Babel, it consist of a few packages:

yarn add react react-dom

Do not worry, react-dom is needed to manipulate the DOM and will be only used to render entry (root) React element. Change index.js (you can now remove upper.js file) and run yarn start:

Open the page and you should see welcome text and input. Try to change input and welcome text will be also changing 😱. How this code works and how to create simple project management app will be explained in the next part.

That`s it! I hope this article was useful.😃 🎓

If you like this post, please 👏 (40-50 times) for it on Medium and share it on Twitter, Facebook.

The part 2 is coming soon…