{"id":32831,"date":"2024-11-01T09:11:51","date_gmt":"2024-11-01T09:11:51","guid":{"rendered":"http:\/\/atmokpo.com\/w\/?p=32831"},"modified":"2024-11-01T11:21:49","modified_gmt":"2024-11-01T11:21:49","slug":"react-course-to-do-app-example-rendering-a-to-do-list","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/32831\/","title":{"rendered":"React Course: To Do App Example – Rendering a To Do List"},"content":{"rendered":"

<\/p>\n

\n
\n

Author: [Your Name]<\/p>\n

Date: [Date]<\/p>\n<\/header>\n

\n

Introduction<\/h2>\n

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.<\/p>\n<\/section>\n

\n

1. Setting Up the Development Environment<\/h2>\n

Before starting development with React, you first need to set up the development environment. Follow the steps below.<\/p>\n

    \n
  1. \nInstall Node.js:<\/strong><\/p>\n

    Node.js is required to use React. Download and install the latest version from the official Node.js site<\/a>.<\/p>\n<\/li>\n

  2. \nInstall Create React App:<\/strong><\/p>\n

    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.<\/p>\n

    npx create-react-app todo-app<\/code><\/pre>\n
    Executing this command will create a folder called `todo-app`, and a basic React project will be set up.<\/p>\n<\/li>\n
  3. \nNavigate to Project Folder:<\/strong><\/p>\n
    Enter the following command to navigate to the project folder.<\/p>\n
    cd todo-app<\/code><\/pre>\n<\/li>\n
  4. \nRun the Development Server:<\/strong><\/p>\n
    You can run the development server to check your React application. Enter the following command.<\/p>\n
    npm start<\/code><\/pre>\n
    Opening http:\/\/localhost:3000<\/code> in your browser will display the default React application.<\/p>\n<\/li>\n<\/ol>\n<\/section>\n
    \n
    2. Understanding the Basic Structure<\/h2>\n
    The building blocks of React are components. Each component defines a part of the UI and has state and props.<\/p>\n
    Now, we will create a component that will render the To Do list.<\/p>\n<\/section>\n
    \n
    3. Creating the To Do Component<\/h2>\n
    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.<\/p>\n
    \n\/\/ Todo.js\nimport React from 'react';\n\nfunction Todo({ todo }) {\n    return (\n        
    \n            
    {todo.text}<\/h3>\n            
    Completion Status: {todo.completed ? 'Completed' : 'Not Completed'}<\/p>\n        <\/div>\n    );\n}\n\nexport default Todo;\n            <\/code><\/pre>\n
    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.<\/p>\n<\/section>\n
    \n
    4. Rendering the Todo List<\/h2>\n
    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.<\/p>\n
    \n\/\/ App.js\nimport React from 'react';\nimport Todo from '.\/Todo';\n\nconst todoList = [\n    { text: 'Learn the basics of React', completed: false },\n    { text: 'Create a React project', completed: false },\n    { text: 'Deploy a React app', completed: true },\n];\n\nfunction App() {\n    return (\n        
    \n            
    To Do List<\/h1>\n            
    \n                {todoList.map((todo, index) => (\n                    <\/Todo>\n                ))}\n            <\/div>\n        <\/div>\n    );\n}\n\nexport default App;\n            <\/code><\/pre>\n
    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.<\/p>\n<\/section>\n
    \n
    5. Adding Styles<\/h2>\n
    To make the application look better, we will add CSS styles. Open the `App.css` file and add the following styles.<\/p>\n
    \n.todo {\n    border: 1px solid #ccc;\n    padding: 10px;\n    margin: 10px 0;\n    border-radius: 5px;\n    background-color: #f9f9f9;\n}\n\n.App {\n    max-width: 600px;\n    margin: 0 auto;\n    padding: 20px;\n    font-family: Arial, sans-serif;\n}\n\nh1 {\n    text-align: center;\n}\n            <\/code><\/pre>\n
    The above styles add padding and margin to each to-do item to visually separate them, as well as center alignment and font styling.<\/p>\n<\/section>\n
    \n
    6. Conclusion<\/h2>\n
    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.<\/p>\n
    The journey of learning React continues. In the next tutorial, we’ll develop features to add and delete tasks, creating a richer application.<\/p>\n<\/section>\n