TypeScript with React: Building a Simple CRUD App

Written by

learnmodernjavascript

in

In the ever-evolving world of web development, building applications that can create, read, update, and delete (CRUD) data is a fundamental skill. This tutorial will guide you through the process of creating a simple CRUD application using TypeScript and React. We’ll focus on understanding the core concepts and best practices, making it perfect for developers who are new to TypeScript or looking to solidify their understanding.

Why TypeScript and React for CRUD?

TypeScript brings static typing to JavaScript, which helps catch errors early in the development process. This leads to more robust and maintainable code. React, on the other hand, is a powerful JavaScript library for building user interfaces. Combining them allows for a type-safe, component-based approach to building web applications. A CRUD application is an excellent project for learning these technologies because it touches on many important aspects of web development: data management, user interface design, and handling user interactions.

Prerequisites

Before we begin, ensure you have the following installed on your system:

  • Node.js and npm (Node Package Manager)
  • A code editor (like Visual Studio Code)

Setting Up the Project

Let’s start by creating a new React project with TypeScript. Open your terminal and run the following command:

npx create-react-app my-crud-app --template typescript
cd my-crud-app

This command creates a new React app named “my-crud-app” and uses the TypeScript template. The cd my-crud-app command navigates you into the project directory.

Project Structure Overview

After the project is created, your project structure will look similar to this:

my-crud-app/
├── node_modules/
├── public/
├── src/
│   ├── App.css
│   ├── App.tsx
│   ├── App.test.tsx
│   ├── index.css
│   ├── index.tsx
│   ├── react-app-env.d.ts
│   ├── logo.svg
│   └── reportWebVitals.ts
├── .gitignore
├── package-lock.json
├── package.json
├── README.md
├── tsconfig.json
└── yarn.lock

The core files we’ll be working with are:

  • src/App.tsx: This is where we’ll build our main application component.
  • src/index.tsx: This is the entry point for our React application.
  • tsconfig.json: This file configures the TypeScript compiler.

Creating the Data Model (Interface)

In TypeScript, we use interfaces to define the shape of our data. Let’s create an interface for our data, which in this case, will represent a simple item. Create a new file named src/models/Item.ts and add the following code:

// src/models/Item.ts
export interface Item {
  id: number;
  name: string;
  description: string;
}

This interface, Item, defines three properties: id (a number), name (a string), and description (a string). This structure will be used to ensure the data we work with conforms to a specific format throughout our application.

Building the Item Component

Next, let’s create a component to display each item. Create a new file named src/components/Item.tsx and add the following code:

// src/components/Item.tsx
import React from 'react';
import { Item } from '../models/Item';

interface Props {
  item: Item;
  onDelete: (id: number) => void;
  onUpdate: (id: number) => void;
}

const ItemComponent: React.FC = ({ item, onDelete, onUpdate }: Props) => {
  return (
    <div>
      <h3>{item.name}</h3>
      <p>{item.description}</p>
      <button> onUpdate(item.id)}>Update</button>
      <button> onDelete(item.id)}>Delete</button>
    </div>
  );
};

export default ItemComponent;

In this component:

  • We import the Item interface.
  • We define a Props interface for the component’s properties. This includes the item itself (of type Item), and onDelete and onUpdate functions (which will be used to handle deleting and updating items).
  • We use functional components with the React.FC type.
  • We display the item’s name and description.
  • We include “Update” and “Delete” buttons that call the onUpdate and onDelete functions, passing the item’s ID.

Creating the App Component (CRUD Operations)

Now, let’s modify the src/App.tsx file to implement the CRUD operations. Replace the content of src/App.tsx with the following code:

// src/App.tsx
import React, { useState } from 'react';
import './App.css';
import { Item } from './models/Item';
import ItemComponent from './components/Item';

function App() {
  const [items, setItems] = useState([
    {
      id: 1,
      name: 'Example Item',
      description: 'This is an example item.',
    },
  ]);

  const [nextId, setNextId] = useState(2);

  const handleAddItem = () => {
    const newItem: Item = {
      id: nextId,
      name: `New Item ${nextId}`,
      description: 'This is a new item.',
    };
    setItems([...items, newItem]);
    setNextId(nextId + 1);
  };

  const handleDeleteItem = (id: number) => {
    setItems(items.filter((item) => item.id !== id));
  };

  const handleUpdateItem = (id: number) => {
    const updatedItems = items.map(item => {
      if (item.id === id) {
        // In a real application, you'd have a form here to edit the item.
        // For now, we'll just update the description.
        return { ...item, description: `Updated description for ${item.name}` };
      }
      return item;
    });
    setItems(updatedItems);
  };

  return (
    <div>
      <h1>CRUD App</h1>
      <button>Add Item</button>
      {items.map((item) => (
        
      ))}
    </div>
  );
}

export default App;

