React Getting Started Example Study Notes 3. TodoApp Basic Interface

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 react in day1 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
First switch to the main branch main
and then check out the branch todoapp-v1 from the main branch,
See the video for details:
[Code process] React entry example TodoApp learning notes

1 Add components

Create a new folder under the src folder, and then Add the following code files to the folder in sequencecomponents
src/components

TodoHeader.tsxas follows

import React from 'react';

export const TodoHeader = () => {
    
    
  return (
    <header>
      <h1>todos <small>(Basic interface)</small></h1>
      <div className="addTodo">
        <input className="textfield" placeholder = "add todo" />
        <button className="submit">Add</button>
      </div>
      <nav className="filter">
        <button className="selected">all</button>
        <button>active</button>
        <button>completed</button>
      </nav>
    </header>
  )
}

TodoListItem.tsxas follows

import React from 'react';

export const TodoListItem = () => {
    
    
  return (
    <li className="todo">
      <label>
        <input type="checkbox" /> Todo 1
      </label>
    </li>
  );
}

TodoList.tsxas follows

import React from 'react';
import {
    
     TodoListItem } from './TodoListItem.tsx';

export const TodoList = () => {
    
    
  return (
    <ul className='todos'>
      {
    
    ['01', '02', '03', '04'].map((todo)=> <TodoListItem />)}
    </ul>
  )
}

TodoFooter.tsxas follows

import React from 'react';

export const TodoFooter = () => {
    
    
  return (
    <footer>
      <span>4 items left</span>
      <button className="submit">Clear Completed</button>
    </footer>
  )
}

2 Add apps and styles

In thesrc folder, create a newApp.tsx with the following code

import React from 'react';
import {
    
     TodoHeader } from './components/TodoHeader.tsx';
import {
    
     TodoList } from './components/TodoList.tsx';
import {
    
     TodoFooter } from './components/TodoFooter.tsx';

export const TodoApp = props => {
    
    
  return (
    <div>
      <TodoHeader />
      <TodoList />
      <TodoFooter />
    </div>
  )
}

In thesrc folder, create a new onestyle.css, the code is as follows
(You can also create a new one first like in the video An empty style.css,
and wait until you run the project and edit the css in Chrome's developer tools to observe the effect)

body {
    
    
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  width: 400px;
  margin: 20px auto;
}

h1 {
    
    
  text-align: center;
}

small {
    
    
  font-size: 0.5em;
}

.addTodo {
    
    
  display: flex;
}

.textfield {
    
    
  flex-grow: 1;
  margin-right: 10px;
}

.submit {
    
    
  border: none;
  padding: 5px 10px;
}

.filter {
    
    
  margin: 10px 0 0;
}

.filter button {
    
    
  background: transparent;
  border: none;
}

.filter .selected {
    
    
  border-bottom: 2px solid blue;
}

.todos {
    
    
  list-style: none;
  padding: 0;
}

footer {
    
    
  display: flex;
}

footer span {
    
    
  flex-grow: 1;
}

3 Modify index

Repairindex.htmltargettitlemarkingTodo Ap

Modify under the , modify the code, the modification is as followssrc folder to index.jsindex.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import {
    
     TodoApp } from './TodoApp.tsx';
import './style.css'

ReactDOM.render(
  <TodoApp />,
  document.getElementById('app')
);

4 Operation and others

Enter the commandnpm start in the terminal to run the project
The effect is as follows

The corresponding relationship between this page and components is as shown below

Finally submit the changes to github