Tue Apr 11 2023

Set up a React application from scratch

In a previous guide we showed how we can set up a React application with create-react-app. Create-react-app is great, it makes the set up very smooth and we can start a new project within a minute or so. But sometimes, it makes more sense to set it up from scratch. For example, if you want to make a smaller component that you want to share with people through e.g npmjs or similar, it comes with to much overhead I would say and too much unnecessary dependencies. Create-react-app is great for a full application, but as said, for smaller libs or components it is more preferred to create it from scratch and just install dependencies you really need.

Prerequisites

npm installed
node installed

Let's start!

1. Create a project folder and initalize it

mdkir my-project
cd my-project
npm init

2. Install react and react-dom

npm install react react-dom

3. Install dev dependencies

We will install webpack in order to bundle our code

npm install --save-dev webpack webpack-cli

We will install babel in order to transpile our React and ES6 code to targeted JavaScript version

npm install --save-dev babel-loader @babel/core @babel/preset-react

Write some code

All right, now we have all dependencies installed. So now, lets write our code and configs inside the project.

Create webpack.config.js in the root

const path = require("path");

module.exports = {
  // Where we start our application with ReactDOM.render()
  entry: "./src/index.js",
  // Mode of application (development/production)
  mode: "development",
  // When our code is bundled, it will end up in a folder called dist and a filed called bundle.js will contain all transpiled code
  output: {
    filename: "bundle.js",
    path: path.resolve("dist"),
    publicPath: "/",
  },
  // When a .js or .jsx file is captured, our babel-loader will do its magic
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: "babel-loader",
      },
    ],
  },
};

Check the comments for explanation

Create a .babelrc file in the root

{
  "presets": ["@babel/preset-react"]
}

Create index.html in the public folder

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My title</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="../dist/bundle.js"></script>
  </body>
</html>

Create our src/index.js

import React from "react";
import ReactDOM from "react-dom";

import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Create App.js

import React from "react";

export const App = () => {
  return <div>This is our app component</div>;
};

export default App;

In package.json, add this script

"scripts": {
  "dev": "webpack --mode development"
}

Build project

npm run dev

If you look in the project root, you will see a new folder that has been created called dist. If you open the folder, you will see a new file called bundle.js has been created. This is the file that will be referenced by our index.html and contains our transpiled code. To see it in the browser, copy the path and paste in a new browser window and you should see "This is our app component" text.

Set up webpack to serve our application

If you don't want to access the index.html through the path, we can install webpack-dev-server and configure our webpack.config.js a bit.

npm install --save-dev webpack-dev-server html-webpack-plugin

webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  // Where we start our application with ReactDOM.render()
  entry: "./src/index.js",
  // Mode of application (development/production)
  mode: "development",
  // When our code is bundled, it will end up in a folder called dist and a filed called bundle.js will contain all transpiled code
  output: {
    filename: "bundle.js",
    path: path.resolve("dist"),
    publicPath: "/",
  },
  // When a .js or .jsx file is captured, our babel-loader will do its magic
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: "babel-loader",
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: "./public/index.html",
    }),
  ],
  devServer: {
    static: "./dist",
    compress: true,
    port: 9000,
  },
};

package.json

Let's add a new script in package.json.

"start-dev": "webpack serve"

Rebuild:

npm run dev

And start the server with:

npm run start-dev

Navigate to http://localhost:9000/ and you should see the application up and running.

Outro

All right, that's it folks. In todays guide we learned how we can set up a React application from scratch, and also how we can configure webpack to serve our application with webpack-dev-server.

Next step is to deploy our application to the cloud, see our guide on how to do that here.

Thanks for reading, have a great day!