3 Ways to Get Started with a React App in 2024

React 2024 3 Steps to Success-1

React is still a web development powerhouse in 2024, excellent at quickly creating responsive and dynamic user interfaces. This open-source JavaScript library has become trendy as Facebook has developed it.

React.js will be more popular among developers in 2024, and keeping up with its development will be essential if you want to stand out from the other React.js experts.

Thus, let us examine three different methods for developing a React application in 2024 and hire Reactjs programmers who contribute to improving the developer experience!

Method 01: Bit

Bit is a tool that facilitates independent design, build, testing, and versioning for component-driven development. It can also be represented as a platform for component creation and exchange.
Bit components might be CLI scripts, backend services, or user interface elements.

Why is Bit a good fit for React?

Imagine an easy React application that enables users to list and add inputs. Thus, Input and List are the two primary components based on this.

However, using the “create react app” method is quite simple in this case. However, problems may arise if the program grows into an extensive monolithic application.

Shorter deployment time.

For minor modifications, I want complete codebase access.
When a single component is updated globally, versioning problems may arise.

Bit: Creating React Components

Let’s construct the same components that we talked about earlier.

Step 1: Pre Requirements

Install the Bit first on your local development environment by running the below command.
As a result, Bit is used in these types of circumstances. You can create everything as separate components while using Bit.

npx @teambit/bvm install
Next, make the items listed below on Bit.

Make a Bit account.
Create a Bit company.
Create a bit of scope.

Bit Organization: Developer groups use it as a shared workspace for their projects.

Bit Organization

Bit scope: Bitscopes act as remote servers that let you export parts for sharing and universal access.

BOSC Create Scope

Step 2: Establishing a workspace

Now, we can properly use the command below to create a Bit workspace.

bit new react my-workspace –env team bit.react/react-env –default-scope bosctechorg.demo

You may replace the name of the scope and your applicable Bit Organization with “yourOrgnizationName.your-scope.

Additionally, you can replace “my-workspace” with a different workspace name.

A Bit Workspace: what is it? You will work on your Bit components in a temporary Bit workspace.

Every Bit component has an environment with all the information needed to function independently. As a result, Bit Workspace should only be used for development—not for configuring projects.

With the command below, you can now launch the application.

bit start

Open your browser to http://localhost:3000. Your workspace is empty at the moment since no component is being tracked.

Step 3: Creating the Bit component

The command below can be used to generate a bit component.

bit create react components/input

Input

You can add additional elements to the list in this way.
And this is how the folder structure will appear.

Folder Structure

Each component has five primary files, as you can see.

  • Index file: The index file serves as the root component file.
  • Component file: It is used to add the component’s essential business logic
  • Composition: A term for differentiable component types.
    Spec file: Testing file for components
  • Documentation file: Contains real-world examples to illustrate how to use the component.

Step 4: Composition and Component File Creation

List.ts: The list component will display a list of tasks with dynamic rendering using React.

import React from 'react';
export type ListProps = {
tasks: string[];
};
export const List = ({ tasks }: ListProps) => {
return (

{tasks.map((task, index) => (
{task}

))}

);
};

list.composition.tsx: This initializes the state of the List component by rendering it with an empty task array.

import React, { useState } from 'react';
import {List} from './list';
const ListComposition = () => {
const [tasks] = useState<string[]>([]);
return (
    <div>
      <List tasks={tasks} />
    </div>
);
};
export default ListComposition;

Input.tsx: However, by tapping a button, an app users can add their project tasks to the list using the Input.tsx file.

import React, { useState } from 'react';
export type InputProps = {
  onAddTask: (task: string) => void;
};
export const Input = ({ onAddTask }: InputProps) => {
  const [task, setTask] = useState<string>('');
  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setTask(e.target.value);
  };
  const handleAddTask = () => {
    if (task.trim() !== '') {
      onAddTask(task);
      setTask('');
    }
  };
   return (
   <div>
     <input type="text" value={task} onChange={handleInputChange} placeholder="Type in here..."/>
     <button type="button" onClick={handleAddTask}>Add to the List</button>
   </div>
 );
};

Input.compostion.tsx: This code section handles task adding using onAddTask and updates the state while managing tasks using the Input component.

import React, {useState} from 'react';
import { Input } from './input';
export const InputComposition = () => {
  const [tasks, setTasks] = useState<string[]>([]);
  
  const handleAddTask = (task: string) => {
    setTasks([...tasks, task]);
  };
  return (
  <Input onAddTask={handleAddTask} />);
};

Once those files have been successfully built, you may use the commands below to export components to the bit cloud and create new copies of those files.

