React is currently the most popular, modern UI framework for the web.

It's well known for its functional, declarative style and I would argue it's really easy pick up as a new developer.

The structure of an React application (especially with its JSX syntax) feels close to HTML, so it's easy to follow logic.

It's well worth trying React if you are a developer or are interested in learning front-end development.

When first building a React application you have a few options available.

You can add a couple script tags to the HTML and then React should work. However this isn't the recommended approach for a production site.
You can also run npx create-react-app my-app to have Create React App automatically setup a project for you with all the tools you need under the hood.
You can build the tooling yourself and learn more about how the tools work.

I tend to recommend the last option as knowing your tools enhances your ability as a developer.

The rest of this post will cover how to setup a React application with the build tool, webpack.

I have covered how to build JavaScript, HTML, and CSS using webpack in a previous post, so that is worth reading first if unfamiliar.

Prerequisites

Install Node.js to allow you to install and run JavaScript packages.

Steps

The two React dependencies we'll need to install is react and react-dom. So setup a new repository, run npm init to setup the package.json, then run npm install react react-dom.

Next, we'll create a file /src/index.js (this will be the application's entry point) with the following content:

import React from "react";
import ReactDOM from "react-dom";
import App from "./App.jsx";

ReactDOM.render(<App />, document.getElementById("root"));

then we'll create our App component in /src/App.jsx which prints a joyful message to brighten your day:

import React from "react";

const App = () => {
  return <h1>🎵 I can see clearly now the rain has gone! 🎵</h1>;
};

export default App;

Lets create a HTML template in /src/assets/index.html:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My app</title>
  </head>

  <body>
    <div id="root"></div>
  </body>
</html>

We'll setup webpack to use this HTML template and inject the JavaScript bundle once built.

React uses the latest Javascript syntax which needs compilation to make it friendly for all browsers. We'll also need to configure this within webpack.

Lets start by installing webpack and webpack-cli to bring in the basic webpack tooling for running a local development server.

Note: For this tutorial, I'm using webpack v5.x and webpack-cli v4.x.

We'll also need to install html-webpack-plugin for embeding the bundled javascript into our html template.

We can then add a file to the root of the project called webpack.config.js with the following configuration:

var HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/assets/index.html",
    }),
  ],
};

Add a script to the package.json:

{
	...
	"scripts": {
		"start": "webpack serve"
	}
	...
}

then run npm start. This will give us a lovely... error 😞

We need a loader to handle the funky JSX syntax from React. We'll use Babel for this.

Install the following packages:

babel-loader (for hooking up babel compilation into webpack),
@babel/core (the core babel package),
@babel/preset-env and @babel/preset-react (Babel presets for next generation JavaScript and for React).

Next we'll update the webpack config to look like this:

var HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\.jsx?/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react"],
          },
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/assets/index.html",
    }),
  ],
};

Here we are giving webpack a set of rules on how to handle .jsx and .js files. We want webpack to use the babel-loader to compile our JS files and we've specified to use the 2 presets we've installed to do it.

When you run npm start now, it should show up nicely in the browser: http://localhost:8080

There you go, you're setup and ready to build a react app.

You'll likely want to import CSS (or SASS). For that, check out my other tutorial, or have a browse at some webpack loaders on their site.

Edit this post on GitHub