Introduction

ReactJS is a popular JavaScript library used to build user interfaces, particularly for single-page applications. It's used for handling the view layer in web and mobile apps. React allows you to design simple views for each state in your application, and it efficiently updates and renders the right components when your data changes.

In this blog post, we're going to build a simple to-do list application using ReactJS. A to-do list is a list of tasks that need to be completed. In our application, the user will be able to add new tasks, mark tasks as completed, and delete tasks.

Don't worry if you've never used ReactJS before. This tutorial is designed for beginners and I'll explain everything as we go along. Let's get started!

Setting Up Your Environment

Before we can start coding, we need to set up our environment. We'll be using Node.js and npm (Node Package Manager) to manage our ReactJS project. If you don't have Node.js and npm installed on your machine, you can download them from here.

Once you've installed Node.js and npm, you can create a new ReactJS project by running the following command in your terminal:

npx create-react-app todo-app

This command will create a new directory called todo-app with all the files and dependencies you need to start a new ReactJS project.

Creating a New Component

In React, everything is a component. A component in React is a reusable piece of code that controls a part of the UI.

For our to-do list application, we'll create a TodoList component. This component will be responsible for displaying the list of tasks.

Here's what the code for our TodoList component looks like:

import React from 'react';

class TodoList extends React.Component {
    render() {
        return (
            <div className="todo-list">
                <ul>
                    {this.props.tasks.map(task => (
                        <li key={task.id}>{task.text}</li>
                    ))}
                </ul>
            </div>
        );
    }
}

export default TodoList;

In this code, we're creating a new component called TodoList. This component takes a prop called tasks (which is an array of tasks) and displays them in an unordered list (<ul>). Each task is displayed in a list item (<li>).

Adding New Tasks

Now that we have a component to display our tasks, we need a way for the user to add new tasks.

We'll create a new component called AddTask. This component will contain a form with an input field and a button. When the user submits the form, a new task will be added to the list.

Here's how we can implement this:

import React from 'react';

class AddTask extends React.Component {
    state = { text: '' };

    handleChange = event => {
        this.setState({ text: event.target.value });
    };

    handleSubmit = event => {
        event.preventDefault();
        if (this.state.text !== '') {
            this.props.addTask(this.state.text);
            this.setState({ text: '' });
        }
    };

    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <input
                    type="text"
                    value={this.state.text}
                    onChange={this.handleChange}
                    placeholder="Add a new task"
                />
                <button type="submit">Add Task</button>
            </form>
        );
    }
}

export default AddTask;

In this code, we're creating a new component called AddTask. This component has a state that keeps track of the text input by the user. When the user submits the form, the handleSubmit method is called. This method checks if the input is not empty, and if it's not, it calls the addTask method (which we passed as a prop) with the input text, and then it resets the input field.

Completing and Deleting Tasks

The last feature we need to add is the ability to mark tasks as completed and delete tasks.

We'll add these features to our TodoList component. Here's how we can do it:

import React from 'react';

class TodoList extends React.Component {
    render() {
        return (
            <div className="todo-list">
                <ul>
                    {this.props.tasks.map(task => (
                        <li key={task.id}>
                            <span
                                className={task.completed ? 'completed' : ''}
                                onClick={() => this.props.toggleComplete(task.id)}
                            >
                                {task.text}
                            </span>
                            <button onClick={() => this.props.deleteTask(task.id)}>
                                Delete
                            </button>
                        </li>
                    ))}
                </ul>
            </div>
        );
    }
}

export default TodoList;

In this code, we've added a span element around the task text. This span element has a click event listener that calls the toggleComplete method (which we passed as a prop) when the user clicks on the task text.

We've also added a button element with a click event listener that calls the deleteTask method (which we passed as a prop) when the user clicks on the button.

Conclusion

That's it! You've just built a simple to-do list application using ReactJS.

Remember, React is all about components. By breaking down our application into smaller components, we can manage the complexity of our application and make our code easier to understand and maintain.

I hope this tutorial helped you understand the basics of React and how to build a simple application. Keep practicing and happy coding!