Creating a React App without Create React App and Vite

If you have immersed yourself in React development, you know that getting started often involves setting up the project first. This includes installing dependencies, configuring build tools, and creating essential files and directories.

You may have already used popular development tools like Create React App (CRA) and Vite, which simplify this process for you.

But what if we told you there’s another way? In this blog, we explore the exciting realm of building a React app without relying on CRA or Vite.

CRA and Vite abstract the complex build configuration, allowing developers to concentrate on writing code and quickly building their applications. But I want to build these on my own, which is why this blog comes into the picture.

The primary purpose of this blog is to understand the fundamental principles behind development tools such as CRA and Vite, as they conceal various complexities from developers.

Web Bundlers

Web bundlers play a crucial role in modern web development by optimizing the delivery and performance of web applications.

They are tools that combine multiple files, such as JavaScript, CSS, and images, into a single bundle, which is then delivered to the browser. Some popular web bundlers include Parcel, Webpack, and others.

The main goals of web bundlers are

• Dependency management
• Code Organization
• Dependency Management
• Performance Optimization
• Code Splitting
• Compatibility and Browser Support, etc.

Why bundling a React app is essential

We can run a React application without bundling it, it is generally not recommended for production-ready applications. If we do not build our React application, we may encounter several issues and limitations:

• Unoptimized code
• Lack of transpilation
• Missing dependencies
• Limited asset management
• No environment-specific configurations, etc.

While the bundling process ensures code optimization, compatibility, asset management, and environment-specific configurations.

It improves performance, reduces file sizes, and enables a smoother deployment process. Therefore, it’s essential to go through the build step to achieve the best results for your React application.

The build process is essential for several reasons:

• Bundling
• Minification
• Transpilation
• Tree shaking
• Asset optimization
• Environment-specific configurations, etc.

CRA and Vite

Create React App (CRA) and Vite are both popular development tools used in the React ecosystem.

CRA

Create React App is a command-line tool that allows developers to quickly set up a new React project with a pre-configured build setup.

It provides a streamlined and opinionated approach to creating a production-ready React application without manually configuring complex build tools.

Create React App is widely used as a starting point for React projects, especially for beginners or those who prefer a simple and opinionated setup.

Key features and benefits of CRA include:

• Zero-configuration setup
• Development server
• Optimized production build
• Modern JavaScript features
• Support for CSS preprocessors, etc.

Vite

Vite is a fast, modern, and lightweight development server and build tool specifically designed for modern frontend frameworks, including React, Vue, and others.

It aims to provide an optimized development experience by leveraging native ES module support in modern browsers.

Vite’s emphasis on speed and developer experience has made it increasingly popular in the front-end development community.

It offers a performant and efficient development environment, enabling developers to work more productively and build applications that load quickly.

Key features and benefits of Vite include:

• Instant server startup
• Quick HMR (Hot Module Replacement)
• Scalable build
• Support for multiple frameworks
• Flexible configuration, etc.

Include React and React-DOM into the project via CDN

Including React and React-DOM into a project through a CDN (Content Delivery Network) involves adding the necessary script tags to your HTML file.

1. Create an HTML file for your project or open an existing one.
2. Find out the URLs for the React and React-DOM CDN resources. You can use popular CDN providers like unpkg, cdnjs, or jsDelivr. For this example, we’ll use the URLs from the unpkg CDN.

<script crossorigin src=”https://unpkg.com/react@18/umd/react.development.js“></script>

<script crossorigin src=”https://unpkg.com/react-dom@18/umd/react-dom.development.js“></script>

Note: You need to change the React version from time to time.

1. Open your HTML file and add the script tags for React and React-DOM within the <head> or <body> section. It’s generally recommended to include these scripts before your own JavaScript code.
2. That’s it! You have included React and React-DOM in your project using CDN. Now you can proceed to write your React code and use React and ReactDOM as global objects in your JavaScript files.

But Including React directly through a CDN can have some drawbacks and is generally considered a less preferred approach for larger projects.

