3 Alternative Ways To Create A React Project

Introduction

ReactJS is a popular JavaScript library for building user interfaces. According to the statistics from Buildwith, over 11 million live sites are using React. The tutorial on React’s official site teaches us to set up a local development environment for React projects using create-react-app quickly and easily. We can focus on ReactJS itself other than the dependencies in the behind, such as webpack and Babel. However, create-react-app also has its own drawbacks as follows:

• Difficult to customize build configurations.create-react-app encapsulates all of the modules it is using. So the project package.json will be very neat and clean. However, it is difficult to customize build configurations. The only way to customize build configurations is to npm run eject. This command un-abstracts all of the encapsulated modules. So we have to maintain all of the modules by ourselves.
• An application will become bloated as it grows.Once a React project created by create-react-app is ejected, we can find out there are a lot of modules we don’t use. This makes its loading speed slow.

In the following sections, I will walk through 3 alternative ways to create a react project other than create-react-app.

Create a React App from scratch

You can create a React App from scratch and manage dependencies and configs by yourself to speed up your application. Here are the following steps:

Prerequisites:

1. Node.js is installed.
2. NPM is installed.
3. A JavaScript IDE, such as VS Code is installed.In case you haven’t had them installed on your computer, you may go to Node.js official site to download and install Node.js to your computer. Once Node.js is installed, npm install -g npm in a terminal will install NPM. This link tells you how to install NPM and verify if Node.js and NPM are installed properly. In this case, I will use VS code as IDE.

Step 0: Create a project folder and initialize a project

Create a project folder, such as MyReactApp. Open it in a terminal and type the following command to initialize a project:

npm init -y

This command will create a file called package.json for the project dependency management later.

Step 1: Install the required dependencies

If you have VS code installed on your computer, open the folder called MyReactApp in it. We will install the dependencies a React project needs in the VS code terminal. Open a terminal and get into MyReactApp.

Install webpack

Webpack bundles JavaScript files in a project to minify their size in a project. Type the command as below in a terminal:

npm i webpack webpack-cli webpack-dev-server --save-dev

We have weppack, webpack-cli and webpack-dev-server installed for our development environment.

Install Babel

JSX in ReactJS cannot be recognized in some browsers. So Babel as a compiler will translate JSX to a JavaScript version the browser can recognize. Type the line of command as below in the terminal to install the babel-relevant modules:

npm i --save-dev @babel/cli babel-loader @babel/preset-env @babel/core @babel/plugin-transform-runtime @babel/preset-react @babel/eslint-parser @babel/runtime

Install React

Now we are installing React modules. Type the command as below:

npm i react react-dom

Step 2: Configure Babel

Create a file named .babelrc in the project root folder. Put the following configuration code in it:

{
    "presets": ["@babel/preset-env", "@babel/preset-react"],
    "plugins": ["@babel/plugin-transform-runtime"]
}

Step 3: Configure webpack

Create a file named webpack.config.js in the project root folder. Put the following code inside:

const path = require("path");
module.exports = {
mode: "development",
entry: "./src/index.js",
output: {
    path: path.resolve(__dirname, "public"),
    filename: "main.js",
},
target: "web",
devServer: {
    port: "3000",
    static: ["./public"],
    open: true,
    hot: true,
    liveReload: true,
},
resolve:{
    extensions: [".js", ".jsx", ".json", ".ts"],
},
module:{
    rules: [
        {
        test: /.(js|jsx)$/,
        exclude: /node_modules/,
        use: "babel-loader",
        },
    ],
},
};

Step 4: Add start and build script to package.json

Add the following 2 lines of codes in the node scripts of package.json:

"start": "webpack-dev-server",
"build": "webpack ."

Update

"main": "./index.js",

to

"main": "./src/index.js",

Step 5: Add React files

Create index.html

Create a folder called public in the root folder, and create a file named index.html inside it. Copy the following code into index.html.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
    <script src="main.js"></script>
</body>
</html>

Create index.js

Create a folder called src in the root folder, and create a file named index.js inside it. Copy the React codes as below into index.js:

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

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

Create App.js

Create a file named App.js inside a folder called src. Copy the following React codes into it:

import React from "react";

const App = () => {
    return <div> Hello World!</div>
};

export default App;

Step 6: Build and start the application

Type npm run build in the terminal to build the application.

Run npm run start to start the application.

At this step, you have created a React app from scratch. You can manage your dependencies by yourself.

Create a React project with Next.js

If you feel that the previous way is too complicated, Next.js is a good option. Next.js is a ReactJS framework. However, it’s more than ReactJS. It not only resolves the problems about code bundler, complier as Create-React-App, but also has 3 types of rending: static generation, server-side rendering, and client-side rending. So Next.js can significantly improve the performance of your web applications by rendering them on the server. This can lead to faster load times and a better user experience. Furthermore, Next.js is SEO-friendly, which means that your web applications will be more likely to rank well in search engine results pages (SERPs). Next.js is a flexible framework that can be used to build a wide variety of web applications.

Prerequisites:

Like a React App from scratch, you need to have Node.js, and a JavaScript IDE installed;

Install Next.js:

Type the following command in your terminal to install Next.js:

npm install -g next

Create a Next.js App:

Once Next.js is installed, simply type the following command in a terminal:

npx create-next-app@latest MyNextApp --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"

A Next.js App called MyNextApp will be scaffolded. create-next-app will be installed if it has not been installed.

Start the Next.js development server:

Enter folder MyNextApp by typing the command in the terminal:

cd MyNextApp

Then, start the development server by typing the command in the terminal:

npm run dev

A local development server will be started at port 3000.

You may view the default Next.js page in a browser at http://localhost:3000

This is just a default Next.js example. However, Next.js is an extension to React. You can do more than what create-react-app can do. For example, you may choose a way of your page rending between pre-rending and client-side rending. Pre-rending includes static generation, in which all HTML and JavaScript instructions are generated during its build time, and server-side generation, in which All HTML and necessary JavaScript instructions are generated at the server, upon its client request. Pre-rending significantly improves the SEO of React. Explore it more if you are interested in it.

Create React via Vite

If you have the latest modern browser, which supports native ES modules feature, Vite is another great alternative tool to build a React project. It provides faster build times, improved development experience, and more efficient code splitting. It is also easy and simple to start a React project.

Prerequisites:

It is the same as Next.js prerequisites. Make sure Node.js, NPM, and Visual Studio Code are installed.

Create a Vite project:

Open a terminal window and navigate to the directory where you want to create your project. Run the following command to create a new Vite project:

npm create vite@latest

This will create a new directory with the name of your project. Open the directory in Visual Studio Code. You should see a file called package.json. This file contains the dependencies for your project.

Start the development server:

Run the following command in your terminal:

npm run dev

This will open a new browser tab at http://localhost:3000. You should see a simple React app.

You may install more packages by typing the command npm install <package-name> in the terminal. You can also build a production version by the command npm run build

Conclusion

All of these methods above have their features and benefits. The way to create React from scratch allows developers to manage project packages by themselves. Next.js offers a complete solution for building server-rendered React applications. It is a great choice for larger projects or for developers who want a more integrated development experience. Vite provides a fast and efficient development experience with a modern browser that supports ES modules. It makes a good choice for small or medium projects if developers need more control over the development process. The choice to make should come down to the specific requirements of the project itself. All of them have their own advantages.