How to build a simple Task Manager with React

I got tired of answering with a “No” to the question “Do you React?” :), so I decided to learn it, document my built project with this article and hopefully help someone else that is on the same challenge of learning React.

When learning something new, I choose to start with the simplest examples and this time it was a Todo List i.e. Task Manager.

By the way, on this journey, I realized why React is an amazing library! :)

Setup

We will be using node.js and npm (they come together) which are required to run our React app.

Also, we will be using a public API to make some requests to get and store data. The API in question is JSONPlaceholder.

We’ll create a React app by running the following command:

npx create-react-app <name-of-your-app>

Yes, it’s npx, not npm :)

By the way, npx is a tool for executing Node packages that comes bundled with npm starting with npm5.2 version onward.

Okay, so now we have the React app initialized and we can start creating the needed components.

The implementation

For the Task Manager we will create only three components (TaskList, Loader and the main TaskApp) just to keep it simple and straightforward.

Task List Component

Our TaskList component is actually an unordered list <ul>.

It’s consisted of a constructor, three methods and the default render method.

Just to be clearer as for what each method is doing:

• constructor: Calls the super(props) which refers to the parent class constructor and its properties and also, here we bind the this instance to the methods that use the state of the TaskList component, so we can access it in them;

If we don’t need the state in some method, there is no need to bind the this instance to it.

• displayTask: This method, as its name already says it all, is just displaying a particular task which in practical terms means that it just adds a <li> item to the Task List. It receives a task as a parameter which is an object that we get from the list of tasks that is received as a response from the request made to the API. This object is the source from which we get all of the needed data that should be displayed about a single Task such as id, title, info if the task is completed, etc;

• updateTaskStatus: This method receives a task as a parameter and sets its status as completed by sending a request to the API, with the completed field as true, and on success of the request we strikethrough the task meaning that now it’s done;

• finishTask: This method receives an event as a parameter from which we get the currently selected task and pass it to the updateTaskStatus method;

• render: The default render method has the code that defines what is happening when the component is rendered. In this case, when the TaskList component is rendered what happens is the following:

1. We check if the number of items (tasks) is not equal to zero i.e. if the array of items is not empty;
2. If true, we loop through all of them and we display each task i.e. we call the displayTask method for each task;
3. Else, we’re showing a notification to the user that they don’t have any tasks at the moment.

Loader Component

The Loader component is needed so we can show the user that something is being done while the requests are being sent.

This component consists two methods:

• updateLoaderVisibility: Updates the state of the visible property of the Loader (true -> Visible & false -> Hidden);
• render: Defines the HTML structure of the Loader itself and sets the Loader to be hidden or not depending on the current state of the visible property;

Task App Component

The TaskApp Component is the parent component in our case and it’s consisted of multiple methods, constructor and the default render method. More on their functionality below:

• constructor: As always, here we call the super(props) and we bind the this instance to the methods of the TaskApp component. Also, in this constructor, we set the default state of the properties which are the items (tasks), the current task and the Ref to the Loader component and a Ref to the task input. The default state of the three of the properties, as it can be seen in the constructor, is: items=[] (we have no tasks by default) and task='' (we have no task to add by default).

React Refs are a way to access and manipulate DOM nodes or React components.

In our case we use them:

1. To change Loader’s visibility state i.e. to switch the Loader component from hidden to shown and vice versa;
2. To focus the task input when needed;

More about React Refs here .

• render: In the render method of this component we have the Loader component included which has a Ref of the loaderInstance defined, as well as the TaskList component with which we share the current state of the items and a form which we will use to add new tasks to the list. The form itself is very simple and is consisted of only a text input and a submit button. On change of the input we call the onInputChange method and the value of the input is the current state of the task property. On submit of the form we call the addTask method.

• onInputChange: This method receives the event as a parameter from which it gets the current value of the input and it sets the current state of the task to be equal to that value;

• addTask: This method is being executed on click of the submit button of the form. By the way, it also receives the event as a parameter and that’s needed just to prevent the default behavior of the event of submitting a form. Aside from this, the function checks if the current value of the task is empty and if so, it gives an alert to the user that the value of the task (the task input) cannot be empty, else if it’s not empty it shows the Loader, then the storeTask method is called and eventually it sets the current state of the task to an empty string, so it’s ready for the next task that should be added.

• storeTask: This method makes a POST request to the API with which we store the task with all the needed data. All tasks are stored as being uncompleted by default and the userId (the user that the tasks belong to) is 1 by default. On success of the request, we get the response that has the stored task inside and we add it to the array of items i.e. we change the current state of the items property to be richer by one task more.

• fetchTasks: This method makes a GET request to the API with which we get a list of Tasks for the user with id=1 and on success of the request we set the current state of the items to be equal to the list that we got as a response from the request and at the end we hide the loader which was set to be shown in the componentDidMount method.

• componentDidMount: This method is the one that is being executed once the TaskApp component is rendered. Here, we only show the loader and call the fetchTasks method. Actually, this is what happens on load of the home page of this tiny app.

CSS organization

Just a quick explanation of the organization of the CSS files.

Namely, to follow the principles of the component-based development, we’ve created three separate CSS files (one for each component: TaskList.css, Loader.css and App.css ) and we’re importing the corresponding needed CSS style for each component separately.

Conclusion

It was fun to build this tiny app and hopefully by following along you also learned something.

There are improvements to be made like in any app, feel free to fork it and edit it. You can find the code in this Github repo.

Any step that was omitted can probably be found in the README of the repo or you can ask away.

Keep coding, do awesome stuff and stay happy! :)