Here’s a breakdown of the code:

  • We import useState from React, as well as the Item interface and the ItemComponent.
  • We initialize the items state with an array of Item objects. This represents the data that will be displayed and manipulated. We also initialize nextId to generate unique IDs.
  • handleAddItem: This function adds a new item to the items array. It creates a new Item object with a unique ID and default values, then updates the state using the spread operator to create a new array.
  • handleDeleteItem: This function removes an item from the items array based on its ID. It uses the filter method to create a new array containing only the items whose IDs do not match the provided ID.
  • handleUpdateItem: This function updates an item’s description in the items array based on its ID. It uses the map method to iterate through the items and updates the description of the matching item. In a real-world scenario, this function would likely involve a form for editing the item’s details.
  • We render the ItemComponent for each item in the items array, passing the item data, and the onDelete and onUpdate functions as props.
  • We include a button to add a new item, which calls the handleAddItem function.

Styling the Application

To make the application look better, let’s add some basic styling. Open src/App.css and add the following CSS rules:

.App {
  text-align: center;
  padding: 20px;
}

.App button {
  margin: 10px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
}

.App h3 {
  margin-bottom: 5px;
}

.App p {
  margin-bottom: 15px;
}

This CSS provides basic styling for the app, including centering the text, adding padding, and styling the buttons.

Running the Application

To run the application, navigate to your project directory in the terminal and run:

npm start

This will start the development server, and the application should open in your default web browser at http://localhost:3000 (or a different port if 3000 is unavailable).

Step-by-Step Instructions

Here’s a summarized step-by-step guide to building the CRUD application:

  1. Set up the Project: Use create-react-app with the TypeScript template.
  2. Define the Data Model: Create an Item interface in src/models/Item.ts.
  3. Build the Item Component: Create an ItemComponent in src/components/Item.tsx to display each item and handle actions.
  4. Implement CRUD Operations in App Component: Modify src/App.tsx to manage the state of the items and the CRUD functions.
  5. Add Styling: Add CSS in src/App.css.
  6. Run the Application: Use npm start to view the application in your browser.

Common Mistakes and How to Fix Them

Here are some common mistakes beginners make when working with TypeScript and React, along with solutions:

  • Type Errors: TypeScript will catch type errors during development. Make sure your data types match the interface definitions. Review the error messages carefully; they often provide valuable clues.
  • Incorrect State Updates: When updating state using useState, always create a new array or object to trigger a re-render. Avoid directly mutating the state. For example, use the spread operator (...) to create a copy of the array before modifying it: setItems([...items, newItem]);
  • Missing Props: When passing props to components, ensure you’ve defined the correct types in the component’s interface. If a prop is missing, TypeScript will flag an error.
  • Incorrect Imports: Double-check import statements to ensure you’re importing the correct modules and interfaces. Incorrect imports can lead to runtime errors.
  • Not Handling Asynchronous Operations: In a real-world application, you’ll likely fetch data from an API. Make sure to handle asynchronous operations (like API calls) correctly using async/await or Promises. Also, consider using a state variable to indicate loading and error states.

Adding More Features (Enhancements)

To expand on this basic CRUD app, you could add the following features:

  • Forms for Create and Update: Implement forms to allow users to add and edit items, rather than hardcoding the item details.
  • Data Persistence: Integrate a backend (e.g., using Node.js with Express and a database like MongoDB) to store the data permanently.
  • Error Handling: Implement more robust error handling, including displaying error messages to the user and logging errors.
  • User Interface Enhancements: Improve the user interface with more advanced components, styling, and layouts.
  • Input Validation: Add input validation to the forms to ensure data integrity.
  • Search and Filtering: Implement search and filtering functionalities to easily find items.
  • Pagination: For large datasets, implement pagination to improve performance and user experience.

Key Takeaways

  • TypeScript for Type Safety: TypeScript significantly improves code quality and maintainability by catching errors early.
  • React for UI Components: React allows you to build modular, reusable UI components.
  • CRUD Operations: Building a CRUD application is a fundamental exercise for web development.
  • State Management: Understanding how to manage state with useState is crucial in React.

FAQ

Here are some frequently asked questions about building CRUD applications with TypeScript and React:

  1. Why use TypeScript with React? TypeScript adds static typing to React applications, leading to better code organization, easier debugging, and improved developer productivity.
  2. How do I handle API calls in this application? You would typically use the fetch API or a library like Axios to make API calls to a backend server. You would then use the useState hook to manage the data fetched from the API.
  3. What is the purpose of the key prop in the map function? The key prop is essential when rendering lists of components in React. It helps React efficiently update the DOM by uniquely identifying each item in the list.
  4. How can I deploy this application? You can deploy your React application using services like Netlify, Vercel, or AWS Amplify. These services automatically handle the build and deployment process.

This tutorial provides a solid foundation for building CRUD applications with TypeScript and React. Remember, the key to mastering these technologies is practice. Experiment with the code, add new features, and try different approaches to solidify your understanding. The more you practice, the more confident you’ll become in your ability to build complex web applications.

Building a CRUD application is just the start. The knowledge gained from this project will serve as a stepping stone to more complex web development projects. As you continue to build and refine your skills, you’ll find yourself able to tackle increasingly challenging tasks. From simple data display to complex user interactions, the principles of TypeScript and React will remain central to your web development journey. The ability to create, read, update, and delete data is a fundamental skill, and by mastering it, you’ll be well-prepared for a wide range of web development tasks. Continual learning and experimentation are the keys to staying ahead in this dynamic field.

More posts