React 入门实例学习笔记三、 TodoApp 基础界面

博主介绍：大爽歌, b站小UP主，直播编程+红警三，python1对1辅导老师。

本博客为microsoft的的Frontend Bootcamp 的day1中 react 的学习笔记

笔记目录: React 入门实例学习笔记目录
请先看目录，按照目录先后顺序阅读实践
本博客有对应视频版本，具体见目录。

0 分支检出

使用vs-code
先切换到主分支main
再从主分支检出分支todoapp-v1,
具体见视频:
【代码过程】 React 入门实例 TodoApp 学习梳理笔记

1 添加组件

在src文件夹下新建components文件夹，
再在src/components文件夹下依次添加如下代码文件

TodoHeader.tsx如下

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.tsx如下

import React from 'react';

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

TodoList.tsx如下

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.tsx如下

import React from 'react';

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

2 添加App和样式

在src文件夹下，新建App.tsx，代码如下

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>
  )
}

在src文件夹下，新建style.css，代码如下
(也可以像视频中，先新建一个空的style.css，
等运行项目后在chorme的开发者工具中一边编辑css一边观察效果)

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 修改index

修改index.html的title标签为Todo Ap

修改src文件夹下的index.js为index.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 运行及其他

在终端中输入npm start命令，运行项目
效果如下

请添加图片描述

该页面和组件的对应关系如下图