Develop a Task Manager Application using React JavaScript
**Creating a Simple To-Do App Using ReactJS and React-Bootstrap**
In this guide, we will walk you through creating a To-Do app using ReactJS with class-based components and React-Bootstrap for styling. This project will serve as a learning experience for ReactJS.
**Project Setup**
To get started, initialize a new React app using Create React App:
```bash npx create-react-app todo-app cd todo-app ```
Next, install React-Bootstrap and Bootstrap:
```bash npm install react-bootstrap bootstrap ```
Import Bootstrap CSS in your `src/index.js` or `src/App.js`:
```js import 'bootstrap/dist/css/bootstrap.min.css'; ```
**Folder Structure**
Organize your source folder as follows:
``` src/ ├── components/ │ ├── App.js # Root component │ ├── TodoList.js # Component managing list and state │ └── TodoItem.js # Individual todo item component ├── index.js └── App.css # Styling (optional beyond Bootstrap) ```
**Component Implementation Using Class Components**
- **App.js**: Main entry component that renders `TodoList`. - **TodoList.js**: Class component to maintain state for the tasks (todos), handle adding, deleting, and toggling tasks. - **TodoItem.js**: Class component representing each todo task with a checkbox and delete button.
**Sample Code Snippets**
Here's a simplified example illustrating each component:
#### App.js
```jsx import React, { Component } from 'react'; import TodoList from './TodoList'; import { Container } from 'react-bootstrap';
class App extends Component { render() { return ( ); } }
export default App; ```
#### TodoList.js
```jsx import React, { Component } from 'react'; import TodoItem from './TodoItem'; import { Form, Button, ListGroup } from 'react-bootstrap';
class TodoList extends Component { state = { todos: [], currentInput: '' };
handleInputChange = (e) => { this.setState({ currentInput: e.target.value }); };
addTodo = (e) => { e.preventDefault(); if (this.state.currentInput.trim() === '') return; const newTodo = { id: Date.now(), text: this.state.currentInput, completed: false }; this.setState((prevState) => ({ todos: [...prevState.todos, newTodo], currentInput: '' })); };
toggleComplete = (id) => { const updatedTodos = this.state.todos.map(todo => todo.id === id ? { ...todo, completed: !todo.completed } : todo ); this.setState({ todos: updatedTodos }); };
deleteTodo = (id) => { const filteredTodos = this.state.todos.filter(todo => todo.id !== id); this.setState({ todos: filteredTodos }); };
render() { return ( <>
> ); } }
export default TodoList; ```
#### TodoItem.js
```jsx import React, { Component } from 'react'; import { ListGroup, FormCheck, Button } from 'react-bootstrap';
class TodoItem extends Component { handleToggle = () => { this.props.toggleComplete(this.props.todo.id); };
handleDelete = () => { this.props.deleteTodo(this.props.todo.id); };
render() { const { todo } = this.props; return ( ); } }
export default TodoItem; ```
**Running the Application**
- Start the app locally:
```bash npm start ```
- A browser window will open at `http://localhost:3000` showing your To-Do app.
This approach provides a well-structured, styled, and functional To-Do app using ReactJS class components and React-Bootstrap. You can now add, delete, and toggle tasks in your new To-Do app. Happy coding!
In this guide for creating a To-Do app using ReactJS and React-Bootstrap, we will introduce technology to manage state for tasks, handle adding, deleting, and toggling tasks using class components, where math will be used to generate unique IDs for each task. To make the app aesthetically pleasing, we will style it using Bootstrap, a popular front-end framework, and its companion, React-Bootstrap.
