Master React: Build Real-World React Project from scratch

Master React: Build Real-World React Project from scratch

React has become one of the most popular JavaScript libraries for building modern, interactive web applications. 

Buy Now

Whether you’re a beginner or an experienced developer, mastering React can open up a world of opportunities. In this guide, we'll walk through building a real-world React project from scratch, covering core concepts, best practices, and the essential tools and libraries that help streamline the development process.

Introduction to React

React is an open-source JavaScript library developed by Facebook, used primarily for building user interfaces, especially single-page applications (SPAs). It allows developers to build reusable UI components, manage application state efficiently, and create dynamic web applications that respond seamlessly to user interactions.

At its core, React revolves around a few key concepts:

• Components: The building blocks of any React application. Components can be class-based or functional, and they represent chunks of the user interface that can be reused across the application.
• JSX: A syntax extension for JavaScript that allows you to write HTML-like code directly within your JavaScript. JSX is transformed into JavaScript behind the scenes, and it’s essential for creating React elements.
• State: Represents the internal data of a component. When the state of a component changes, React re-renders the component to reflect the updated state.
• Props: Short for "properties," these are inputs that are passed from a parent component to a child component. Props are immutable and are used to configure components.
• Virtual DOM: React maintains a virtual representation of the DOM, which allows for efficient updates by only changing the parts of the actual DOM that need to be updated.

Now that we have an understanding of the fundamentals, let’s dive into building a real-world React project from scratch.

Setting Up the Development Environment

Before we begin building, it's essential to set up the necessary tools for a React project.

Prerequisites

• Node.js: React applications are typically built using Node.js, which provides a runtime for executing JavaScript on the server. Download and install Node.js from the official website (https://nodejs.org).
• npm or Yarn: These are package managers that allow you to install and manage third-party libraries and dependencies for your project. Both npm (comes bundled with Node.js) and Yarn are widely used.

Creating the React App

The easiest way to set up a new React project is by using the Create React App (CRA) command-line tool. This tool comes with a default configuration, so you don’t need to worry about setting up Webpack, Babel, or other dependencies manually.

Run the following command to create a new React project:

bash
npx create-react-app my-react-app
cd my-react-app
npm start

Once the project is created, npm start will run the application, and you'll be able to see your new React app running in the browser at http://localhost:3000.

Building a Real-World Project: A Task Manager

Let’s build a simple task manager application, where users can add, delete, and mark tasks as complete. This app will help us understand React's key concepts while creating a functional and interactive project.

Step 1: Structuring the Project

A well-structured React project makes it easier to scale and maintain. We'll follow a typical React file structure:

arduino
src/
  components/
    Task.js
    TaskList.js
    TaskForm.js
  App.js
  index.js
  App.css

• components/: This directory contains reusable components, such as individual tasks, task lists, and the task form.
• App.js: The main component where all other components come together.
• index.js: The entry point of our React application.

Step 2: Creating the Task Component

We’ll start by creating the Task.js component, which will represent individual tasks in our task manager. This component will display the task description and have buttons to mark the task as complete or delete it.

jsx
// Task.js
import React from 'react';

const Task = ({ task, onComplete, onDelete }) => {
  return (
    <div className={`task ${task.completed ? 'completed' : ''}`}>
      <p>{task.description}</p>
      <button onClick={() => onComplete(task.id)}>Complete</button>
      <button onClick={() => onDelete(task.id)}>Delete</button>
    </div>
  );
};

export default Task;

In this component:

• We receive the task as a prop, which contains the task's description and status (completed or not).
• onComplete and onDelete are callback functions passed from the parent component that handle marking the task as complete and deleting it, respectively.

Step 3: Creating the TaskList Component

Next, let’s create the TaskList.js component, which will render a list of tasks by mapping over an array of task objects.

jsx
// TaskList.js
import React from 'react';
import Task from './Task';

const TaskList = ({ tasks, onComplete, onDelete }) => {
  return (
    <div className="task-list">
      {tasks.length > 0 ? (
        tasks.map((task) => (
          <Task
            key={task.id}
            task={task}
            onComplete={onComplete}
            onDelete={onDelete}
          />
        ))
      ) : (
        <p>No tasks available</p>
      )}
    </div>
  );
};

export default TaskList;

This component:

• Takes an array of tasks and maps over it, rendering a Task component for each task.
• Also receives onComplete and onDelete functions, passing them down to each Task component.

Step 4: Creating the TaskForm Component

We need a way to add new tasks. For this, we’ll create the TaskForm.js component, which will include a simple form with an input field and a submit button.

jsx
// TaskForm.js
import React, { useState } from 'react';

const TaskForm = ({ onAdd }) => {
  const [description, setDescription] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (description.trim()) {
      onAdd(description);
      setDescription('');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={description}
        onChange={(e) => setDescription(e.target.value)}
        placeholder="Enter a new task"
      />
      <button type="submit">Add Task</button>
    </form>
  );
};

export default TaskForm;

In this component:

• We use the useState hook to manage the input field’s state.
• On form submission, the onAdd function (passed from the parent component) is called with the task description.

Step 5: Assembling the App Component

Now that we have our individual components, let’s bring everything together in the App.js file.

jsx
// App.js
import React, { useState } from 'react';
import TaskList from './components/TaskList';
import TaskForm from './components/TaskForm';
import './App.css';

const App = () => {
  const [tasks, setTasks] = useState([]);

  const addTask = (description) => {
    const newTask = {
      id: Date.now(),
      description,
      completed: false,
    };
    setTasks([...tasks, newTask]);
  };

  const completeTask = (id) => {
    setTasks(
      tasks.map((task) =>
        task.id === id ? { ...task, completed: !task.completed } : task
      )
    );
  };

  const deleteTask = (id) => {
    setTasks(tasks.filter((task) => task.id !== id));
  };

  return (
    <div className="app">
      <h1>Task Manager</h1>
      <TaskForm onAdd={addTask} />
      <TaskList tasks={tasks} onComplete={completeTask} onDelete={deleteTask} />
    </div>
  );
};

export default App;

In this component:

• We use the useState hook to manage the list of tasks.
• We implement the functions addTask, completeTask, and deleteTask, which handle adding new tasks, marking tasks as complete, and deleting tasks, respectively.
• The TaskForm and TaskList components are used to render the form and the list of tasks.

Step 6: Adding Basic Styling

Let’s add some basic CSS to style our application. Create a App.css file and include the following styles:

css
/* App.css */
.app {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

.task {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border: 1px solid #ccc;
  margin-bottom: 10px;
}

.completed {
  text-decoration: line-through;
  color: gray;
}

button {
  margin-left: 10px;
}

form {
  display: flex;
  margin-bottom: 20px;
}

input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
  margin-right: 10px;
}

button {
  padding: 10px 20px;
}

This basic styling will give the task manager a clean, simple layout.

Conclusion

Building a real-world React project from scratch helps solidify your understanding of core React concepts, such as components, state, props, and event handling. With this task manager project, you now have a strong foundation in structuring React applications, managing component state, and handling user interactions.

From here, you can expand the project by adding features such as editing tasks, filtering tasks by their status (completed or pending), and even persisting tasks to local storage or a backend API.

The key to mastering React is practice. As you build more complex projects, you’ll become more comfortable with the library, and you’ll be able to take advantage of its rich ecosystem of tools and libraries to create scalable, high-performance applications.

Master Neural Networks: Build with JavaScript and React Udemy