How to set up React projects without using create-react-app
Tags: react, javascript, webpack, babel
Published: 2021-03-25 21:52:05

This step-by-step guide explains how to set up a React application from scratch, without using any of the *"create-react-app"* scripts.

##DISCLAIMER: 
I want to begin this guide by noting that there is absolutely nothing wrong with using the [*"create-react-app"*](https://reactjs.org/docs/create-a-new-react-app.html) scripts when writing your code. In the past I have found this to be a very helpful and time efficient way of setting up my React applications, especially when I was new to learning React. These scripts set up Webpack and Babel for you, so you can focus purely on developing the application itself. If you want to learn more about the set up process and how these tools relate to your React application, then I highly recommend following the steps presented in this guide.

<img src="https://media.giphy.com/media/bAplZhiLAsNnG/giphy.gif" alt="Bruce Almighty Typing Gif" />

##Getting Started

###Step 1: Setting up your project 
First you will need to download and install either [Node.js](https://nodejs.org/en/download/) or [Yarn](https://classic.yarnpkg.com/en/docs/install/#windows-stable) to use on your machine.

Once this is installed, you should create an empty directory for your project to live in. You can create and enter a new directory, by writing the following commands in your terminal:

```
 > mkdir myProject              
 > cd myProject
```

###Step 2: Initialising your project
Now you have a directory, you will need to initialise your project and create a *package.json* file. 
This file will: 
- list all the packages that your project depends on
- specify which version of those packages can be used in your project (using [semantic versioning rules](https://docs.npmjs.com/about-semantic-versioning))
- make it easier to share your work with other developers as they can use this file to reproduce your build

You can initialise your project by running a single command in the terminal.
```
##for node use:
 > npm init

##for yarn use:
 > yarn init
```
This will prompt a series of commands asking you to enter information about your project so a relevant *package.json* file can be created. The information you enter will sit as a json object at the top of your *package.json* file. (You can change this information at any point whilst developing your project, so it is okay if you want to leave any answers empty for now).
```
 package name: (myProject)
 version: (1.0.0)
 description: //enter a short description about your project 
 here
 entry point: (index.js)
 test command: //enter your test command here e.g test
 git repository: //enter the link for your github repo (if 
 you already cloned a github repo and created your directory 
 inside of it, the repo link will automatically appear here)
 keywords: //enter any optional keywords here
 author: Rasveer Bansi
 license: (ISC)
```
Next you will want to create a src folder inside your myProject directory, where you can store all the source code for your project.
```
> mkdir src 
```

Your project structure should now resemble:
```
myProject 
| - src 
```

###Step 3: Setting up Webpack
[Webpack](https://webpack.js.org/) is a tool which processes and bundles your application, making your code more usable for browsers. Your application contains modules of reusable code (e.g javascript, node_modules, images and CSS styles) which all come together to create your application. Webpack separates this code based on how it's used by your application, making it easier for the browser to follow.

You can install Webpack by running the following command in your terminal.
```
##for node use:
 > npm install --save-dev webpack webpack-dev-server webpack-cli

##for yarn use: 
 > yarn add webpack webpack-dev-server webpack-cli
```
Next you will need to create a *webpack.config.js* file in your *myProject* directory. In this file you will need to save the following code:
```
const path = require('path');
  module.exports = {
  
//define entry file and output
    entry: './src/index.js',
    output: {
     path: path.resolve('dist'),
     filename: 'main.js'
    },
  }
```
_**entry**_ - This is the top level set of files that you want to include in your build. This can be either a single file or an array of files.
(*Nb*: in the example above we have passed a single file *index.js*).

_**output**_ - This is an object containing your output configuration. In the example above, we specify the name of the file we want Webpack to build (*main.js*) and the project path for where this file should be stored.

###Step 4: Setting up Babel
[Babel](https://babeljs.io/docs/en/) is a javascript compiler that converts ES6 code into a backwards compatible version of itself, so older browsers can also run your application.

To install Babel you need to run the following commands in your terminal.
```
##for node use:
 > npm install --save-dev babel-core babel-loader 
 babel-preset-es2015 babel-preset-react @babel/core 
 @babel/preset-env @babel/preset-react

 > npm install --save-dev babel-plugin-transform-object-rest-spread 

##for yarn use:
 > yarn add  babel-core babel-loader babel-preset-es2015
 babel-preset-react @babel/core @babel/preset-env 
 @babel/preset-react

 > yarn add babel-plugin-transform-object-rest-spread
```
Next you will need to create a *babel.config.json* file in your *myProject* directory. In this file you will need to save the following code:
```
{
  "presets":[
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "env": {
    "test": {
      "plugins": ["@babel/plugin-transform-modules-commonjs"]
    }
  },
  "plugins": [ "transform-object-rest-spread" ]
}
```
_**presets**_ - This lets you use the react and es2015 presets you installed earlier to compile your code into something compatible for older browsers. By installing *"@babel/preset-env"* you have included _**all**_ javascript versions.

_**plugins**_ - These are individual plugins you can install which compile specific ES6 modules into something more compatible for older browsers.

Next you will need to add your Babel loader to your *webpack.config.js* file. To do this you need to create a *module* object and inside this object create an array called *rules*. This array stores each of your loaders as individual objects which are defined by their key "*loader*".

The entire file should now look like this:
```
const path = require('path');
 module.exports = {
 //define entry file and output
  entry: './src/index.js',
  output: {
    path: path.resolve('dist'),
    filename: 'main.js'
  },
 //define babel loader
  module: {
    rules: [
      { test: /\.jsx?$/, loader: 'babel-loader', 
        exclude: /node_modules/ 
      },
      { test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      }
    ]
  }
};
```
_**test**_ - A regular expression (regex) that tests what kind of files to run through your loader. As you can see, this example has added regex to test all files with the ES6 extension of *jsx* and has also created a separate object for *CSS* files.

_**loader**_ - The name of the loader you are going to use (eg *babel-loader or style-loader / css-loader*).

_**exclude**_ - Tells us which files the loader should exclude or ignore. This example has chosen to exclude and ignore the *node_modules* folder.

###Step 5: Setting up your entry files
Now you have set up your project configuration (*yay!*), you will need to create some entry files so you can begin developing your application.

You can begin by creating two entry files: 
- an *index.js* file inside your *src* folder
- an *index.html* file inside your *myProject* directory

Your file structure should resemble this
```
 | - src
 |    | - index.js
 |
 | - index.html
 | - webpack.config.js
 | - babel.config.json
 | - package.json
```
_**index.js**_
This is the same *index.js* file that is configured as the entry point inside your *webpack.config.js* file. For now it is okay to place the following code inside it, however once you begin developing your application you will need to update this file to contain the relevant starting component that will render your application.

```
console.log('hello world!'); 
```

_**index.html**_
This file provides structure for your application and is used by the web server as a *"default document"*. It contains a script tag which directs your browser to the webpack file that was specifically built for the browser to follow.

Place the following code into your *index.html* file:
```
<!DOCTYPE html>
<html>
   <head>
     <meta charset="utf-8">
     <title>React</title>
   </head>
   <body>
     <div id="root"></div>
     <script src="main.js"></script>
   </body>
</html>
```
In this code, *<script src="main.js"></script>* is the tag which directs our browser to the webpack file (*main.js*).

###Step 6: Setting up your project scripts
Now that you have some entry files set up, you will need to write some scripts that tell your application what to do. These will also be the commands that you use in your terminal when working on your application. For now you can just write two scripts to build and start your application.

To do this you need to create a *scripts* object in your *package.json* file. Inside this object you will write each of your scripts as their own individual script object. For each script object you want to include, the key is the command keyword needed to run your script and the value is an instruction for your application to follow.

Place the following *scripts* object into your *package.json* file
```
"scripts": {
   "start": "webpack serve --mode development --env 
 development",
   "build": "webpack"
}
```
Now if you want to start your application using the terminal, you can use the script object which has the key *"start"*. This will tell your application to start running the Webpack server.
```
 ##for Node use:
 > npm run start

 ##for Yarn use:
 > yarn start
```

###Step 7: Setting up React 
The last thing you need to do is set up [React](https://reactjs.org/) so you can start developing a react application.

To do this we need to install React in the *myProject* directory by entering the following command into your terminal.

```
 ##for Node use:
 > npm install --save react react-dom

 ##for Yarn use:
 > yarn add react react-dom
```

Congratulations you have now finished setting up and can begin developing your React application 🎉

<img src="https://media.giphy.com/media/s2qXK8wAvkHTO/giphy.gif" width="480" height="316" alt="celebration gif">