Simple React Todo List
getsourcecodedotcom
667 views
22 slides
Sep 02, 2022
Slide 1 of 22
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
About This Presentation
Here you will learn how to make a Simple React Todo List with its source Code. Get easy react todo app at get source code. We will build this simple React.Js application and will store our information in the local storage. We will discuss every step in this blog.
Slide Content
Simple Todo Application With React and Material UI
Hey there everyone, hope you all are doing great. In today’s blog, we are going to create
a simple Todo Application WithReactandMaterialUI. We will build this simple React.Js
application and will store our information in the local storage. We will discuss every step
in thisblog.
Before we start building this simple application, we assume you have some basic
understanding of JavaScript and the React.Js library. In this application, we will use the
best and most modern approach for our React application. We will separate our code
into smaller chunks so that you easily understand what it’s doing under the hood.
Application Structure ofSimple Todo Application withReact and Material UI
While building the application we will be keeping the best practices as a developer. We
will divide our app into smaller reusable components and one main file t o host our
Hey there everyone, hope you all are doing great. In today’s blog, we are going to create
a simple Todo Application WithReactandMaterialUI. We will build this simple React.Js
application and will store our information in the local storage. We will discuss every step
in thisblog.
Before we start building this simple application, we assume you have some basic
understanding of JavaScript and the React.Js library. In this application, we will use the
best and most modern approach for our React application. We will separate our code
into smaller chunks so that you easily understand what it’s doing under the hood.
Application Structure ofSimple Todo Application withReact and Material UI
While building the application we will be keeping the best practices as a developer. We
will divide our app into smaller reusable components and one main file t o host our
components. Our application will have three different reusable utility functionalities
folders. They are ourcontext, reducers, and hooks.These folders will have their own
custom functions that will help us in creating logic for our to-do application.
Some Terms To Remember
●Components: Components in React are basically reusable pieces of code that we
can use anywhere in our application. Components can be anything like a reusable
Button, Card, Form, or any stuff that we think can be reused in our application.
The advantage of using the components in React is that it makes our application
more organized and human-friendly.
●Props: So if you are using JavaScript, then you have heard about the term
parameter or say arguments. They can be passed to a function as variable
holders of a function. Similarly, props or properties are the arguments or
parameters that we pass to React Components. Props are read-only. They can’t
mutate directly.
●State: State is the component variable. They hold certain values for our
components that can be changed later on during program execution. States can
be mutated with the help of hooks in React.
It’s Build Time
Now let us startbuilding our application.
The first thing we will do is installNode.Js. Alsokindly check the Node.Js version as
well. Now let’s create our project from scratch. But before let me mention that we will
use just React and Material UI.
Installation and Setup
Now let’s create a React App from scratch
npx create-react-app todoApp
folders. They are ourcontext, reducers, and hooks.These folders will have their own
custom functions that will help us in creating logic for our to-do application.
Some Terms To Remember
●Components: Components in React are basically reusable pieces of code that we
can use anywhere in our application. Components can be anything like a reusable
Button, Card, Form, or any stuff that we think can be reused in our application.
The advantage of using the components in React is that it makes our application
more organized and human-friendly.
●Props: So if you are using JavaScript, then you have heard about the term
parameter or say arguments. They can be passed to a function as variable
holders of a function. Similarly, props or properties are the arguments or
parameters that we pass to React Components. Props are read-only. They can’t
mutate directly.
●State: State is the component variable. They hold certain values for our
components that can be changed later on during program execution. States can
be mutated with the help of hooks in React.
It’s Build Time
Now let us startbuilding our application.
The first thing we will do is installNode.Js. Alsokindly check the Node.Js version as
well. Now let’s create our project from scratch. But before let me mention that we will
use just React and Material UI.
Installation and Setup
Now let’s create a React App from scratch
npx create-react-app todoApp
or
yarn create react-app todoApp
Once the installation is complete, open this project folder with your favorite code editor.
In this case, we will use the VS Code. Also, let us quickly install the Material UI for our
project. Type the following command in the project root folder in your terminal.
Folder Structure
Our final folder structure will look like this.
node_modules
public
src
|
| --> context
| --> todos.context.js
| --> reducers
| --> todo.reducer.js
| --> hooks
| --> useInputState.js
| --> useLocalStorageReducer.js
| --> useToggleState.js
|
| --> App.js
| --> Todo.js
| --> TodoApp.js
| --> TodoList.js
| --> TodoForm.js
| --> EditTodoForm.js
| --> index.js
| --> index.css
yarn create react-app todoApp
Once the installation is complete, open this project folder with your favorite code editor.
In this case, we will use the VS Code. Also, let us quickly install the Material UI for our
project. Type the following command in the project root folder in your terminal.
Folder Structure
Our final folder structure will look like this.
node_modules
public
src
|
| --> context
| --> todos.context.js
| --> reducers
| --> todo.reducer.js
| --> hooks
| --> useInputState.js
| --> useLocalStorageReducer.js
| --> useToggleState.js
|
| --> App.js
| --> Todo.js
| --> TodoApp.js
| --> TodoList.js
| --> TodoForm.js
| --> EditTodoForm.js
| --> index.js
| --> index.css
Installing Materail UI
npm install @mui/material @emotion/react @emotion/styled
You can clean the files which y ou don’t want.
This application requires some logic for CRUD operation. So let’s create our contexts,
reducers, and custom hooks so that we can use them. These utility functions will allow
us to maintain our application state and help us to pass our data dynamically.
Globally Managing our States
Context
At first, we will build our todo context so that we can easily pass our props down the
order where it is necessary. Inside the context folder create a todos.context.js file. This
is the only application context we will create in this entire application.
importReact,{createContext}from"react";
import{useLocalStorageReducer}from"../hooks/useLocalStorageReducer";
importtodoReducer from"../reducers/todo.reducer";
constdefaultTodos =[
{id:1, task:"Buy Milks and Bread", completed:false},
{id:2, task:"Release ladybugs into garden", completed:true},
npm install @mui/material @emotion/react @emotion/styled
You can clean the files which y ou don’t want.
This application requires some logic for CRUD operation. So let’s create our contexts,
reducers, and custom hooks so that we can use them. These utility functions will allow
us to maintain our application state and help us to pass our data dynamically.
Globally Managing our States
Context
At first, we will build our todo context so that we can easily pass our props down the
order where it is necessary. Inside the context folder create a todos.context.js file. This
is the only application context we will create in this entire application.
importReact,{createContext}from"react";
import{useLocalStorageReducer}from"../hooks/useLocalStorageReducer";
importtodoReducer from"../reducers/todo.reducer";
constdefaultTodos =[
{id:1, task:"Buy Milks and Bread", completed:false},
{id:2, task:"Release ladybugs into garden", completed:true},
];
exportconstTodosContext =createContext();
exportconstDispatchContext =createContext();
exportfunctionTodosProvider(props){
const[todos, dispatch]=useLocalStorageReducer(
"todos",
defaultTodos,
todoReducer
);
return(
<TodosContext.Providervalue={todos}>
<DispatchContext.Providervalue={dispatch}>
{props.children}
</DispatchContext.Provider>
</TodosContext.Provider>
);
}
exportconstTodosContext =createContext();
exportconstDispatchContext =createContext();
exportfunctionTodosProvider(props){
const[todos, dispatch]=useLocalStorageReducer(
"todos",
defaultTodos,
todoReducer
);
return(
<TodosContext.Providervalue={todos}>
<DispatchContext.Providervalue={dispatch}>
{props.children}
</DispatchContext.Provider>
</TodosContext.Provider>
);
}
If you look at the code above, you can see the context logic for our application. We are
passing some default to-do items. ThetodoReducerwill allow us to manipulate the todo
form by creating a todo, editing the todo, and deleting them. Whereas the
useLocalStorageReducerallows us to store our piecesof information.
Hooks
In our custom hooks, we will be creating some custom hooks for managing our
application state that will keep changing at regular intervals. Our application will have
three custom hooks, i.e.‘useLocalStorageReducer.js’,‘useInputState.js’, and
‘useToggleState.js’. Each custom hook will have itsown use case in our application.
Let us create our first cust om hookuseInputState.js
import{useState}from"react";
exportdefaultinitialVal=>{
const[value, setValue]=useState(initialVal);
consthandleChange = e=>{
setValue(e.target.value);
};
constreset =()=>{
setValue("");
};
return[value, handleChange, reset];
};
passing some default to-do items. ThetodoReducerwill allow us to manipulate the todo
form by creating a todo, editing the todo, and deleting them. Whereas the
useLocalStorageReducerallows us to store our piecesof information.
Hooks
In our custom hooks, we will be creating some custom hooks for managing our
application state that will keep changing at regular intervals. Our application will have
three custom hooks, i.e.‘useLocalStorageReducer.js’,‘useInputState.js’, and
‘useToggleState.js’. Each custom hook will have itsown use case in our application.
Let us create our first cust om hookuseInputState.js
import{useState}from"react";
exportdefaultinitialVal=>{
const[value, setValue]=useState(initialVal);
consthandleChange = e=>{
setValue(e.target.value);
};
constreset =()=>{
setValue("");
};
return[value, handleChange, reset];
};
TheuseInputState.jshook will allow the user to enter the form data of our application.
We can also reset the value of our form input.
Our next custom hook is theuseLocalStorageReducer.js.This customs hook provides
us with the capability to store the new or updated to-do items in the local storage of our
web browser.
import{useReducer, useEffect}from"react";
functionuseLocalStorageReducer(key, defaultVal, reducer){
const[state, dispatch]=useReducer(reducer, defaultVal,()=>{
letvalue;
try{
value = JSON.parse(
window.localStorage.getItem(key)||String(defaultVal)
);
}catch(e){
value = defaultVal;
}
returnvalue;
});
useEffect(()=>{
We can also reset the value of our form input.
Our next custom hook is theuseLocalStorageReducer.js.This customs hook provides
us with the capability to store the new or updated to-do items in the local storage of our
web browser.
import{useReducer, useEffect}from"react";
functionuseLocalStorageReducer(key, defaultVal, reducer){
const[state, dispatch]=useReducer(reducer, defaultVal,()=>{
letvalue;
try{
value = JSON.parse(
window.localStorage.getItem(key)||String(defaultVal)
);
}catch(e){
value = defaultVal;
}
returnvalue;
});
useEffect(()=>{
window.localStorage.setItem(key, JSON.stringify(state));
},[key, state]);
return[state, dispatch];
}
export{useLocalStorageReducer};
Our last and final hook is useToggleState.js
jimport{useState}from"react";
functionuseToggle(initialVal =false){
// call useState, "reserve piece of state"
const[state, setState]=useState(initialVal);
consttoggle =()=>{
setState(!state);
};
// return piece of state AND a function to toggleit
return[state, toggle];
}
},[key, state]);
return[state, dispatch];
}
export{useLocalStorageReducer};
Our last and final hook is useToggleState.js
jimport{useState}from"react";
functionuseToggle(initialVal =false){
// call useState, "reserve piece of state"
const[state, setState]=useState(initialVal);
consttoggle =()=>{
setState(!state);
};
// return piece of state AND a function to toggleit
return[state, toggle];
}
exportdefaultuseToggle;
The use of toggle custom hook is that it returns us with the piece of application state
and a function to toggle it.
Reducer
We will use todo.reducer.js it is for our reducer. Note that we are the UUID module to
create a unique id for each of our to-do lists. You can install the UUID with the following
command in your terminal. npm i uuid
import*asuuid from"uuid";
constreducer =(state, action)=>{
switch(action.type){
case"ADD":
return[...state,{id: uuid.v4(), task: action.task,completed:false}];
case"REMOVE":
returnstate.filter(todo=>todo.id!== action.id);
case"TOGGLE":
returnstate.map(todo=>
todo.id=== action.id?{...todo, completed:!todo.completed}: todo
);
case"EDIT":
The use of toggle custom hook is that it returns us with the piece of application state
and a function to toggle it.
Reducer
We will use todo.reducer.js it is for our reducer. Note that we are the UUID module to
create a unique id for each of our to-do lists. You can install the UUID with the following
command in your terminal. npm i uuid
import*asuuid from"uuid";
constreducer =(state, action)=>{
switch(action.type){
case"ADD":
return[...state,{id: uuid.v4(), task: action.task,completed:false}];
case"REMOVE":
returnstate.filter(todo=>todo.id!== action.id);
case"TOGGLE":
returnstate.map(todo=>
todo.id=== action.id?{...todo, completed:!todo.completed}: todo
);
case"EDIT":
returnstate.map(todo=>
todo.id=== action.id?{...todo, task: action.newTask}: todo
);
default:
returnstate;
}
};
exportdefaultreducer;
Building The UI
Now our setup is complete, let’s create our React Component, i.e TodoApp.Js. This will
be our main application component whereas our other component will reside for UI
rendering.
importReact from"react";
importTodoList from"./TodoList";
importTodoForm from"./TodoForm";
importTypography from"@material-ui/core/Typography";
todo.id=== action.id?{...todo, task: action.newTask}: todo
);
default:
returnstate;
}
};
exportdefaultreducer;
Building The UI
Now our setup is complete, let’s create our React Component, i.e TodoApp.Js. This will
be our main application component whereas our other component will reside for UI
rendering.
importReact from"react";
importTodoList from"./TodoList";
importTodoForm from"./TodoForm";
importTypography from"@material-ui/core/Typography";
importPaper from"@material-ui/core/Paper";
importAppBar from"@material-ui/core/AppBar";
importToolbar from"@material-ui/core/Toolbar";
importGrid from"@material-ui/core/Grid";
import{TodosProvider}from"./context/todos.context";
functionTodoApp(){
return(
<Paper
style={{
padding:0,
margin:0,
height:"100vh",
backgroundColor:"#fafafa"
}}
elevation={0}
>
<AppBar color='primary'position='static'style={{height:"64px"}}>
importAppBar from"@material-ui/core/AppBar";
importToolbar from"@material-ui/core/Toolbar";
importGrid from"@material-ui/core/Grid";
import{TodosProvider}from"./context/todos.context";
functionTodoApp(){
return(
<Paper
style={{
padding:0,
margin:0,
height:"100vh",
backgroundColor:"#fafafa"
}}
elevation={0}
>
<AppBar color='primary'position='static'style={{height:"64px"}}>
<Toolbar>
<Typography color='inherit'>ReactToDo</Typography>
</Toolbar>
</AppBar>
<Grid container justify='center'style={{marginTop:"1rem"}}>
<Grid item xs={11}md={8}lg={4}>
<TodosProvider>
<TodoForm />
<TodoList />
</TodosProvider>
</Grid>
</Grid>
</Paper>
);
}
exportdefaultTodoApp;
<Typography color='inherit'>ReactToDo</Typography>
</Toolbar>
</AppBar>
<Grid container justify='center'style={{marginTop:"1rem"}}>
<Grid item xs={11}md={8}lg={4}>
<TodosProvider>
<TodoForm />
<TodoList />
</TodosProvider>
</Grid>
</Grid>
</Paper>
);
}
exportdefaultTodoApp;
This component will act as a container for our application. You can consider this to-do
component as a Parent element. Our component will display of todo application which
will render the other components.
Todo.jsComponent
importReact,{useContext, memo}from"react";
importuseToggleState from"./hooks/useToggleState";
importEditTodoForm from"./EditTodoForm";
importListItem from"@material-ui/core/ListItem";
importListItemText from"@material-ui/core/ListItem";
importCheckbox from"@material-ui/core/Checkbox";
importIconButton from"@material-ui/core/IconButton";
importDeleteIcon from"@material-ui/icons/Delete";
importEditIcon from"@material-ui/icons/Edit";
importListItemSecondaryAction from"@material-ui/core/ListItemSecondaryAction";
import{DispatchContext}from"./context/todos.context";
functionTodo({id, task, completed}){
constdispatch =useContext(DispatchContext);
const[isEditing, toggle]=useToggleState(false);
component as a Parent element. Our component will display of todo application which
will render the other components.
Todo.jsComponent
importReact,{useContext, memo}from"react";
importuseToggleState from"./hooks/useToggleState";
importEditTodoForm from"./EditTodoForm";
importListItem from"@material-ui/core/ListItem";
importListItemText from"@material-ui/core/ListItem";
importCheckbox from"@material-ui/core/Checkbox";
importIconButton from"@material-ui/core/IconButton";
importDeleteIcon from"@material-ui/icons/Delete";
importEditIcon from"@material-ui/icons/Edit";
importListItemSecondaryAction from"@material-ui/core/ListItemSecondaryAction";
import{DispatchContext}from"./context/todos.context";
functionTodo({id, task, completed}){
constdispatch =useContext(DispatchContext);
const[isEditing, toggle]=useToggleState(false);
// console.log("RE-RENDER ==> ", task);
return(
<ListItem style={{height:"64px"}}>
{isEditing ?(
<EditTodoForm id={id}task={task}toggleEditForm={toggle}/>
):(
<>
<Checkbox
tabIndex={-1}
checked={completed}
onClick={()=>dispatch({type:"TOGGLE",id: id})}
/>
<ListItemText
style={{textDecoration: completed ?"line-through":"none"}}
>
{task}
</ListItemText>
return(
<ListItem style={{height:"64px"}}>
{isEditing ?(
<EditTodoForm id={id}task={task}toggleEditForm={toggle}/>
):(
<>
<Checkbox
tabIndex={-1}
checked={completed}
onClick={()=>dispatch({type:"TOGGLE",id: id})}
/>
<ListItemText
style={{textDecoration: completed ?"line-through":"none"}}
>
{task}
</ListItemText>
<ListItemSecondaryAction>
<IconButton
aria-label="Delete"
onClick={()=>dispatch({type:"REMOVE",id: id})}
>
<DeleteIcon />
</IconButton>
<IconButton aria-label="Edit"onClick={toggle}>
<EditIcon />
</IconButton>
</ListItemSecondaryAction>
</>
)}
</ListItem>
);
}
exportdefaultmemo(Todo);
<IconButton
aria-label="Delete"
onClick={()=>dispatch({type:"REMOVE",id: id})}
>
<DeleteIcon />
</IconButton>
<IconButton aria-label="Edit"onClick={toggle}>
<EditIcon />
</IconButton>
</ListItemSecondaryAction>
</>
)}
</ListItem>
);
}
exportdefaultmemo(Todo);
The Todo.js component is our main call to action component where most of the
application logic will reside.
Our next component will betodoList.js
importReact,{useContext}from"react";
importTodo from"./Todo";
importPaper from"@material-ui/core/Paper";
importList from"@material-ui/core/List";
importDivider from"@material-ui/core/Divider";
import{TodosContext}from"./context/todos.context";
functionTodoList(){
consttodos =useContext(TodosContext);
if(todos.length)
return(
<Paper>
<List>
{todos.map((todo, i)=>(
// To add a key to a fragment, we haveto use the long-hand version
// rather than <> </>, we have to use <React.Fragment>
application logic will reside.
Our next component will betodoList.js
importReact,{useContext}from"react";
importTodo from"./Todo";
importPaper from"@material-ui/core/Paper";
importList from"@material-ui/core/List";
importDivider from"@material-ui/core/Divider";
import{TodosContext}from"./context/todos.context";
functionTodoList(){
consttodos =useContext(TodosContext);
if(todos.length)
return(
<Paper>
<List>
{todos.map((todo, i)=>(
// To add a key to a fragment, we haveto use the long-hand version
// rather than <> </>, we have to use <React.Fragment>
<React.Fragmentkey={i}>
<Todo{...todo}key={todo.id}/>
{i<todos.length-1&&<Divider />}
</React.Fragment>
))}
</List>
</Paper>
);
returnnull;
}
exportdefaultTodoList;
Our TodoList component will return the to-do list items that we create. Whenever we
create a new todo item, this react todo application component will render those new
lists.
TodoForm.jscomponent
importReact,{useContext}from"react";
importTextField from"@material-ui/core/TextField";
importPaper from"@material-ui/core/Paper";
<Todo{...todo}key={todo.id}/>
{i<todos.length-1&&<Divider />}
</React.Fragment>
))}
</List>
</Paper>
);
returnnull;
}
exportdefaultTodoList;
Our TodoList component will return the to-do list items that we create. Whenever we
create a new todo item, this react todo application component will render those new
lists.
TodoForm.jscomponent
importReact,{useContext}from"react";
importTextField from"@material-ui/core/TextField";
importPaper from"@material-ui/core/Paper";
importuseInputState from"./hooks/useInputState";
import{DispatchContext}from"./context/todos.context";
functionTodoForm(){
const[value, handleChange, reset]=useInputState("");
constdispatch =useContext(DispatchContext);
return(
<Paper style={{margin:"1rem 0", padding:"0 1rem"}}>
<form
onSubmit={e=>{
e.preventDefault();
dispatch({type:"ADD", task: value});
reset();
}}
>
<TextField
value={value}
onChange={handleChange}
import{DispatchContext}from"./context/todos.context";
functionTodoForm(){
const[value, handleChange, reset]=useInputState("");
constdispatch =useContext(DispatchContext);
return(
<Paper style={{margin:"1rem 0", padding:"0 1rem"}}>
<form
onSubmit={e=>{
e.preventDefault();
dispatch({type:"ADD", task: value});
reset();
}}
>
<TextField
value={value}
onChange={handleChange}
margin="normal"
label="Add New Todo"
fullWidth
/>
</form>
</Paper>
);
}
exportdefaultTodoForm;
This component allows the user to enter values in the to-do form.
Our final todo component isEditTodoForm.js
importReact,{useContext}from"react";
importuseInputState from"./hooks/useInputState";
importTextField from"@material-ui/core/TextField";
import{DispatchContext}from"./context/todos.context";
functionEditTodoForm({id, task, toggleEditForm}){
constdispatch =useContext(DispatchContext);
label="Add New Todo"
fullWidth
/>
</form>
</Paper>
);
}
exportdefaultTodoForm;
This component allows the user to enter values in the to-do form.
Our final todo component isEditTodoForm.js
importReact,{useContext}from"react";
importuseInputState from"./hooks/useInputState";
importTextField from"@material-ui/core/TextField";
import{DispatchContext}from"./context/todos.context";
functionEditTodoForm({id, task, toggleEditForm}){
constdispatch =useContext(DispatchContext);
const[value, handleChange, reset]=useInputState(task);
console.log("EDIT FORM RENDER!!!");
return(
<form
onSubmit={e=>{
e.preventDefault();
dispatch({type:"EDIT", id: id, newTask: value});
reset();
toggleEditForm();
}}
style={{marginLeft:"1rem", width:"50%"}}
>
<TextField
margin="normal"
value={value}
onChange={handleChange}
fullWidth
console.log("EDIT FORM RENDER!!!");
return(
<form
onSubmit={e=>{
e.preventDefault();
dispatch({type:"EDIT", id: id, newTask: value});
reset();
toggleEditForm();
}}
style={{marginLeft:"1rem", width:"50%"}}
>
<TextField
margin="normal"
value={value}
onChange={handleChange}
fullWidth
autoFocus
/>
</form>
);
}
exportdefaultEditTodoForm;
This component will allow us to edit the to-do form.
Now at last we will display all the application UI in our main App.js file.
import React from"react";
importTodoApp from"./TodoApp";
functionApp(){
return<TodoApp />;
}
exportdefaultApp;
And that’s it, guys. Here we have a fully functional React Todo Application with modern
React practices. And hope you guys will like this simple react application.
How To Run This Project
It’s very simple to run thisproject. Just followthe steps.
/>
</form>
);
}
exportdefaultEditTodoForm;
This component will allow us to edit the to-do form.
Now at last we will display all the application UI in our main App.js file.
import React from"react";
importTodoApp from"./TodoApp";
functionApp(){
return<TodoApp />;
}
exportdefaultApp;
And that’s it, guys. Here we have a fully functional React Todo Application with modern
React practices. And hope you guys will like this simple react application.
How To Run This Project
It’s very simple to run thisproject. Just followthe steps.
●Make sure you have node.js installed on your system if not then download it first.
●After that, you open the project in your favorite code editor(VS Code is
preferable).
●If you are using Vs Code then, simply open the code editor and open your project.
○Then open a new terminal (ctrl + shift + ~ ==> will open a new
terminal).
○run this command `npm install`
○then `npm start
●If you want to directly run without a code editor, then follow these steps:
○open a terminal(command prompt or git bash)
○goto your project root directory(cd folder name)
○then again type `npm install` and then after installation`npm start`
In case npm gives you any kind of error then you can run the project with the Yarn
package manager instead. Follow these steps:
●Open your windows terminal
●the type `npm i –global yarn`. This will install your yarn package manager
globally.
●After the installation, repeat the same commands from the above but this time
usesyarninstead ofnpm.
●`yarn install` and then to start `yarn start`.
Conclusion
That’s it for this tutorial and blog. Here in this article, we learned about building a simple
React Todo List application from scratch with custom React Hooks. The application
uses the Material UI for the design. Hope you will like this simple tutorial.
●After that, you open the project in your favorite code editor(VS Code is
preferable).
●If you are using Vs Code then, simply open the code editor and open your project.
○Then open a new terminal (ctrl + shift + ~ ==> will open a new
terminal).
○run this command `npm install`
○then `npm start
●If you want to directly run without a code editor, then follow these steps:
○open a terminal(command prompt or git bash)
○goto your project root directory(cd folder name)
○then again type `npm install` and then after installation`npm start`
In case npm gives you any kind of error then you can run the project with the Yarn
package manager instead. Follow these steps:
●Open your windows terminal
●the type `npm i –global yarn`. This will install your yarn package manager
globally.
●After the installation, repeat the same commands from the above but this time
usesyarninstead ofnpm.
●`yarn install` and then to start `yarn start`.
Conclusion
That’s it for this tutorial and blog. Here in this article, we learned about building a simple
React Todo List application from scratch with custom React Hooks. The application
uses the Material UI for the design. Hope you will like this simple tutorial.
Categories
DesignDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 667
- Slides 22
- Favorites 2
- Age 1187 days
Related Slideshows
1
MGV Residential Design projects for different clients, including a New Mexico Adobe project-1-.pdf
mannyvesa
26 views
16
EUNITED_Advocacy and Public Engagement through Visual Media
GeorgeDiamandis11
31 views
31
DESIGN THINKINGGG PPT 2 TOPIC IDEATION.pptx
HibaZaidi2
24 views
36
DESIGN THINKING CHAPTER 1 PPTT PPT 1.pptx
HibaZaidi2
28 views
112
Hinduism and Its History - PowerPoint Slides.pptx
ConorMcCormack10
24 views
20
Service Attributes of Manufactured Parts.pptx
MustafaEnesKrmac
24 views