React 脚手架与TodoList案例_react输入框中输入东西按下回车完成todolist-CSDN博客

本文链接：https://blog.csdn.net/IAN27/article/details/116131486

1. 使用create-react-app创建react应用

2. react 脚手架

1.	xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目
	1.	包含了所有需要的配置（语法检查、jsx编译、devServer…）
	2.	下载好了所有相关的依赖
	3.	可以直接运行一个简单效果
2.	react提供了一个用于创建react项目的脚手架库: create-react-app
3.	项目的整体技术架构为:  react + webpack + es6 + eslint
4.	使用脚手架开发的项目的特点: 模块化, 组件化, 工程化

3. 创建项目并启动

第一步，全局安装：npm i -g create-react-app
第二步，切换到想创项目的目录，使用命令：create-react-app hello-react
第三步，进入项目文件夹：cd hello-react
第四步，启动项目：npm start

4.react 脚手架项目结构

在这里插入图片描述

5. 功能界面的组件化编码流程（通用）

1. 拆分组件: 拆分界面,抽取组件
2. 实现静态组件: 使用组件实现静态页面效果
3. 实现动态组件
	3.1 动态显示初始化数据
		3.1.1 数据类型
		3.1.2 数据名称
		3.1.2 保存在哪个组件?
	3.2 交互(从绑定事件监听开始)

6. Todolist案例

1）拆分组件 & 2）实现静态组件

将原html文件中的静态页面拆分至项目中

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>React App</title>

  <link rel="stylesheet" href="index.css">
</head>
<body>
<div id="root">
  <div class="todo-container">
    <div class="todo-wrap">
      <div class="todo-header">
        <input type="text" placeholder="请输入你的任务名称，按回车键确认"/>
      </div>
      <ul class="todo-main">
        <li>
          <label>
            <input type="checkbox"/>
            <span>xxxxx</span>
          </label>
          <button class="btn btn-danger" style="display:none">删除</button>
        </li>
        <li>
          <label>
            <input type="checkbox"/>
            <span>yyyy</span>
          </label>
          <button class="btn btn-danger" style="display:none">删除</button>
        </li>
      </ul>
      <div class="todo-footer">
        <label>
          <input type="checkbox"/>
        </label>
        <span>
          <span>已完成0</span> / 全部2
        </span>
        <button class="btn btn-danger">清除已完成任务</button>
      </div>
    </div>
  </div>
</div>

</body>
</html>

a. 将静态页面拆到项目中的App.jsx文件中

import React, { Component } from 'react'
import './App.css'


export default class App extends Component {

    render() {
        return (
            <div class="todo-container">
                <div class="todo-wrap">
                    <div class="todo-header">
                        <input type="text" placeholder="请输入你的任务名称，按回车键确认" />
                    </div>
                    <ul class="todo-main">
                        <li>
                            <label>
                                <input type="checkbox" />
                                <span>xxxxx</span>
                            </label>
                            <button class="btn btn-danger" style="display:none">删除</button>
                        </li>
                        <li>
                            <label>
                                <input type="checkbox" />
                                <span>yyyy</span>
                            </label>
                            <button class="btn btn-danger" style="display:none">删除</button>
                        </li>
                    </ul>
                    <div class="todo-footer">
                        <label>
                            <input type="checkbox" />
                        </label>
                        <span>
                            <span>已完成0</span> / 全部2
        </span>
                        <button class="btn btn-danger">清除已完成任务</button>
                    </div>
                </div>
            </div>
        )
    }
}

b. 将页面中的四个组件抽取到components目录下

注意：
	要将所有的classname 改为 className
	以及style属性加{
  {}}

在这里插入图片描述
c. 拆分、抽取后的静态页面效果及代码

在这里插入图片描述

import React, { Component } from 'react'


import './App.css'
import Head