Hello friends, my name is Kiet, if you see this post, then thank you for taking the time to read this post of mine.
Foreword:
Currently I am a Vuejs developer, like every other developer, we always have the goal to move forward and learn more about cool things, so I want to share my process of learning React and also practicing more skills. my writing , if my article is good , then i will be happy to help you , let ‘s start …
Table of contents :
- What preparation?
- Technology App
- Todolist
1. What to prepare for the start?
We must first determine our own learning path to avoid wandering and not having specific goals
- Here I choose the route of learning through project work and then summarizing (This has the disadvantage that we will not understand all the React docs, but if we have any problems, we will search in the process)
2.App Technology: (This is just an estimate and will be added as needed)
- TypeScript language : We will choose Typescript lun from the beginning so that we can reuse this template later to avoid conversion and it is also easy to use, not too difficult, just do it and learn it at the same time.
- MUI (intended) : I plan to use UI Framework
3. Mini app Todolist :
- PREPARATION: First I will create an RP template aka basecode in the process that I will put together the necessary things through the projects and it will help me accumulate experience so why in the preparation step I mentioned I will learn through the project, Github Link: https://github.com/letuankiet212/basecode-reactjs-ts
- HTML/CSS: We use the online interface for fast ( https://codepen.io/hanhttm/pen/WjBdbz ), HTML we will put in
App.tsxfile and CSS we will put inApp.cssfile
As the picture we can see the function of this app will include
- New task creation function (*1)
- Display task list (*2)
- Function to display tasks by status all, active, completed (*3)
- Clear function (*4)
- Display the number of tasks (*5)
First we will go through the happy cases of the project to find out what to prepare:
- Load page -> Show list of available tasks=>
get[List task] - After entering text to create a new task -> Save the new task to the task list=>
[input] -> [List task] - Pressing the function buttons will display lists by status=>
[Button<status>] -> <status> + [List task] -> [new List<status>] - Clicking the clear button will delete completed tasks=>
[Button Delete <status need remove>] -> <status need remove> + [List task]-> [Show new list task <no have status>]
So we will include 3 main components 1 input – 1 list show task displayed on the screen – 1 full main task list
Before starting to code I want you to always keep in mind that we will code for a big project so we will try to clear the code as much as possible, everyone.
We create a folder untils to contain types/constants/function--common
utils/types/Task.d.ts Contains type declarations of Task
1 2 3 4 5 6 | export interface ITask { id: string | undefined; description: string; status: boolean; } |
utils/contants/index.tsx
1 2 3 4 5 6 7 | export const NAME_LOCAL_STORAGE = 'todo'; export const STATUS_TASK = { ACTIVE: false, COMPLETE: true, }; |
utils/common.tsx (this place should be missing function–common)
The functions here will be reusable not only in this project but also in other projects
1 2 3 4 5 6 7 8 9 | export function setLocalStorage<T>(name: string, listData: Array<T>) { localStorage.setItem(name, JSON.stringify(listData)); } export const getLocalStorage = (name: string) => { return JSON.parse(localStorage.getItem(name) as string); }; |
Let’s go to the main code
App.tsx
We will split the code into small parts to add functionality to each part
The rest of the code will look like this
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | import React, { useState, useEffect } from 'react'; import './App.css'; import { ITask } from './utils/types/Task'; import { setLocalStorage, getLocalStorage } from './utils/common'; import { NAME_LOCAL_STORAGE, STATUS_TASK } from './utils/constants'; import TodoForm from './components/TodoForm'; import TodoList from './components/TodoList'; import TodoOptionShow from './components/TodoOptionShow'; function App() { const [taskList, setTaskList] = useState<ITask[]>([]); useEffect(() => { setTaskList(getLocalStorage(NAME_LOCAL_STORAGE)); }, []); /** * Update list Task in local storage and taskList * @param newTaskList */ const updateNewTaskList = (newTaskList: ITask[]) => { setLocalStorage(NAME_LOCAL_STORAGE, newTaskList); setTaskList(getLocalStorage(NAME_LOCAL_STORAGE)); }; /** * Clear Task Complete */ const removeTaskByStatus = (statusNeedRemove: boolean) => { const newTask: ITask[] = getLocalStorage(NAME_LOCAL_STORAGE).filter((task: ITask) => task.status !== statusNeedRemove); updateNewTaskList(newTask); }; return ( <section className="todoapp"> <header className="header"> <h1>todo list</h1> </header> <TodoForm updateNewTaskList={updateNewTaskList} taskList={taskList} /> <section id="main"> <input id="toggleInputAll" className="toggle-all" type="checkbox" /> <label htmlFor="toggle-all">Mark all as complete</label> <TodoList updateNewTaskList={updateNewTaskList} taskList={taskList} /> </section> <footer className="footer"> <span className="todo-count"> <strong id="todoCount">{taskList?.length ?? 0}</strong> item left </span> <TodoOptionShow setTaskList={setTaskList} /> <button className="clear-completed" id="btnClear" onClick={() => removeTaskByStatus(STATUS_TASK.COMPLETE)}> Clear completed </button> </footer> </section> ); } export default App; |
TodoForm.tsx
Here we will handle the submit button function when entering new job name
Code :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | import React, { useState } from 'react'; import { v4 as uuidv4 } from 'uuid'; import { ITask } from '../utils/types/Task'; import { STATUS_TASK } from '../utils/constants'; type DataProps = { updateNewTaskList: any; taskList: ITask[]; }; function TodoForm({ updateNewTaskList, taskList }: DataProps) { const [taskNew, setTaskNew] = useState(''); const clearInput = () => { setTaskNew(''); }; const handleSubmit = (e: React.SyntheticEvent) => { e.preventDefault(); const target = e.target as typeof e.target & { description: { value: string } }; const formRequest = { id: uuidv4(), description: target.description.value, status: STATUS_TASK.ACTIVE, }; updateNewTaskList([...(taskList || []), formRequest]); clearInput(); }; return ( <form onSubmit={(e) => handleSubmit(e)}> <input id="newTodo" className="new-todo" name="description" value={taskNew} onChange={(e) => setTaskNew(e.target.value)} placeholder="What needs to be done?" /> </form> ); } export default TodoForm; |
TodoList.tsx
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | import React from 'react'; import { ITask } from './../utils/types/Task'; import { getLocalStorage } from '../utils/common'; import { NAME_LOCAL_STORAGE, STATUS_TASK } from '../utils/constants'; type DataProps = { updateNewTaskList: any; taskList: ITask[]; }; function TodoList({ updateNewTaskList, taskList }: DataProps) { const onDeleteTask = (id: string | undefined = undefined) => { if (!id) return; const newList = taskList.filter((task) => task.id !== id); updateNewTaskList(newList); }; const changeStatus = (task: ITask) => { if (!task) return; onDeleteTask(task.id); const newTask = { ...task, status: !STATUS_TASK.ACTIVE }; const preTaskList = getLocalStorage(NAME_LOCAL_STORAGE); updateNewTaskList([...preTaskList, newTask]); }; return ( <ul id="todoListView" className="todo-list"> {taskList && taskList.map((task, key) => ( <li className="todoItem" key={key}> <input type="checkbox" className="itemList" defaultChecked={!!task.status} onChange={() => changeStatus(task)} /> <label className="labelContent ">{task.description}</label> <button className="remove" onClick={() => onDeleteTask(task.id)} /> </li> ))} </ul> ); } export default TodoList; |
TodoOptionShow.tsx
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | import { NAME_LOCAL_STORAGE, STATUS_TASK } from '../utils/constants'; import { ITask } from '../utils/types/Task'; import { getLocalStorage } from '../utils/common'; type DataProps = { setTaskList: any; }; const TodoOptionShow = ({ setTaskList }: DataProps) => { /** * Function filter tasks with status * @param task_status * @returns */ const showTaskWithStatus = (task_status: any) => { const listTask = getLocalStorage(NAME_LOCAL_STORAGE) as ITask[]; setTaskList(listTask.filter((task) => task.status === task_status)); }; return ( <ul className="filters"> <li> <a id="allWorks" href="#/" onClick={() => setTaskList(getLocalStorage(NAME_LOCAL_STORAGE))}> All </a> </li> <li> <a href="#active" id="activedItems" onClick={() => showTaskWithStatus(STATUS_TASK.ACTIVE)}> Active </a> </li> <li> <a href="#completed" id="completedTodos" onClick={() => showTaskWithStatus(STATUS_TASK.COMPLETE)}> Completed </a> </li> </ul> ); }; export default TodoOptionShow; |
Just enjoy the results In the first miniapp, I just learned to familiarize myself with Reactjs as well as useState + useEffect (I just discovered these 2 accounts and lost time) there are still some places that I haven’t forgotten so I have the code It’s quite young if you have any suggestions, please help me, I will upload the code to github, enjoy it through the video, I will create 2 branches to upload to the template, one that implements UI for TodoList and the other that contains common code I drew from this miniapp so I can just come here to see it later
The first post of my React learning series is here, if you think it’s good, please give me an upvote :p, it gives me the motivation to write a post to share a lot of experiences, see you in the next post. write next week