bit tag
bit export

React App development utilizing created component

We have completed the creation of numerous reusable parts that may be applied to any project. Now, let’s use those parts to create a basic React application.
Using the command below, you can use Bit to create a React application.

bit create react-app apps/demo

Replace “demo” with any other name for the application. This program creates a React application that integrates your components with ease. Next, open the demo.tsx component file in your browser and add the following code segment to it.

import {useState} from 'react';
import { Input } from '@boscorg/demo-scope.components.input/_src/input';
import { List } from '@boscorg/demo-scope.components.list/_src/list';
export function DemoApp() {
  const [tasks, setTasks] = useState<string[]>([]);
  const parentContainerStyle: React.CSSProperties = {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    height: '100vh',
  };
  const handleAddTask = (task: string) => {
    setTasks([...tasks, task]);
  };
  return (
    <div style={parentContainerStyle}>
      <h1>This is a Bit Demo</h1>
      <Input onAddTask={handleAddTask} />
      <h2>List</h2>
      {tasks.length === 0 ? ('Your List is empty'):<List tasks={tasks} />}
    </div>
  )
}

You can see that I have imported and repurposed the components of the previous builds.
Then, use the following command to open the App:

bit run demo

Once you run this command, you can view your application on its live server at localhost.

Bit Demo

You can now make more elements, such as headers and footers, and utilize them again in similar projects.

Method 2: Vite

Vite is a built-in tool designed to make current web development faster and easier to master. It is divided into two main sections.

Dev server: This offers substantial feature enhancement over native modules, including pre-bundling, hot module replacement, and support for typescript and JSX.

Build command: Vite uses a tool called Rollup to compile all your code into a set of static files that you can quickly upload to a web server so others can view them.

Why Is Vite Necessary?

We can talk about this under three broad headings.

  • Performance: Using Vite’s es-build for pre-bundling is significantly faster than other JS bundlers because it enhances page speed and converts standard/UMD modules to ESM.
  • Configuring options: By altering vite-config.ts or vite-config.js in your root file, you can customize the configuration parameters to provide you with more control over the setup of your project.
  • Hot module replacement: Vite allows you to update your app seamlessly without reloading the whole page. Furthermore, it is incorporated by default. Regardless of the size of your program, this feature will improve performance by making it lighter and faster.

How Can I Use Vite to Create a React App?

You must first enter the following command into the terminal. One may utilize “npm,” “pnpm,” “yarn,” or “Bun.” I carried on with npm.

npm create vite@latest

By posing the following queries, this command will initialize setups.

Create React App

They will then inquire about the project name. The project name can be anything you choose. Next, proceed to choose “React” as the framework. “TypeScript” was the option I chose. If you’d like, you can select any alternative.

You will thus get this message upon the successful completion of these procedures.

Procedures

Next, use “npm install” and “npm run dev” in your project directory using the instructions.This will launch a vite server on localhost port 5173. It will have the following appearance.

Vite React

Also, you can modify the port by appending this code to the vite.config.ts file after the plugins.

server: {
port: 5000,
},

You may have already noticed Vite’s speed if you’re paying attention. In contrast to the CRA technique, the server begins quickly when you perform the “npm run dev” command.

Additionally, Vite will provide you with the initial folder structure, as shown below.

package json

As you can see, there aren’t any unnecessary files besides the two SVG files. If you examine the package.json file, you can also see that they have already configured the scripts and installed the initial set of necessary dependencies, such as “typescript,” “react-dom,” and Eslint.

package json

You can now go directly to the development process. In addition, I made a basic auto-counting application for the example.

I created the demo.tsx file, added the code below, then made a “components” folder inside the src.

import { useState, useEffect } from 'react';
const Demo: React.FC = () => {
 const [value, setValue] = useState(0);
 useEffect(() => {
  const timeoutId = setTimeout(() => {
   setValue((prevValue) => prevValue + 1);
  }, 2000);
  return () => clearTimeout(timeoutId);
 }, [value])
 return (
   <>
     <div>Count : {value}</div>
     <p>Increased by one for every second</p>
    </>
 )
}
export default Demo;

I then went to the app.tsx, added the following code, and deleted the previous one.

import Demo from './components/demo';
import './App.css';
function App() {
 return (
  <>
   <h1>Vite + React</h1>
   <Demo />
  </>
 )
}
export default App

And this is how it ended up.

Vite- React End

Method 03: Refine

Refine is a meta-react-based web development framework. It’s an open-source web application solution with dashboards, B2B apps, admin panels, and internal tools. It excels at creating CRUD applications quickly and simply.

