Let’s say that we’ve been tasked with creating a proof-of-concept in React – an app that allows users to add, edit, and delete tasks they want to work on, and also mark tasks as complete without deleting them.
In this post, I’ll explain how to create a Todo app using React (a JavaScript library for building user interfaces), with ES6 syntax and React hooks from scratch. This will be a very basic app, with an input field for inputting the Todo item and a delete button next to each item to delete the item. Additionally, we will use the useState hook from React to preserve the state of our application and some advanced JavaScript features such as map() , arrayspread, ternary operator and filter()methods. The goal of this tutorial is to assist you in getting started with React.
simply check the github for all the code:
https://github.com/AkshatMahadeva/React-Todo-App
create a react app
Create React App (CRA) is a tool to create single-page React applications that is officially supported by the React team. The script generates the required files and folders to start the React application and run it on the browser.
npm create-react-app todoYou need to use some css for your todo app. You need to delete some file and you can simply you can use these styles to create your react app.
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: rgb(18, 100, 231);
font-size: 24px;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
.card{
max-width: 400px;
}
ol li{
list-style: none;
color: rgb(152, 43, 229);
text-shadow: 1px 1px 3px rgb(116, 112, 112);
letter-spacing: 2px;
line-height: 30px;
font-weight: 20px;
}
i{
color: red;
cursor: pointer;
}
.form-control{
border: none;
outline: none;
border-radius: 0;
border-bottom: 2px solid rgb(139, 19, 226);
}
.form-control:focus{
outline: none;
border: none;
}
.btn{
background-color: rgb(139, 19, 226);
font-weight: bold;
}
.btn:hover{
background-color: rgb(199, 26, 230);
}
.text-center{
color: rgb(152, 43, 229);
text-shadow: 1px 1px 3px rgb(191, 185, 185);
letter-spacing: 2.5px;
font-weight: bold;
}Now inside these app.js you need to add some code. You need to create the body of your app. you need to use usestate hook and useeffect hook. you need to create a form to create a react list. now you need to use array method to display the list.
Use State
The useState() is a Hook that allows you to have state variables in functional components . so basically useState is the ability to encapsulate local state in a functional component.
Use Effect
The useEffect Hook allows you to perform side effects in your components. Some examples of side effects are: fetching data, directly updating the DOM, and timers. useEffect accepts two arguments. The second argument is optional.
import './App.css';
import {useState} from 'react';
import ToDoLists from './toDoLists';
function App() {
const [inputList, setInputList] = useState("");
const [Items, setItmes] = useState([]);
const itemEvent = (event) => {
setInputList(event.target.value);
}
const listOfItems = ()=> {
setItmes((oldItems)=>{
return [...oldItems, inputList];
})
setInputList("")
}
const deleteItems = (id)=>{
console.log("deleted" + id);
setItmes((oldItems) => {
return oldItems.filter((arrElem, index) =>{
return index !== id;
})
}
)}
return (
<div className="card container mt-5 py-4">
<h1 className="text-center mb-4">Todo List</h1>
<div className="d-flex">
<input className="form-control me-2" type="text" value={inputList} placeholder="Add New Item" onChange={itemEvent} aria-label="Search" required/>
<button className="btn btn-success" onClick={listOfItems}>Add</button>
</div>
<ol>
{ /*inputList*/ }
{Items.map((itemval, index)=>{
return <ToDoLists key={index} id={index} text = {itemval} onSelect = {deleteItems}/>
})}
</ol>
</div>
);
}
export default App;