Few reasons why it may not be ideal:

• Lack of control over versions
• Limited functionality
• Performance impact
• Security concerns
• Lack of build optimizations

That’s why we need a form of local storage to fetch the functionalities of React and React DOM. This is where NPM packages come into play.

Include React and React-DOM into the project through NPM

Including React and React-DOM in a project through NPM (Node Package Manager) involves the following steps:

1. Create a new project directory or navigate to your existing project directory using a terminal or command prompt.
2. Initialize a new NPM project by running the following command: npm init, This command will create a package.json file that will track your project’s dependencies and configuration.
3. Install React and React-DOM as dependencies by running the following command: npm install react react-dom, This command installs the latest stable versions of React and React-DOM and adds them as dependencies in your package.json file.
4. Now Create your React application code in a JavaScript file as well as an HTML file that will load your JavaScript code and provide a root element where the React element will be rendered.

In order to minify our React code, we require a tool that can handle the web assets and minify our code. Therefore, I will be using the parcel build tool.

Building React app using parcel

Let’s suppose we have built a React app. Here is the code:

HTML: 

<!DOCTYPE html>

<html lang=“en“>

  <head>

    <meta charset=“UTF-8“ />

    <meta name=“viewport“ content=“width=device-width, initial-scale=1.0“ />

    <link rel=“stylesheet“ href=“index.css“ />

    <title>React App</title>

  </head>

  <body>

    <div class=“root“></div>

    <script type=“module“ src=“App.js“></script>

  </body>

</html>

JavaScript:

import React from “react“;

import ReactDOM from “react-dom/client“;

// Step 1: Create a react element

const reactElement = React.createElement(

  “h1“,

  { id: “title“ },

  “Hello World, from React…“

);

// Step 2: Create a root element

const rootElement = ReactDOM.createRoot(document.querySelector(“.root“));

// Step 3: Render element on the web page.

rootElement.render(reactElement);

We need to execute this code in a browser, but we cannot run it directly in the browser. Therefore, I am utilizing Parcel to handle all the necessary tasks before displaying the webpage in the browser.

Parcel is a modern and zero-configuration build tool that simplifies the build process by handling tasks like bundling, minification, and asset management out of the box.

Its easy-to-use allows developers to focus on writing code rather than spending time configuring complex build systems. With its great support for various web technologies, Parcel becomes an excellent choice.

Set-Up Parcel

Setting up Parcel for a React app is a simple process. Once React and React DOM are installed via NPM, follow these steps:

1. Install Parcel as a development dependency in your project:

npm install –D parcel

1. Create your React components and the entry point for your application inside the package.json file. Usually, the entry point is named index.js or App.js.
2. Create an HTML file as well as a root for our project. This file will serve as the entry point for Parcel to bundle our React application.
3. Now, write a React component in a JavaScript file. Import React and React DOM at the top of the JS file, and render them into the DOM using the render() method.
4. We are ready to render our React app in the browser using the command npx parcel [entry file name]. However, we can also customize this command by using scripts inside the package.json file.

{

  “scripts“: {

    “start“: “parcel index.html“

  }

}

1. To render our React application in the browser, we need to execute the “npm start” command in the terminal. The Parcel will automatically bundle your React app, and you should be able to access it at http://localhost:1234 or another available port, which will be displayed in your terminal as well.

Conclusion

In conclusion, CRA (Create React App) and Vite are excellent development tools that have simplified the process of creating modern web applications. By abstracting away much of the underlying complexity, they allow developers to get started quickly and focus on building the actual application rather than configuring the build process or dealing with tooling intricacies.

While Parcel is an alternative that allows developers to gain a more comprehensive understanding of the engineering principles driving their applications. Embracing this journey can lead to improved skills, a deeper appreciation for the development process, and ultimately, more powerful and efficient web applications. So, whether you choose the simplicity of CRA and Vite or Parcel, the most important thing is to keep learning, experimenting, and evolving as a developer.

Also, if you are looking for a JavaScript job, so please search them on talent500.co, All the best🚀