Fundamental Ideas of the Refine Framework
When using Refine to handle data, there are three key ideas to remember.

Idea 1: Information sources

Refine streamlines communication between data providers and APIs for React apps that require a lot of data. It serves as your app’s data layer. It abstracts the complexity of managing HTTP requests.

You can build custom providers using methods like create, update, delete, getList, etc., while following a predefined structure.

It’s crucial to remember that every contact takes place via data hooks in your Refine application, which calls the relevant data provider functions.

Idea 2: Data hookups

These greatly simplified the process for web developers to integrate with web apps. You can call any method in the data provider by using these hooks. Every data provider method has an associated data hook.

For instance, you can use the useCreateMany hooks to invoke the create data provider when utilizing the createMany method.

Additionally, hooks are designed to do specific functions like routing, authentication, data management, and more.

Idea 3: The Inferencer

This deals with automatically generating CRUD pages through resource schema-based data modal analysis.The use of this has three primary advantages.

  • Cut down on the time it takes to create views.
  • Instead of commencing from zero, the code produced by the Inferencer serves as a helpful foundation.
  • Steer clear of typical errors while creating crude procedures by hand.

Using Refine to build a React application

Start by entering the command below into the terminal. Yarn, pnpm, or npm can be used for package management.

npm create refine-app@latest

By posing these queries, this command will set up the basic configurations.

Refine to build a React applicationAs you can see, I utilized nothing for the UI framework and used react-vite as the project template with RESTful backend connectivity.

RESTful backend

Next, you can launch the development server on port 5173 in localhost by typing “npm run dev” into the terminal. This is how the website seems at first.

Refine

Use the terminal to execute the following command to start a crude operation. The Inferencer creates tables and forms using these packages.

npm i @pankod/refine-react-table @pankod/refine-react-hook-form
npm i @refinedev/inferencer

After that, you can add the code below and remove the App.tsx’s current code. Documentation is another way to obtain comprehensive information about the code.

import { Refine } from "@refinedev/core";
import routerBindings, { NavigateToResource, UnsavedChangesNotifier } from "@refinedev/react-router-v6";
import dataProvider from "@refinedev/simple-rest";
import { BrowserRouter, Route, Routes, Outlet } from "react-router-dom";
import { HeadlessInferencer } from "@refinedev/inferencer/headless";
import { Layout } from "./components/layout";
import "./App.css";
const App = () => {
  return (
    <BrowserRouter>
      <Refine
        routerProvider={routerBindings}
        dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
        resources={[
          {
            name: "posts",
            list: "/posts",
            show: "/posts/show/:id",
            create: "/posts/create",
            edit: "/posts/edit/:id",
          },
        ]}
        options={{
          syncWithLocation: true,
          warnWhenUnsavedChanges: true,
        }}
        <Routes>
          <Route
            element={
              <Layout>
                <Outlet />
              </Layout>
            }         
<Route index element={<NavigateToResource resource="posts" />} />
            <Route path="posts">
              <Route index element={<HeadlessInferencer />} />
              <Route path="show/:id" element={<HeadlessInferencer />} />
              <Route path="edit/:id" element={<HeadlessInferencer />} />
              <Route path="create" element={<HeadlessInferencer />} />
            </Route>
          </Route>
        </Routes>
        <UnsavedChangesNotifier />
      </Refine>
    </BrowserRouter>
  );
};
export default App;

I’ve utilized fictitious REST APIs that the JSON server provided for this. Its documentation has additional information that you can read.

Here, the Inference functionality will use the API response to construct the crud operations and their pages automatically for the “posts” resource.

post resources

This is how the first webpage will appear if you follow the steps. You can go to the page where posts are created, view a single post detail page, and modify the details of individual posts.

Post Create

Every page contains all of the automatically generated codes for the cruds.

The documentation contains instructions on how to use auto-generated code to develop crud actions manually.

You can modify the resource types in the code to any other types specified in the documentation, and you can see how the pages automatically change based on the data model.

Conclusion

As 2024 approaches, we can improve our current React workflows by incorporating third-party tools and investigating novel frameworks. It helps you reduce the amount of work of a monolithic app by breaking it down into smaller, more manageable parts. Vite provides cutting-edge functionality and a quick development experience. Refine also appears as a meta-framework that streamlines CRUD applications.

React developers must keep up with these cutting-edge tools to maintain their place in the ever-changing web development industry. You need to hire React JS experts from a top React app development firm to take your projects to the next level. This will guarantee you have the knowledge to handle these developments with ease.

For More Contact Us Today

 

Get in touch





    Stay up-to-date with our blogs