👨‍🍳 How To Cook React with Webpack and Babel

Init our Project

Let's start by creating the structure of our new project.

After all, the commands above we will get this structure:

Let's init our new project.

By giving in -y flag you telling npm that it should take all default values.

For testing our initial structure let's add "console.log('Hello World!)" to src/index.js.

Now you can run your app by "node src/index.js" and in the console, you will see "Hello World!" message.

Next, move our running script to package.json. It allow us to run our app more conveniently and that's the place where all your project's scripts (start, test, deploy) will end up eventually. Let's run our app again but at this time using npm start.

Intro to Webpack

Webpack is a static module bundler for modern JavaScript applications. When Webpack processes your application, it internally builds a dependency graph that maps every module your project needs and generates one or more bundles.

I tried to show what Webpack does on the picture in simple way.

Now we can install webpack with all needed dependencies and start to configure it.

--save-dev - key which tells that these packages should not be included in the production bundle. It keeps your production code lightweight.

Let's init our dist/index.html before we start to configure webpack.

Let's create the config file for webpack.

Add this config to webpack.config.js .

Now you can run.

As an result, you can see that in /dist folder bundle.js file was created.

Open /dist/index.html file in the browser and check the output of index.js in the console. You can note that you can't debug your index.js file. To fix this you should add this line to webpack.config.js which tell Webpack to create source map file for bundle.js

Now you can rerun webpack --config webpack.config.js and try to debug your index.js file.

You can realize that after changing code in index.js you should refresh the page. To make our life easier let's implement live reloading and tiny server to serve our files. Let's change our start script in package.json

Webpack-dev-server - we use it for live reloading and tiny server which serve our files from /dist folder.

Now you can run npm start and open your browser to see results. You can find the path in the console:

You should see the output from /dist/index.html file in the browser and logging from /src/index.js in the console. Try to change code in /src/index.js to see how live reloading works.

Intro to Babel

Babel - allow us to write code with the newest JavaScript features which are not supported by most browsers yet. So Babel gets our code and transpile back to vanilla JavaScript so that every environment (e.g. browser) can understand and interpret it.

We will use Babel to transpile JSX (using in React) code to JavaScript. Let's see how Babel transpile JSX code (React App) to JavaScript.

JSX Code

You can see how Babel makes our life easier by allowing writing code as in the first example ;).

Let's install Babel and start playing with it.

Let's configure our package.json file and connect Babel to our app.

Next, we can install babel-loader which will be used to connect babel and webpack.

Let's say Webpack how to use Babel. Open webpack.config.js and add this lines:

We said Webpack on which files (all .js files) it should use babel-loader and which folders should be excluded (node_modules/ folder) from the process.

Connect React with Webpack and Babel

To connect React and Babel let's change our package.json file:

Let's tell Webpack about .jsx files. Open webpack.config.js file and do changes.

Create Simple React app

Let's install React and react-dom

Let's add the entry point for our React app in dist/index.html.

In src/index.js you can implement the first React App.

Now you can open the browser and see results.

Let's check how to live reloading works. Create /src/components/App.js file and add this code:

Do changes in /src/index.js :

Now you can open the browser and see updates without refreshing the page. Let's tell Webpack what to do with .css files. We need to install css-loader and style-loader.

Add rules to webpack.config.js
Create App.css file:
App.css:
src/components/App.js:

That's it. We just created a React app with Webpack and Babel.