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 thepackage.json
we would have to run the application usingnpx 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