In this article, we will create a to-do app to understand the basics of ReactJS. We will be working with class based components in this application and use the React-Bootstrap module to style the components. This to-do list can add new tasks we can also delete the tasks by clicking on them. The logic is handled by a click event handler whenever the user clicks on a task it gets deleted from the list.
Lets have a quick look at how the final application will look like:
ToDo App using ReactJSÂ
Steps to create the Application:
- NPX: It is a package runner tool that comes with npm 5.2+, npx is easy to use CLI tools. The npx is used for executing Node packages.
npx create-react-app todo-react
- Now, goto the folder
cd todo-react
- Install the bootstrap and react-bootstrap module
npm install bootstrap npm install react-bootstrap
After following the above steps the Folder structure will look like:
Folder Structure:
Â
The dependencies in package.json file will look like:
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"bootstrap": "^5.3.0",
"react-bootstrap": "^2.7.4",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
Example: Write the below code in App.js file in the src directory
javascript
// App.js File import React, { Component } from "react"; import "bootstrap/dist/css/bootstrap.css"; import Container from "react-bootstrap/Container"; import Row from "react-bootstrap/Row"; import Col from "react-bootstrap/Col"; import Button from "react-bootstrap/Button"; import InputGroup from "react-bootstrap/InputGroup"; import FormControl from "react-bootstrap/FormControl"; import ListGroup from "react-bootstrap/ListGroup";   class App extends Component {     constructor(props) {         super(props);           // Setting up state         this.state = {             userInput: "",             list: [],         };     }       // Set a user input value     updateInput(value) {         this.setState({             userInput: value,         });     }       // Add item if user input in not empty     addItem() {         if (this.state.userInput !== "") {             const userInput = {                 // Add a random id which is used to delete                 id: Math.random(),                   // Add a user value to list                 value: this.state.userInput,             };               // Update list             const list = [...this.state.list];             list.push(userInput);               // reset state             this.setState({                 list,                 userInput: "",             });         }     }       // Function to delete item from list use id to delete     deleteItem(key) {         const list = [...this.state.list];           // Filter values and leave value which we need to delete         const updateList = list.filter((item) => item.id !== key);           // Update list in state         this.setState({             list: updateList,         });     }       editItem = (index) => {       const todos = [...this.state.list];       const editedTodo = prompt('Edit the todo:');       if (editedTodo !== null && editedTodo.trim() !== '') {         let updatedTodos = [...todos]         updatedTodos[index].value= editedTodo         this.setState({           list: updatedTodos,       });       }     }       render() {         return (             <Container>                 <Row                     style={{                         display: "flex",                         justifyContent: "center",                         alignItems: "center",                         fontSize: "3rem",                         fontWeight: "bolder",                     }}                 >                     TODO LIST                 </Row>                   <hr />                 <Row>                     <Col md={{ span: 5, offset: 4 }}>                         <InputGroup className="mb-3">                             <FormControl                                 placeholder="add item . . . "                                size="lg"                                value={this.state.userInput}                                 onChange={(item) =>                                     this.updateInput(item.target.value)                                 }                                 aria-label="add something"                                aria-describedby="basic-addon2"                            />                             <InputGroup>                                 <Button                                     variant="dark"                                    className="mt-2"                                    onClick={() => this.addItem()}                                 >                                     ADD                                 </Button>                             </InputGroup>                         </InputGroup>                     </Col>                 </Row>                 <Row>                     <Col md={{ span: 5, offset: 4 }}>                         <ListGroup>                             {/* map over and print items */}                             {this.state.list.map((item, index) => {                                 return (                                   <div key = {index} >                                     <ListGroup.Item                                         variant="dark"                                        action                                         style={{display:"flex",                                                 justifyContent:'space-between'                                      }}                                     >                                         {item.value}                                         <span>                                         <Button style={{marginRight:"10px"}}                                         variant = "light"                                        onClick={() => this.deleteItem(item.id)}>                                           Delete                                         </Button>                                         <Button variant = "light"                                        onClick={() => this.editItem(index)}>                                           Edit                                         </Button>                                         </span>                                     </ListGroup.Item>                                   </div>                                 );                             })}                         </ListGroup>                     </Col>                 </Row>             </Container>         );     } }   export default App; |
Steps to run the Application:
- Type the following command in the terminal:
npm start
- Type the following URL in the browser:
http://localhost:3000/
Output:
ToDo App using ReactJSÂ
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
[…] ToDo application is the most basic project to test the knowledge of React. It will covers all the basic concept […]