[React 2023] Create A React App From Scratch With React 18, Webpack 5, And Babel
[React 2023] Create A React App From Scratch With React 18, Webpack 5, And Babel
Saturday, February 17, 2024
How To Create A React App With React 18, Webpack 5, And Babel (2023 Update)
- Setting up a new project
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:
{
"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:
Install the necessary packages from npm using the following command:
npm install --save-dev webpack webpack-cli
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.
Add the following code block to this file:
console.log('Lam Thieu');
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:
{
"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.
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
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:
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:
{
"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.
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:
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:
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.
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
After adding a new file called index.html to the new public directory, we add the following code inside it:
<!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.
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:
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:
{
"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.