Building a Simple App with React

---

Let's create a simple to-do list app using React. Our app will have the capability to add tasks, mark them as done, and delete them. We'll use the useState hook for state management.

First, we'll set up our basic React structure:

import React, { useState } from 'react';

const App = () => {
  const [tasks, setTasks] = useState([]);
  const [newTask, setNewTask] = useState('');

  // function declarations go here...

  return (
    <div>
      <h1>My To-Do List</h1>
      {/* App content goes here... */}
    </div>
  );
};

export default App;

Now lets define the functions for adding tasks, marking tasks as done and deleting tasks:

import React, { useState } from 'react';

const App = () => {
  const [tasks, setTasks] = useState([]);
  const [newTask, setNewTask] = useState('');

  // function declarations go here...
const addTask = (task) => {
  const newTasks = [...tasks, { text: task, done: false }];
  setTasks(newTasks);
};

const toggleTaskDone = (index) => {
  const newTasks = [...tasks];
  newTasks[index].done = !newTasks[index].done;
  setTasks(newTasks);
};

const deleteTask = (index) => {
  const newTasks = [...tasks];
  newTasks.splice(index, 1);
  setTasks(newTasks);
};
// inside the App component...
  return (
    <div>
      <h1>My To-Do List</h1>
      {/* App content goes here... */}
    </div>
  );
};

export default App;

Finally we’ll design our app’s UI to display the tasks and handle user input:

import React, { useState } from 'react';

const App = () => {
  const [tasks, setTasks] = useState([]);
  const [newTask, setNewTask] = useState('');

  // function declarations go here...
const addTask = (task) => {
  const newTasks = [...tasks, { text: task, done: false }];
  setTasks(newTasks);
};

const toggleTaskDone = (index) => {
  const newTasks = [...tasks];
  newTasks[index].done = !newTasks[index].done;
  setTasks(newTasks);
};

const deleteTask = (index) => {
  const newTasks = [...tasks];
  newTasks.splice(index, 1);
  setTasks(newTasks);
};
// inside the App component...
  return (
    <div>
      <h1>My To-Do List</h1>
        <input value={newTask} onChange={(e) => setNewTask(e.target.value)} />
        <button onClick={() => addTask(newTask)}>Add Task</button>

         {tasks.map((task, index) => (
          <div key={index}>
            <input
               type="checkbox"
               checked={task.done}
               onChange={() => toggleTaskDone(index)}
             />
            {task.text}
              <button onClick={() => deleteTask(index)}>Delete</button>
         </div>
         ))}
    </div>
   );
 };

export default App;

And that’s it! We’ve just built a simple to-do list app using React. You can add tasks, mark them as done, and delete them. This example utilizes the useState hook for state management. Keep practicing and happy coding!