Create a React Project From Scratch Without any Framework
Tags: react, webpack, webdev, javascript
Published: 2023-01-06 15:15:54

This blog post will guide you through the process of creating a new single-page React application from the ground up. We will begin by setting up a new project using Webpack and Babel. Building a React project from scratch will give you a strong foundation and understanding of the fundamental requirements of a project, which is essential for any project you may undertake before jumping into a framework like Next.js or Remix.

Click the image below to watch the [YouTube video version](http://www.youtube.com/watch?v=X48Kt8rSByQ) of this blog post:

[![Create a React Project From Scratch Without any Framework](https://i.ytimg.com/vi/X48Kt8rSByQ/hqdefault.jpg)](http://www.youtube.com/watch?v=X48Kt8rSByQ)

> This blog post is extracted from my book React Projects, available on [Packt](https://packt.link/ReactProjects) and [Amazon](https://amzn.to/3vq4FQP).

Setting up a new project
------------------------

Before you can start building your new React project, you will need to create a new directory on your local machine. For this blog (which is based upon the book React Projects), you can name this directory 'chapter-1'.

To initiate the project, navigate to the directory you just created and enter the following command in the terminal:

```
`npm init -y`

```

This will create a `package.json` file with the minimum information required to run a JavaScript/React project. The `-y` flag allows you to bypass the prompts for setting project details such as the name, version, and description.

After running this command, you should see a `package.json` file created for your project similar to the following:

```json
{
  "name": "chapter-1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
```

Now that you have created the `package.json` file, the next step is to add Webpack to the project. This will be covered in the following section.

Adding Webpack to the project
-----------------------------

In order to run the React application, we need to install Webpack 5 (the current stable version at the time of writing) and the Webpack CLI as `devDependencies`. Webpack is a tool that allows us to create a bundle of JavaScript/React code that can be used in a browser. Follow these steps to set up Webpack:

1.  Install the necessary packages from npm using the following command:

```
`npm install --save-dev webpack webpack-cli`

```

2.  After installation, these packages will be listed in the package.json file and can be run in our start and build scripts. But first, we need to add some files to the project:

```
chapter-1
|- node_modules
|- package.json
   |- src
      |- index.js
```

This will add an `index.js` file to a new directory called `src`. Later, we will configure Webpack so that this file is the starting point for our application.

3.  Add the following code block to this file:

```js
`console.log('Rick and Morty');`

```

4.  To run the code above, we will add start and build scripts to our application using Webpack. The test script is not needed in this case, so it can be removed. Also, the main field can be changed to private with the value of true, as the code we are building is a local project:

```json
{
  "name": "chapter-1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack --mode=development",
    "build": "webpack --mode=production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
```

The npm start command will run Webpack in development mode, while npm run build will create a production bundle using Webpack. The main difference is that running Webpack in production mode will minimize our code and reduce the size of the project bundle.

5.  Run the `start` or `build` command from the command line; Webpack will start up and create a new directory called `dist`.

```
chapter-1
|- node_modules
|- package.json
   |- dist
      |- main.js
   |- src
      |- index.js
```

6.  Inside this directory, there will be a file called `main.js` that includes our project code and is also known as our bundle. If successful, you should see the following output:

```
asset main.js 794 bytes [compared for emit] (name: main)
./src/index.js 31 bytes [built] [code generated]
webpack compiled successfully in 67 ms
```

The code in this file will be minimized if you run Webpack in production mode.

7.  To test if your code is working, run the main.js file in your bundle from the command line:

```
`node dist/main.js`

```

This command runs the bundled version of our application and should return the following output:

```
> node dist/main.js
Rick and Morty
```

Now, we're able to run JavaScript code from the command line. In the next part of this blog post, we will learn how to configure Webpack so that it works with React.

Configuring Webpack for React
-----------------------------

Now that we have set up a basic development environment with Webpack for a JavaScript application, we can begin installing the packages necessary to run a React application. These packages are `react` and `react-dom`, where the former is the core package for React and the latter provides access to the browser's DOM and allows for rendering of React. To install these packages, enter the following command in the terminal:

```
`npm install react react-dom`

```

However, simply installing the dependencies for React is not enough to run it, since by default, not all browsers can understand the format (such as ES2015+ or React) in which your JavaScript code is written. Therefore, we need to compile the JavaScript code into a format that can be read by all browsers.

To do this, we will use Babel and its related packages to create a toolchain that allows us to use React in the browser with Webpack. These packages can be installed as `devDependencies` by running the following command:

In addition to the Babel core package, we will also install `babel-loader`, which is a helper that allows Babel to run with Webpack, and two preset packages. These preset packages help determine which plugins will be used to compile our JavaScript code into a readable format for the browser (`@babel/preset-env`) and to compile React-specific code (`@babel/preset-react`).

Now that we have the packages for React and the necessary compilers installed, the next step is to configure them to work with Webpack so that they are used when we run our application.

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

```

To do this, configuration files for both Webpack and Babel need to be created in the src directory of the project: `webpack.config.js` and `babel.config.json`, respectively. The `webpack.config.js` file is a JavaScript file that exports an object with the configuration for Webpack. The `babel.config.json` file is a JSON file that contains the configuration for Babel.

The configuration for Webpack is added to the `webpack.config.js` file to use `babel-loader`:

```js
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
};
```

This configuration file tells Webpack to use `babel-loader` for every file with the `.js` extension and excludes files in the `node_modules` directory from the Babel compiler.

To utilize the Babel presets, the following configuration must be added to `babel.config.json`:

```json
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "esmodules": true
        }
      }
    ],
    [
      "@babel/preset-react",
      {
        "runtime": "automatic"
      }
    ]
  ]
}
```

In the above `@babel/preset-env` must be set to target `esmodules` in order to use the latest Node modules. Additionally, defining the JSX runtime to automatic is necessary since React 18 has adopted the [new JSX Transform functionality](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html).

Now that we have set up Webpack and Babel, we can run JavaScript and React from the command line. In the next section, we will write our first React code and run it in the browser.

Rendering React components
--------------------------

Now that we have installed and configured the packages necessary to set up Babel and Webpack in the previous sections, we need to create a real React component that can be compiled and run. This process involves adding some new files to the project and making changes to the Webpack configuration:

1.  Let's edit the `index.js` file that already exists in our `src` directory so that we can use `react` and `react-dom`. Replace the contents of this file with the following:

```js
import ReactDOM from 'react-dom/client';

