DEV Community

Cover image for Learn TypeScript with React By Building a CRUD Application
Ritesh Patil
Ritesh Patil

Posted on

2

Learn TypeScript with React By Building a CRUD Application

TypeScript is a powerful programming language that enhances the development of complex web applications by adding a static type system to JavaScript. React is a popular JavaScript library used for building user interfaces. Combining these two technologies can take your web development to the next level.

If you want to refer the code for this entire project, you can download it from here.
Setup your development environment

Install Node.js and npm (Node Package Manager) if you haven't already done so
Create a new React project using create-react-app
Install the necessary dependencies:

npm install --save typescript @types/react @types/react-dom @types/node
Enter fullscreen mode Exit fullscreen mode

Rename the src/index.js file to src/index.tsx
Update the scripts section in package.json to use TypeScript:

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject",
  "start:ts": "react-scripts start --template typescript",
  "build:ts": "react-scripts build --template typescript",
  "test:ts": "react-scripts test --template typescript"
}
Enter fullscreen mode Exit fullscreen mode

Define the data model and create the API

Define the interface for the data model in src/models/todo.ts

export interface Todo {
  id: number;
  title: string;
  completed: boolean;
}

Enter fullscreen mode Exit fullscreen mode

Create a mock API to simulate fetching and updating data in src/services/todo.ts

import { Todo } from '../models/todo';

let todos: Todo[] = [
  { id: 1, title: 'Buy milk', completed: false },
  { id: 2, title: 'Walk the dog', completed: true },
  { id: 3, title: 'Finish the project', completed: false },
];

export function getTodos(): Promise<Todo[]> {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(todos);
    }, 500);
  });
}

export function saveTodo(todo: Todo): Promise<Todo> {
  return new Promise(resolve => {
    setTimeout(() => {
      const index = todos.findIndex(t => t.id === todo.id);
      if (index === -1) {
        todos.push(todo);
      } else {
        todos[index] = todo;
      }
      resolve(todo);
    }, 500);
  });
}

export function deleteTodo(id: number): Promise<void> {
  return new Promise(resolve => {
    setTimeout(() => {
      todos = todos.filter(t => t.id !== id);
      resolve();
    }, 500);
  });
}

Enter fullscreen mode Exit fullscreen mode

Create the components

Create the TodoList component in src/components/TodoList.tsx

import { useState, useEffect } from 'react';
import { Todo } from '../models/todo';
import { getTodos, saveTodo, deleteTodo } from '../services/todo';

function TodoList() {
  const [todos, setTodos] = useState<Todo[]>([]);

  useEffect(() => {
    getTodos().then(data => setTodos(data));
  }, []);

  function handleSave(todo: Todo) {
    saveTodo(todo).then(data => {
      const index = todos.findIndex(t => t.id === data.id);
      if (index === -1) {
        setTodos([...todos, data]);
      } else {
        todos[index] = data;
        setTodos([...todos]);
      }
    });
  }

  function handleDelete(id: number) {
    deleteTodo(id).then(() => {
      setTodos(todos.filter(t => t.id !== id));
    });
  }

  return (
    <div>
      <ul>
        {todos.map(todo

Enter fullscreen mode Exit fullscreen mode

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay