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

大爽歌

已于 2022-04-02 19:08:06 修改

阅读量730

点赞数

文章标签： react.js 学习 javascript

于 2022-03-16 23:02:42 首次发布

本文链接：https://blog.csdn.net/python1639er/article/details/123539089

版权

这篇博客是关于使用React构建TodoApp的实战教程，涵盖了从创建分支、添加组件（TodoHeader, TodoListItem, TodoList, TodoFooter）、设置样式、修改App和入口文件到运行项目的全过程。通过阅读和实践，你可以了解React基础组件的创建和组合应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

博主介绍：大爽歌, 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')
);