How to Create a React Application from Scratch with Babel and Webpack

Photo by Sun Lingyan on Unsplash

If you have worked with creating a React application, you have probably used create-react-app or Gatsby to create your react application. While this is great for creating the application, it doesn’t really help us understand what underlying mechanism allows a react application to be compiled into plain JavaScript that the browser understands.

To really understand what’s going on, we will go through a tutorial of creating a react application from scratch.

There are really two parts to the setup:

• Babel
• Webpack

Before we go through the tutorial, let’s briefly go over what these are.

Babel

Babel is a JavaScript compiler that transforms newer JavaScript syntax into older JavaScript syntax (aka ES5 syntax). It also includes presets that can convert JSX into JavaScript syntax.

Webpack

Webpack is a module bundler that takes all the files in your project and outputs static assets that represent these files. These static assets consist of bundles in which one of these bundles actually gets ran on the browser. It consists of a few things:

• entry point: which file webpack is supposed to parse and generate bundles
• output: where your latest bundles would be located after compilation
• loaders: support additional functionality that allows webpack to parse other kinds of files into something the browser can understand(For example, css-loader, style-loader).
• plugins: key pieces to webpack’s compilation process that can help optimize the performance of the application

Tutorial

Step 1: Setup a directory and called it webpackReactSetup. In the same directory, add a public folder and an src folder.

Step 2: Inside the public folder, create an index.html with the following content:

Step 3: Now we need to install some babel packages. As mentioned before, these babel libraries will help transform ES6 and JSX logic into something the browser can understand. On the terminal, run npm install — save-dev @babel/core@7.1.0 @babel/cli@7.1.0 @babel/preset-env@7.1.0 @babel/preset-react@7.0.0.

the preset libraries(preset-react and preset-env) help us transform JSX and ES6 syntax into original flavors of JavaScript the browser understands.

Step 4: Now add a .babelrc file under the project root directory with the following content:

Now that we have set up babel, let’s take a look into webpack packages.

Step 5: Let’s install webpack packages. On your terminal, run npm install — save-dev webpack@4.19.1 webpack-cli@3.1.1 webpack-dev-server@3.1.8 babel-loader@8.0.2.

We install these packages in order to bundle different kinds of files. Also, in order for our browser to reload every single time a change occurs in our React application, we need to install webpack-dev-server as a library.

Photo by Alexandre Debiève on Unsplash

Step 6: Under the root directory, create a file called webpack.config.js with the following content:

There is a lot going on here so let me digest the most important points from this file:

• entry point: this tells Webpack where it should start doing its bundling.
• module: tells Webpack how to handle different kind of files when it is transforming them. For example, on line 10 to line 13, it contains the rule to use babel loader to transform JSX and ES6 syntax into something the browser can understand.
• output: this tells us the location to put our bundled folder. It also tells our webpack-dev-server where to serve our file.

Step 7: Now we need to install two main React packages that are absolutely crucial. Run npm install --savereact@16.5.2 react-dom@16.5.2.

Step 8: Go to your src folder under your project and create an index.js with the following content:

This is your entry point for the webpack. So in order for the babel and webpack to do their magic, it takes an App.js and transforms it into pure JavaScript and CSS on the browser.

To continue, let’s create an App.js with the following content:

Step 9: With the final piece, let’s add a package.json with the following content:

This JSON file will be used by npm or yarn(really depends on your preference) as a way to manage your packages/dependencies for your project.

Now you can run npm start and your application should be starting on localhost:3000.

Photo by krakenimages on Unsplash

Wait! How come we didn’t talk about CSS preprocessing? What happened?

That’s because we didn’t set up the loaders for CSS just yet. In fact, let’s do one more thing.

Go to your src directory and add the following CSS file:

Now go back to your app.js and un-comment the line for importing the app.css file. Try re-running npm start and this will happen:

Oh no! Then what do we do?

That’s a topic we will discuss in the future.

Happy coding!

More content at plainenglish.io