Introduction to ReactJs - Part 5: Scaffolding Our Own React App & Build Tools

By zooboole

Now that you have learned about modern JavaScript, Node Modules, Transpilers, Bundlers, and Task Runners, it's time to bring them all together. In this lesson, we'll set up our own React development environment by configuring essential build tools to streamline our workflow.

By the end of this tutorial, you'll have a solid foundation to start coding in ReactJS without relying on tools like Create React App or Vite which we will cover later.

What Do We Need?

Before jumping into the setup, let's break down the tools we'll be working with:

Babel – Transpiles modern JavaScript (ES6+) into browser-compatible JavaScript.
Webpack – Bundles JavaScript files and assets for optimized loading( Also has the capability to transpile modern JavaScript, but we will not use that here).
React & ReactDOM – The core libraries for building user interfaces. When we speak of coding in React, we actually mean these two packages
Development Server – Runs our app locally for testing. The node engine to execute the application.

Step 1: Create a Project Folder

A well-organized folder structure makes development easier. Let's create a new project directory named "callCard" and move into it:

mkdir callCard
cd callCard

This will be our root directory where we will set up everything.

Step 2: Initialize a Node.js Project

To manage dependencies, we need a package.json file. Run the following command:

npm init -y

This automatically creates a package.json file with default settings.

This file will be the arbitrator of all our node packages/modules we will be using. The file is important to instruct NodeJs on what modules our application needs, on how to look at our project, and how to execute it.

Step 3: Install Babel

Babel helps us write modern JavaScript while ensuring compatibility with older browsers. To install Babel, run:

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

Configure Babel

Now, create a new file named .babelrc in the project root and add the following configuration:

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

This tells Babel to transpile both modern JavaScript(@babel/preset-env) and React JSX(@babel/preset-react) syntax.

Step 4: Install Webpack

Webpack is our bundler—it combines JavaScript files, modules, and optimizes them for the browser. Let's install it with:

npm install webpack webpack-cli webpack-dev-server --save-dev

Note that by default Webpack has the capability to transpile modern Javascript and JSON files. But in this lesson, we will leave that function and delegate it to Babel. In this case we need to get the Webpack module that handles the hand to babel, called loaders — Babel Loader.

So, let's also install Babel loader so that Webpack can use Babel:

npm install babel-loader --save-dev

Step 5: Configure Webpack

Create a file named webpack.config.js in the root folder and add the following setup:

const path = require('path');

module.exports = {
  entry: './src/index.js', 
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  },
  devServer: {
    static: path.resolve(__dirname, 'dist'),
    port: 3000
  },
  resolve: {
    extensions: ['.js', '.jsx']
  }
};

Remember webpack configuration needs a starting file, and a location(dist) to output the final file(bundle)

Step 6: Install React & ReactDOM

Since we're building a React app, we need to install react and react-dom:

npm install react react-dom

Step 7: Set Up Our App Structure

Create the following directories and files inside callCard:

callCard/
│── src/
│   ├── index.js
│   ├── App.js
│── dist/
│   ├── index.html
│── package.json
│── webpack.config.js
│── .babelrc

Step 8: Write Our First React Component

1. Create `src/App.js`

Inside src/App.js, add:

import React from 'react';

const App = () => {
  return <h1>Hello, React!</h1>;
};

export default App;

2. Create `src/index.js`

This file will be the entry point for our app:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

Step 9: Set Up HTML File

Inside dist/index.html, create a simple HTML structure:

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

Step 10: Run the Development Server

Finally, let's add a script to package.json to start our server.

Find the "scripts" section in package.json and modify it:

"scripts": {
  "start": "webpack serve --mode development"
}

If we do not add the script section in the package.json we would have to run the application using npx webpack serve --mode development

Now, we can easily run it like this:

npm start

Your React app should now be running on http://localhost:3000

Conclusion

We’ve successfully scaffolded our own React app without relying on Create React App. You now understand how to:

✅ Set up Babel for JSX and ES6 transpilation
✅ Use Webpack to bundle JavaScript files
✅ Install and configure React
✅ Run a development server

In the next part, we’ll learn how to scaffold a React app using advanced and modern tools such as Create React App (CRA), or Vite before we dive deeper into the core React principles, React components, props, and state.

Last updated 2025-02-05 UTC