How to set up React projects without using create-react-app

Rasveer Bansi — Thu, 25 Mar 2021 21:52:05 +0000

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" 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.

Getting Started

Step 1: Setting up your project

First you will need to download and install either Node.js or Yarn 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)
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 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 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, 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 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 🎉

Forem: Rasveer Bansi