Creating a todo list application is a great way to get started with building web applications with React. In this tutorial, we’ll walk through the process of building a simple todo list application using React and Material-UI, a popular UI library for React.
Requirements
To follow along with this tutorial, you’ll need a basic understanding of React and JavaScript. You’ll also need to have Node.js and npm (Node Package Manager) installed on your computer.
Setting up the Project
First, we’ll create a new React project using create-react-app
, a tool that sets up a new React project with a basic file structure and some commonly used packages. To create a new project, open a terminal and run the following command:
npx create-react-app my-todo-app
This will create a new directory called my-todo-app
with the basic file structure for a React application. Next, navigate into the project directory:
cd my-todo-app
Installing Material-UI
We’ll be using Material-UI to style our application. To install it, run the following command in the terminal:
npm install @material-ui/core @material-ui/icon;
This will install the core Material-UI package and the icons package, which includes the DeleteIcon
component that we’ll be using in our application.
Creating the TodoList Compon
Now that we have our project set up, we can start building our todo list component. Create a new file called TodoList.js
in the src
directory and add the following code:
import React, { useState } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import Checkbox from '@material-ui/core/Checkbox';
import IconButton from '@material-ui/core/IconButton';
import DeleteIcon from '@material-ui/icons/Delete';
import FormControl from '@material-ui/core/FormControl';
import InputLabel from '@material-ui/core/InputLabel';
import Input from '@material-ui/core/Input';
import Button from '@material-ui/core/Button';
const useStyles = makeStyles((theme) => ({
form: {
display: 'flex',
alignItems: 'center',
width: '100%',
marginBottom: theme.spacing(2),
},
formControl: {
marginRight: theme.spacing(1),
flex: 1,
},
box:{
margin: "20px auto",
maxWidth: "500px",
boxShadow: "1px 1px 10px #ddd",
padding: "15px 20px"
}
}));
function TodoList() {
const classes = useStyles();
const [todos, setTodos] = useState([]);
const [input, setInput] = useState('');
const handleSubmit = (e) => {
e.preventDefault();
setTodos([...todos, { text: input, completed: false }]);
setInput('');
}
const handleDelete = (index) => {
const newTodos = [...todos];
newTodos.splice(index, 1);
setTodos(newTodos);
}
const handleCheck = (index) => {
const newTodos = [...todos];
newTodos[index].completed = !newTodos[index].completed;
setTodos(newTodos);
}
return (
<div className={classes.box}>
<form className={classes.form} onSubmit={handleSubmit}>
<FormControl className={classes.formControl}>
<InputLabel htmlFor="todo-input">Add Todo</InputLabel>
<Input
id="todo-input"
value={input}
onChange={e => setInput(e.target.value)}
/>
</FormControl>
<Button type="submit" variant="contained" color="primary">
Add
</Button>
</form>
<List>
{todos.map((todo, index) => (
<ListItem key={index}>
<Checkbox
checked={todo.completed}
onChange={() => handleCheck(index)}
/>
<ListItemText
style={{ textDecoration: todo.completed ? 'line-through' : 'none'
}}
>
{todo.text}
</ListItemText>
<IconButton onClick={() => handleDelete(index)}>
<DeleteIcon />
</IconButton>
</ListItem>
))}
</List>
</div>
);
}
export default TodoList;
In this component, we’re using the useState
hook to manage the state of the todo list and the input field. We’re also using Material-UI components to create a polished and responsive design. The handleSubmit
function is called when the form is submitted and it adds the current input to the list of todos and clears the input field. The handleDelete
function is called when the delete button for a todo is clicked and it removes the corresponding todo from the list. The handleCheck
function is called when the checkbox for a todo is clicked and it toggle the status of the task as completed.
Using the TodoList Component
To use the TodoList
component in our application, we need to import it into the src/App.js
file and render it. Open the src/App.js
file and replace the existing code with the following:
import React from 'react';
import TodoList from './TodoList';
function App() {
return (
<div className="App">
<TodoList />
</div>
);
}
export default App;
Running the Application
Now that we have our application set up, we can start it by running the following command in the terminal:
npm start
This will start a development server and open the application in a web browser. You should now be able to add, check and delete items in the todo list.
Conclusion
In this tutorial, we’ve built a simple todo list application in React using Material-UI for styling. We’ve covered the basics of creating a new React project, installing Material-UI, creating a custom component and managing the state of the application. This is a simple example, but you can extend it to add more features such as filtering or searching.
To optimize SEO, you need to provide good title, meta description, keywords, and structured content. Also, you should make sure that the code is properly formatted, semantic, and accessible. It’s also important to make sure that your website is mobile-friendly, fast-loading and has a good user experience.
I hope this tutorial was helpful and that you now have a better understanding of how to build a simple todo list application in React with Material-UI.