Introduction

In recent years, React has become one of the most popular libraries in the field of web development. It is very useful for creating and managing user interfaces, and thanks to its component-based architecture, it enhances code reusability and maintainability. In this article, we will create a simple To Do list application using React. In the first chapter of this tutorial, we will learn how to render a list.

1. Setting Up the Development Environment

Before starting development with React, you first need to set up the development environment. Follow the steps below.

1. Install Node.js:

   Node.js is required to use React. Download and install the latest version from the official Node.js site.

2. Install Create React App:

   Create React App is a tool that helps you easily start a React project. Open your terminal and enter the following command to install it.

   npx create-react-app todo-app

   Executing this command will create a folder called `todo-app`, and a basic React project will be set up.

3. Navigate to Project Folder:

   Enter the following command to navigate to the project folder.

   cd todo-app

4. Run the Development Server:

   You can run the development server to check your React application. Enter the following command.

   npm start

   Opening http://localhost:3000 in your browser will display the default React application.

2. Understanding the Basic Structure

The building blocks of React are components. Each component defines a part of the UI and has state and props.

Now, we will create a component that will render the To Do list.

3. Creating the To Do Component

First, create a file named `Todo.js` inside the `src` folder. In this file, we will create a component to render the to-do items.

// Todo.js
import React from 'react';

function Todo({ todo }) {
    return (
        

            
{todo.text}
            
Completion Status: {todo.completed ? 'Completed' : 'Not Completed'}
        
    );
}

export default Todo;
            

The code above defines a component called `Todo`. This component receives `todo` as a prop and renders the text and completion status of that item.

4. Rendering the Todo List

Now, let’s create a component that actually renders the to-do list. We will modify the `App.js` file to display the to-do list.

// App.js
import React from 'react';
import Todo from './Todo';

const todoList = [
    { text: 'Learn the basics of React', completed: false },
    { text: 'Create a React project', completed: false },
    { text: 'Deploy a React app', completed: true },
];

function App() {
    return (
        

            
To Do List
            

                {todoList.map((todo, index) => (
                    
                ))}
            
        
    );
}

export default App;
            

In the above code, the `todoList` array stores the list of to-dos to be rendered. Using the `map` method, we render each `todo` item and call the `Todo` component to output the details of that item.

5. Adding Styles

To make the application look better, we will add CSS styles. Open the `App.css` file and add the following styles.

.todo {
    border: 1px solid #ccc;
    padding: 10px;
    margin: 10px 0;
    border-radius: 5px;
    background-color: #f9f9f9;
}

.App {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    font-family: Arial, sans-serif;
}

h1 {
    text-align: center;
}
            

The above styles add padding and margin to each to-do item to visually separate them, as well as center alignment and font styling.

6. Conclusion

In this tutorial, we created a simple to-do list app using React and learned how to render list items. You now understand the basic React components and how to display data to users using them. Subsequent tutorials will cover state management and additional feature implementations.

The journey of learning React continues. In the next tutorial, we’ll develop features to add and delete tasks, creating a richer application.