3 Ways to Get Started with a React App in 2024.pdf

3 Ways to Get Started with a
React App in 2024
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 scope: Bitscopes act as remote servers that let you export parts
for sharing and universal access.

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

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

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);
};

<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.

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.
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.
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.

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.

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.

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.

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.
As you can see, I utilized nothing for the UI framework and used
react-vite as the project template with RESTful backend connectivity.

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.

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,
}}

);
};
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.
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.

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.

3 Ways to Get Started with a React App in 2024.pdf

More Related Content

Similar to 3 Ways to Get Started with a React App in 2024.pdf (20)

More from BOSC Tech Labs (20)

Recently uploaded (20)

3 Ways to Get Started with a React App in 2024.pdf