Three ways to get started with a react app in 2024.

As we step into 2024, React remains a web development powerhouse, outstanding in seamlessly crafting dynamic and responsive user interfaces. Since its creation by Facebook, this open-source JavaScript library has gained significant popularity.

Since React.js is more popular among developers, it is critical to stay updated with React.js development in 2024 to get the spotlight among the other React.js developers.

Therefore, let’s take a look at three different ways in which you can create a React app in 2024, while focusing on improving developer experience!

Technique 01: Bit

Bit is a tool for component-driven development, enabling design, build, test, and versioning independently. Also, it can be introduced as a platform for creating and sharing components.

Bit components can be UI components, a backend service, or a CLI script.

Why Bit should be used with React?

Think about a simple react application that allows users to add inputs, and list them. So, according to this, there are two main components, Input and List.

But, we can use the “create react app” method easily for this situation. But, if the application begins to grow into a large monolith application, there can be some issues.

1. Slower deployment time.
2. Require full codebase access even for minor changes.
3. There can be versioning issues with global updates for single component changes.

Therefore, Bit comes into play in these kinds of situations. With Bit, you can design everything in independent components.

Bit helps to create apps like building Legos.

Building React Components using Bit

Let’s build the same components we discuss above.

Step 1: Pre-Requirements

First, install the Bit on your local development environment by using the below command.

npx @teambit/bvm install

Next, create the below items on Bit.

1. Create an account on Bit
2. Create a Bit organization
3. Create a Bit scope

Bit Organization: It is a shared space for developers’ groups for projects.

Bit scope: A Bit Scope serves as a remote server, allowing you to export components for universal access and sharing

Step 2: Workspace creation

Now, we can create a Bit workspace using the below command.

bit new react my-workspace --env teambit.react/react-env --default-scope anjanaOrg.demo

You can replace “yourOrgnizationName.your-scope” with your relevant Bit Organization name and the scope name.

Also, you can change the workspace name by replacing “my-workspace”

What’s a Bit workspace? Well, a Bit workspace is a disposable environment you’ll use to work on your Bit components.

Each Bit component contains its environment that contains all the details that need to be run independently. Therefore, Bit Workspace is only for development, not project configuration.

Now you can launch the app using the below command.

bit start

Go to http://localhost:3000 in your browser. Currently, your workspace is empty as no component is being tracked.

Step 3: Creating Bit component

You can create a bit component by using the below command.

bit create react components/Input

Like that, you can create another component for the List.

And folder structure will look like this.

As you can see there are main 5 files in each component.

1. Index file: Act as the component root file.
2. Component file: Used to add core business logic of the component
3. Composition: Used to define component variants.
4. Spec file: Component testing file
5. Documentation file: Used to explain the component’s usage with live examples.

Step 4: Creating Component and Composition files

import React from 'react';

export type ListProps = {
  tasks: string[];
};
export const List = ({ tasks }: ListProps) => {
  return (
    <ul>
      {tasks.map((task, index) => (
        <li key={index}>
          {task}
        </li>
      ))}
    </ul>
  );
};

list.composition.tsx: This renders the List component with an empty task array, initializing state.

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: This will allow users to add task to the list by clicking a button.

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 segment manages tasks with the Input component, updating state and handling task addition through onAddTask.

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

Now after you have created those files successfully, you can create new versions for components and export components to the bit cloud using the below commands.

bit tag
bit export

Building React App using created component

Currently, we are done with creating multiple reusable components that can be used in any project. So, let’s build a simple React app using those components. With bit, you can create a React app using the below command.

bit create react-app apps/demo

You can use any name for the app by replacing “demo”. This command generates a React app that works seamlessly integrating your components. Then open your component file(demo.tsx) and include below code segment into it.

import {useState} from 'react';
import { Input } from '@anjanaorg/demo.components.input';
import { List } from '@anjanaorg/demo.components.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>
  )
}

As you can see, I have imported and reused the components we’ve built before.

Next, launch the app by running the following command:

bit run demo

After executing this command, you’ll have the opportunity to observe your application on its live server http://localhost:3000/.

Now, you can create more components such as headers or footers, and re-use them in other projects like this ave example.