Build a To-Do List App with Phoenix, TypeScript, and React: A Step-by-Step Guide

Building a To-Do List App with Phoenix, TypeScript, and React

In this tutorial, we’ll explore how to create a simple to-do list application using the Phoenix framework, TypeScript, and React. We’ll delve into the setup process, creating the necessary components, and wiring up the API.

Prerequisites

Before we begin, ensure you have a working Elixir environment. Follow the official Elixir instructions for installation options, including local installation on Linux, Windows, and macOS, as well as Dockerized versions of Elixir. You’ll also need to have npm installed locally and a running version of PostgreSQL.

Setting Up Our Phoenix Application

First, install the Phoenix application generator and create our first Phoenix app. Run the following command:

mix archive.install https://github.com/phoenixframework/archives/raw/master/phx_new.ez

Then, create a new Phoenix application:

mix phx.new react_todo_list

Using TypeScript with Phoenix

Phoenix 1.6 introduced support for TypeScript out of the box, making it easier to work with React. Create a new file in the react_todo_list/assets/js folder called hello.ts and add the following code:
typescript
console.log('Hello, World!');

Next, import the file in the react_todo_list/assets/js/app.js file:
javascript
import './hello';

Using React with Phoenix

To add React to our application, run the following command in the assets folder:

npm install --save react react-dom @types/react @types/react-dom

Create a new file called react_hello.tsx in the react_todo_list/assets/js folder and add the following code:
“`typescript
import * as React from ‘react’;

const Hello = () => {
return

;
};

export default Hello;

Open the `react_todo_list/lib/react_todo_list_web/templates/page/index.html.heex` file and replace the code block with the following:
html


Finally, import the component in the `react_todo_list/assets/js/app.js` file:
javascript
import Hello from ‘./react_hello’;
“`
Building Our To-Do List App

Now that our base setup is complete, let’s start building our to-do list application. We’ll create the necessary components, including the task form, task item, and task list.

Create the following folders in the react_todo_list/assets/js folder:

• components
• react

Create an entry point for our React application under the react_todo_list/assets/js/react/index.jsx file and add the following code:
“`javascript
import React from ‘react’;
import ReactDOM from ‘react-dom’;
import App from ‘./App’;

ReactDOM.render(, document.getElementById(‘app’));

Update the `index.html.heex` file to mount our React application:
html

“`
Creating the To-Do List Components

Create the following components:

• TaskForm: Responsible for adding new tasks to the list
• TaskItem: Responsible for displaying a single task item
• TaskList: Responsible for displaying the list of tasks

Wiring Up the To-Do List API

We’ll start by making our list of tasks dynamic. Update the TaskList component to fetch the tasks from the API.

Seeding the Database

Seed the database with some initial data.

Complete and Remove a Task

Add functionality to complete and remove a task.

Add a New Task

Finally, add functionality to add a new task.

With this tutorial, you’ve learned how to create a simple to-do list application using Phoenix, TypeScript, and React. Experiment with this application and add new features to take your skills to the next level.