Blogger introduction: Da Shuangge, B station’s small UP owner, Live programming + red Police three, python 1 to 1 tutor.
This blog is the study notes of the react part of day 1 of microsoft'sFrontend Bootcamp
Notes directory: React introductory example study notes directory
Please read the directory first and read the practice in the order of the directory
This blog has a corresponding video version, see the directory for details.
0 branch checkout
Use vs-code
From the branch in the previous sectiontodoapp-v1, check out the branchtodoapp-v2
. See the video for details:
[Code process] React entry example TodoApp learning notes
1 TodoList implementation
The content in TodoListItem of TodoList was hard-coded before.
Here, content is dynamically generated based on Todos data.
Renovationsrc/TodoApp.tsx, additiondefaultTodos,
existingTodoAppaddition< /span> After the modificationtodos 并进行传輠.
import React from 'react';
import {
TodoHeader } from './components/TodoHeader.tsx';
import {
TodoList } from './components/TodoList.tsx';
import {
TodoFooter } from './components/TodoFooter.tsx';
const defaultTodos = [
{
id: '01',
label: 'Todo 1',
status: 'completed',
},
{
id: '02',
label: 'Todo 2',
status: 'active',
},
{
id: '03',
label: 'Todo 2',
status: 'active',
},
{
id: '04',
label: 'Todo 3',
status: 'completed',
},
]
export const TodoApp = props => {
const [todos, setTodos] = React.useState(defaultTodos);
return (
<div>
<TodoHeader />
<TodoList todos={
todos}/>
<TodoFooter />
</div>
)
}
Renovation src/components/TodoList.tsxSenioryo
import React from 'react';
import {
TodoListItem } from './TodoListItem.tsx';
export const TodoList = (props) => {
const {
todos } = props;
return (
<ul className='todos'>
{
todos.map((todo)=> <TodoListItem key={
todo.id} {
...todo} />)}
</ul>
)
}
Renovation src/components/TodoListItem.tsxSenioryo
import React from 'react';
export const TodoListItem = (props) => {
const {
label, status, id } = props;
return (
<li className="todo">
<label>
<input type="checkbox" checked={
status === 'completed'} /> {
label}
</label>
</li>
);
}
Then the TodoList part can dynamically display the data content of todos
2 TodoListItem checkbox (checkbox) function implementation
Currently the checkbox of TodoListItem cannot be checked.
Need to implement the check and uncheck function.
modificationsrc/TodoApp.tsx, additiontoggleCompletedmethod 并传读给TodoList.
After the modification
import React from 'react';
import {
TodoHeader } from './components/TodoHeader.tsx';
import {
TodoList } from './components/TodoList.tsx';
import {
TodoFooter } from './components/TodoFooter.tsx';
const defaultTodos = [
{
id: '01',
label: 'Todo 1',
status: 'completed',
},
{
id: '02',
label: 'Todo 2',
status: 'active',
},
{
id: '03',
label: 'Todo 2',
status: 'active',
},
{
id: '04',
label: 'Todo 3',
status: 'completed',
},
]
export const TodoApp = props => {
const [todos, setTodos] = React.useState(defaultTodos);
const toggleCompleted = (id) => {
const newTodos = todos.map((todo)=>{
if (todo.id === id){
return {
...todo, status: todo.status === 'active' ? 'completed' : 'active'};
} else {
return todo;
}
});
setTodos(newTodos);
}
return (
<div>
<TodoHeader />
<TodoList todos={
todos} toggleCompleted={
toggleCompleted} />
<TodoFooter />
</div>
)
}
Repairsrc/components/TodoList.tsx, ReceptiontoggleCompletedMethods for visitingTodoListItem.
After the modification
import React from 'react';
import {
TodoListItem } from './TodoListItem.tsx';
export const TodoList = (props) => {
const {
todos, toggleCompleted } = props;
return (
<ul className='todos'>
{
todos.map((todo)=> <TodoListItem key={
todo.id} {
...todo} toggleCompleted={
toggleCompleted} />)}
</ul>
)
}
Modifysrc/components/TodoListItem.tsx, accepttoggleCompleted method and use it.
Modified as follows
import React from 'react';
export const TodoListItem = (props) => {
const {
label, status, id, toggleCompleted } = props;
const handleCheck = () => {
toggleCompleted(id);
}
return (
<li className="todo">
<label>
<input type="checkbox" checked={
status === 'completed'} onChange={
handleCheck}/> {
label}
</label>
</li>
);
}
In this way the checkbox function of TodoListItem is realized.
3 TodoHeader implementation
Modifysrc/TodoApp.tsx, add filter attributes and addTodo methods, and pass parameters to the required components.
Modified as follows
import React from 'react';
import {
TodoHeader } from './components/TodoHeader.tsx';
import {
TodoList } from './components/TodoList.tsx';
import {
TodoFooter } from './components/TodoFooter.tsx';
const defaultTodos = [
{
id: '01',
label: 'Todo 1',
status: 'completed',
},
{
id: '02',
label: 'Todo 2',
status: 'active',
},
{
id: '03',
label: 'Todo 2',
status: 'active',
},
{
id: '04',
label: 'Todo 3',
status: 'completed',
},
]
export const TodoApp = props => {
const [filter, setFilter] = React.useState('all');
const [todos, setTodos] = React.useState(defaultTodos);
const addTodo = (label) => {
const getId = () => Date.now().toString();
const newTodo = {
id: getId(),
label: label,
status: 'active',
};
setTodos([...todos, newTodo]);
}
const toggleCompleted = (id) => {
const newTodos = todos.map((todo)=>{
if (todo.id === id){
return {
...todo, status: todo.status === 'active' ? 'completed' : 'active'};
} else {
return todo;
}
});
setTodos(newTodos);
}
return (
<div>
<TodoHeader filter={
filter} setFilter={
setFilter} addTodo={
addTodo} />
<TodoList todos={
todos} filter={
filter} toggleCompleted={
toggleCompleted} />
<TodoFooter />
</div>
)
}
Modifysrc/components/TodoHeader.tsx,
Add various event processing methods
Modified as follows
import React from 'react';
export const TodoHeader = (props) => {
const [inputText, setInputText] = React.useState('');
const {
filter, setFilter, addTodo } = props;
const onInput = (e) => {
setInputText(e.target.value);
}
const onSubmit = () => {
if (inputText.length > 0) {
addTodo(inputText);
};
setInputText('');
}
const onFilter = (e) => {
setFilter(e.currentTarget.textContent);
}
return (
<header>
<h1>todos <small>(Basic implementation)</small></h1>
<div className="addTodo">
<input className="textfield" placeholder = "add todo"
value={
inputText} onChange={
onInput} />
<button className="submit" onClick={
onSubmit}>Add</button>
</div>
<nav className="filter">
<button className={
filter === 'all' ? 'selected' : ''} onClick={
onFilter}>all</button>
<button className={
filter === 'active' ? 'selected' : ''} onClick={
onFilter}>active</button>
<button className={
filter === 'completed' ? 'selected' : ''} onClick={
onFilter}>completed</button>
</nav>
</header>
)
}
Repairsrc/components/TodoList.tsx,
ReceptionfilterNumber, 并处法todosNumber achieved filteredTodos.
Modified as follows
import React from 'react';
import {
TodoListItem } from './TodoListItem.tsx';
export const TodoList = (props) => {
const {
todos, filter, toggleCompleted } = props;
const filteredTodos = todos.filter((todo) => {
if (todo.status === 'cleared'){
return false;
};
if (filter === 'all') {
return true;
} else if (filter === 'completed') {
return todo.status === 'completed';
} else if (filter === 'active'){
return todo.status === 'active';
};
return false;
})
return (
<ul className='todos'>
{
filteredTodos.map((todo)=> <TodoListItem key={
todo.id} {
...todo} toggleCompleted={
toggleCompleted} />)}
</ul>
)
}
Here, add newtodo in the top bar, and filter function (click all, active, a>completed switch) is achieved.
4 TodoFooter implementation
Finally, we need to implement the statistics of the number of entries and the button to clean upcompleted the data.
Modificationsrc/TodoApp.tsx, AdditionclearCompletedMethod 并传读给TodoFooter,
After the renovation
import React from 'react';
import {
TodoHeader } from './components/TodoHeader.tsx';
import {
TodoList } from './components/TodoList.tsx';
import {
TodoFooter } from './components/TodoFooter.tsx';
const defaultTodos = [
{
id: '01',
label: 'Todo 1',
status: 'completed',
},
{
id: '02',
label: 'Todo 2',
status: 'active',
},
{
id: '03',
label: 'Todo 2',
status: 'active',
},
{
id: '04',
label: 'Todo 3',
status: 'completed',
},
]
export const TodoApp = props => {
const [filter, setFilter] = React.useState('all');
const [todos, setTodos] = React.useState(defaultTodos);
const addTodo = (label) => {
const getId = () => Date.now().toString();
const newTodo = {
id: getId(),
label: label,
status: 'active',
};
setTodos([...todos, newTodo]);
}
const toggleCompleted = (id) => {
const newTodos = todos.map((todo)=>{
if (todo.id === id){
return {
...todo, status: todo.status === 'active' ? 'completed' : 'active'};
} else {
return todo;
}
});
setTodos(newTodos);
}
const clearCompleted = () => {
const updateTodos = todos.map((todo) => {
if(todo.status === 'completed') {
return {
...todo, status: 'cleared'};
} else {
return todo;
}
});
setTodos(updateTodos);
}
return (
<div>
<TodoHeader filter={
filter} setFilter={
setFilter} addTodo={
addTodo} />
<TodoList todos={
todos} filter={
filter} toggleCompleted={
toggleCompleted} />
<TodoFooter todos={
todos} clearCompleted={
clearCompleted} />
</div>
)
}
Modifysrc/components/TodoFooter.tsx, accept the attribute, and use it.
Modified as follows
import React from 'react';
export const TodoFooter = (props) => {
const {
clearCompleted, todos } = props;
const itemCount = todos.filter((todo) => todo.status === 'active' ).length;
return (
<footer>
<span>{
itemCount} item{
itemCount === 1 ? '' : 's'} left</span>
<button className="submit" onClick={
clearCompleted} >Clear Completed</button>
</footer>
)
}
At this point, the entire TodoApp function is basically completed.
The effect after implementation can be seen at 16:35 in the video.