TL;DR: Learn to bootstrap a React app for custom configurations, better performance, and a deeper understanding of React’s inner workings.
Bootstrapping a React app can be rewarding, whether you do it for learning purposes, custom configurations, or optimizing the app according to your use case.
The easiest way to get started with React programming is by using create-react-app (CRA), a convenient tool that provides the initial boilerplate for the developer. However, this tool was recently deprecated, and there are scenarios where you want more control over the app or project setup. In the long run, it’s better to know how to set up your React projects from scratch.
While CRA provides a convenient starting point, it’s not suitable for every use case. Here are some reasons to avoid it:
If you want to check the configuration of an app created with CRA, you can do so by running the eject command, which unbundles the configuration files and scripts of the project and makes them visible to you.
npx create-react-app my-app cd my-app npm run eject
After running the eject command, you will see two new folders, config and scripts, in your app’s directory that will have all the configurations of your app.
Before beginning, make sure you have the following installed on your system:
Next, let’s set up the React app.
Create a new directory for the project and initialize it as an npm package by running the following commands:
mkdir my-react-app cd my-react-app npm init -y
Adding the -y flag to the npm init command skips prompts like description, author, and others.
The npm init command creates a package.json file that will list all your project dependencies, development-only dependencies (also known as dev dependencies), scripts, versions, and metadata like the project name and description. It is a vital component for managing and automating things in the development workflow. Later, you will use it to define a list of commands that will help you in building, running, and testing your app.
Webpack is the most popular module bundler for JavaScript apps. It simplifies the process of managing and combining JavaScript files, stylesheets, images, fonts, and other assets for browsers. In a project built with a front-end library like React, you can have inline SVG files, font files, CSS, or CSS preprocessors like Sass or Less that need to be bundled so that they can be served.
Webpack builds and analyzes a dependency graph for the app to ensure all modules are properly bundled and optimized for production. When multiple modules share the same dependency, Webpack includes the dependency only once to avoid redundant data.
Additionally, Webpack supports features like code splitting, hot module replacement, and tree shaking, making it a versatile tool.
Use the following command to install Webpack, the Webpack CLI, and the Webpack development server as dev dependencies. They are specified as dev dependencies because they aren’t required in the production build.
npm install --save-dev webpack webpack-cli webpack-dev-server
Babel is a code transpiler that transforms modern JavaScript into browser-compatible code. For example, JSX is a React-specific file extension that has to be transpiled to normal JavaScript code so that it can be executed in the browser. Also, older browser versions may not support modern JavaScript features, so Babel also adds polyfills for the target version of the language for all browsers.
It enables developers to use modern JavaScript features and write code with the latest features without worrying about browser support. Additionally, Babel allows for customization through plugins and presets.
Run the following command to install Babel:
npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader
Another important component that you need to render the app is html-webpack-plugin, which will include bundled scripts in the <body> tag of the index.html file.
Run the following command:
npm install --save-dev html-webpack-plugin
In your root directory, create a file named webpack.config.js, which will hold all the Webpack configurations for the app.
These configurations will define how the app’s files will be bundled, what the entry point to the app will be, how the module dependencies will be managed, the different loaders for the different file types (.js, .jsx, .css, .html, .svg, etc.), and sets up the development server with live reloading during development.
Add the following configurations in the webpack.config.js file.
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js",
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
},
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: "./public/index.html",
filename: "./index.html",
}),
],
devServer: {
static: "./dist",
},
resolve: {
extensions: [".js", ".jsx"],
},
mode: "development",
}; These configurations specify:
Create a file named .babelrc in your root directory and add the following configuration to it:
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
} This specifies which presets or plugins should be used to transform your code. The current configuration will enable transpilation of modern JavaScript (ES6+) and JSX syntax into browser-compatible JavaScript.
Your app’s root directory holds the configuration files webpack.config.js, package.json, and .babelrc, along with the public and src directories.
The public folder contains the index.html file, while the src folder contains the App.js and index.js files. This structure provides a clear separation of concerns, making it easier to navigate through the project and scale it.
Add the following React dependency to your project by running the following command:
npm install react react-dom
Add the following code in the src/index.jsx file. This will render React code in the HTML DOM.
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(); Notice that the ReactDOM.createRoot() method takes the ID of the DOM element in which it will inject the React code.
Also, it has loaded the App component from the src/app.jsx file that will hold the React code, as shown in the following code.
import React from "react";
const App = () => {
return (
<div>
<h1>Hello, Prashant!</h1>
</div>
);
};
export default App; Finally, fill the public/index.html file with the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html> Now that the app configuration and setup are done, you just have to start the app. Update the scripts section in the package.json to the following:
"scripts": {
"start": "webpack serve",
"build": "webpack --mode production"
} These scripts define a set of shortcuts to run the app in development and create the production build. Invoking these scripts internally invokes Webpack commands. These scripts do the following:
Run the command npm start to run your app locally. Your app will run on port 8080 locally; if this port is occupied, then it will run on another port.
Thanks for reading! Setting up a React app from scratch gives you complete control over the project’s configuration. This may feel a little overwhelming initially, but it serves as a great learning experience and allows for greater flexibility and customization. You can experiment with different tools and play with lightweight alternatives for boosted performance. The possibilities are endless with your configuration.
Syncfusion React UI components library is the only suite that you will ever need to build an app since it contains over 90 high-performance, lightweight, modular, and responsive UI components in a single package.
If you’re an existing customer, you can download the latest version of Essential Studio® from the License and Downloads page. For those new to Syncfusion, try our 30-day free trial to explore all our features.
If you have questions, contact us through our support forum, support portal, or feedback portal. As always, we are happy to assist you!