【React】模块化案例 - TodoList - 页面拆分 - 静态页面搭建 - 动态页面交互实现 - 总结

最新推荐文章于 2024-05-31 16:06:33 发布

YK菌

最新推荐文章于 2024-05-31 16:06:33 发布

阅读量1.2k

点赞数 8

分类专栏：前端框架React 文章标签： react

本文链接：https://blog.csdn.net/weixin_44972008/article/details/117755646

版权

本文详细介绍了如何使用React实现TodoList模块化，包括页面拆分、静态页面搭建、动态组件交互，涉及状态管理、组件通信、事件处理等关键点。通过对比Vue的实现，帮助开发者深入理解React的特性和用法。

摘要由CSDN通过智能技术生成

之前用Vue写过这个页面，这次用React再写一次，步骤功能都是类似的，就是语法和用法有点区别

【Vue】Vue模块化实战-demo2-任务清单todoList
可以对比着学习一下

1. 目标功能界面

在这里插入图片描述

2. 界面模块拆分

在这里插入图片描述

3. 主页 index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  <title>React App</title>
</head>

<body>
  <div id="root"></div>
</body>

</html>

4. 静态页面搭建

index.js

import React from "react";
import ReactDDOM from "react-dom";
import App from "./App";

ReactDDOM.render(<App />, document.getElementById("root"));

App.jsx

import React, {
    Component } from "react";
import Header from "./components/Header";
import List from "./components/List";
import Footer from "./components/Footer";
import './App.css'

export default class App extends Component {
   
  render() {
   
    return (
      <div className="todo-container">
        <div className="todo-warp">
          <Header />
          <List />
          <Footer />
        </div>
      </div>
    );
  }
}

App.css

/*base*/
body {
   
  background: #fff;
}

.btn {
   
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.btn-danger {
   
  color: #fff;
  background-color: #da4f49;
  border: 1px solid #bd362f;
}

.btn-danger:hover {
   
  color: #fff;
  background-color: #bd362f;
}

.btn:focus {
   
  outline: none;
}

/*app*/
.todo-container {
   
  width: 600px;
  margin: 0 auto;
}
.todo-container .todo-wrap {
   
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

Header/index.js

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

export default class Header extends Component {
   
  render() {
   
    return (
      <div className="todo-header">
        <input type="text" placeholder="请输入你的任务名称，按回车键确认"/>
      </div>
    )
  }
}

Header/index.css

/*header*/
.todo-header input {
   
  width: 560px;
  height: 28px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 4px 7px;
}

.todo-header input:focus {
   
  outline: none;
  border-color: rgba(82, 168, 236, 0.8);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}

List/index.jsx

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

export default class List extends Component {
   
  render() {
   
    return (
      <ul className="todo-main">
        <Item />
      </ul>
    )
  }
}

List/index.css

/*main*/
.todo-main {
   
  margin-left: 0px;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding: 0px;
}

.todo-empty {
   
  height: 40px;
  line-height: 40px;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding-left: 5px;
  margin-top: 10px;
}

Item/index.jsx

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

export default class Item extends Component {
   
  render() {
   
    return (
      <li>
        <label>
          <

最低0.47元/天解锁文章

YK菌

关注

8
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
【React】模块化案例 - TodoList - 页面拆分 - 静态页面搭建 - 动态页面交互实现 - 总结

之前用Vue写过这个页面，这次用React再写一次，步骤功能都是类似的，就是语法和用法有点区别，可以对比着学习一下
复制链接

扫一扫

专栏目录