function App() {
  return <h1>Rick and Morty</h1>;
}

const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(<App />);
```

As you can see, this file imports the `react` and `react-dom` packages, defines a simple component that returns an `h1` element containing the name of your application, and has this component rendered in the browser with `react-dom`. The last line of code mounts the `App` component to an element with the `root` ID selector in your document, which is the entry point of the application.

2.  We can create a file that has this element in a new directory called `public` and name that file `index.html`. The document structure of this project should look like the following:

```
chapter-1
  |- node_modules
  |- package.json
  |- babel.config.json
  |- webpack.config.js
  |- dist
    |- main.js
  |- public
    |- index.html
  |- src
    |- index.js
```

3.  After adding a new file called `index.html` to the new `public` directory, we add the following code inside it:

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width,
initial-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Rick and Morty</title>
  </head>
  <body>
    <section id="root"></section>
  </body>
</html>
```

This adds an HTML heading and body. Within the `head` tag is the title of our application, and inside the `body` tag is a section with the "root" ID selector. This matches the element we have mounted the `App` component to in the `src/index.js` file.

4.  The final step in rendering our React component is extending Webpack so that it adds the minified bundle code to the body tags as scripts when running. To do this, we should install the `html-webpack-plugin` package as a `devDependency`:

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

```

To use this new package to render our files with React, the Webpack configuration in the `webpack.config.js` file must be updated:

```js
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
      filename: './index.html',
    }),
  ],
};
```

Now, if we run `npm start` again, Webpack will start in development mode and add the `index.html` file to the `dist` directory. Inside this file, we'll see that a new `scripts` tag has been inserted inside the body tag that points to our application bundle – that is, the `dist/main.js` file.

If we open this file in the browser or run `open dist/index.html` from the command line, it will display the result directly in the browser. The same is true when running the npm run build command to start Webpack in production mode; the only difference is that our code will be minified:.

This process can be sped up by setting up a development server with Webpack. We'll do this in the final part of this blog post.

Setting up a Webpack development server
---------------------------------------

While working in development mode, every time we make changes to the files in our application, we need to rerun the `npm start` command. This can be tedious, so we will install another package called `webpack-dev-server`. This package allows us to force Webpack to restart every time we make changes to our project files and manages our application files in memory instead of building the `dist` directory.

The `webpack-dev-server` package can be installed with npm:

```
`npm install --save-dev webpack-dev-server`

```

Also, we need to edit the dev script in the `package.json` file so that it uses `webpack- dev-server` instead of Webpack. This way, you don't have to recompile and reopen the bundle in the browser after every code change:

```json
{
  "name": "chapter-1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve --mode=development",
    "build": "webpack --mode=production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
```

The preceding configuration replaces Webpack in the start scripts with `webpack-dev-server`, which runs Webpack in development mode. This will create a local development server that runs the application and ensures that Webpack is restarted every time an update is made to any of your project files.

To start the local development server, just enter the following command in the terminal:

```
`npm start`

```

This will cause the local development server to be active at `http://localhost:8080/` and refresh every time we make an update to any file in our project.

Now, we have created the basic development environment for our React application, which you can further develop and structure when you start building your application.

Conclusion
----------

In this blog post, we learned how to set up a React project with Webpack and Babel. We also learned how to render a React component in the browser. I always like to learn a technology by building something with it from scratch before jumping into a framework like Next.js or Remix. This helps me understand the fundamentals of the technology and how it works.

> This blog post is extracted from my book React Projects, available on [Packt](https://packt.link/ReactProjects) and [Amazon](https://amzn.to/3vq4FQP).

I hope you learned some new things about React! Any feedback? Let me know by [connecting to me on Twitter](https://www.twitter.com/gethackteam). Or leave a comment on my [YouTube channel](https://www.youtube.com/@gethackteam?sub_confirmation=1).

***

This post was originally published on [hackteam.io](https://hackteam.io/blog/create-react-project-from-scratch-without-framework). Reposted automatically with [Reposted.io](https://reposted.io?utm_source=postFooter). A free tool to repost your content across all blogging platforms.