（04）React 入门——① 编写 TodoList 雏形 | React 基础理论实操## 1 编写 TodoLis

转载请注明出处，未经同意，不可修改文章内容。

🔥🔥🔥“前端一万小时”两大明星专栏——“从零基础到轻松就业”、“前端面试刷题”，已于本月大改版，合二为一，干货满满，欢迎点击公众号菜单栏各模块了解。

涉及面试题：
1. 什么是 Fragments？
2. 为什么使用 Fragments 比使用容器 div 更好？
3. 推荐的组件命名方法是什么？

[编号：react_04]

1 编写 TodoList 雏形

在编辑器中打开 jianshu-test 项目。为了后边 PC 端“简书”项目更好地开发，我们先以 TodoList 来练练手。

打开 index.js 文件，我们将“组件 App”改为 TodoList （与其对应的地方也都要改）：

import React from 'react';
import ReactDOM from 'react-dom';

import TodoList from './TodoList'; /*
																	 1️⃣组件 App 被改为 TodoList，那么对应的，
                                   它是来自当前目录下的 TodoList 文件；
                                    */

// 2️⃣对应的，挂载的时候，是将 TodoList 这个组件挂载到 id 为 root 的节点上；
ReactDOM.render(<TodoList />, document.getElementById('root'));

3️⃣先删除之前 src 文件夹里的 App.js 文件，因为我们需要从 TodoList.js 这个文件去引入。

4️⃣在 src 目录下新建一个 TodoList 文件（跟着动手写一下下边的代码）：

import React, { Component } from "react";

class TodoList extends Component {
  render() {
    return(
      <div>
        todolist
      </div>
    )
  }
}

export default TodoList;

看看页面效果：

5️⃣接着，我们实现 TodoList 的雏形——有个 input 框，后边紧跟一个“提交”按钮：

import React, { Component } from "react";

class TodoList extends Component {
  render() {
    return(
      
      // 🚀有个 input 框，后边紧跟一个“提交”按钮。
      <div><input /><button>提交</button></div>
    )
  }
}

export default TodoList;

6️⃣作为一个 TodoList，一般的使用逻辑是：在 input 框里边输入你要做的事情（如“React 初识”），然后点击“提交”。“React 初识”就会以“列表”的形式，挨个展示在 input 框下边。故，我们再在 input 框下边实现一个列表：

import React, { Component } from "react";

class TodoList extends Component {
  render() {
    return(
      
      // ❗️❗️❗️貌似应该这样写，但……请保存代码查看页面报错！
      <div><input /><button>提交</button></div>
      <ul>
        <li>React 初识</li>
        <li>React 入门</li>
        <li>React 进阶</li>
      </ul>
    )
  }
}

export default TodoList;

❓为什么会出现报错？

答：因为“JSX 语法”要求我们在写 HTML 标签时，最外层有且只能有一个 <div> 标签对所有标签进行包裹！

所以，改正一下：

import React, { Component } from "react";

class TodoList extends Component {
  render() {
    return(
      
      // 🚀外层有且只能有一个 div 标签对所有标签进行包裹！
      <div>
        <div><input /><button>提交</button></div>
        <ul>
          <li>React 初识</li>
          <li>React 入门</li>
          <li>React 进阶</li>
        </ul>
      </div>
    )
  }
}

export default TodoList;

2 `<div>` 包裹带来的后患

❓以上通过一个 <div> 包裹所有标签的形式编写代码，就没有后患了吗？

答：当然有后患！我们检查元素发现这个外层的 <div> 标签实实在在地显示在了 DOM 结构上。

❓这会带来什么隐患呢？

答：我们在做一些 Flex 布局的时候，我们常常并不希望有这个多余的 <div> 标签。

**❓怎么解决这个隐患呢（既能让其符合“JSX 语法”，又能保证这个 ****<div>** 不被显示出来）？

答：在 React16 版本里，React 提供给我们了一个名为 Fragment 的占位符。

即，我们可以先从 react 里引入 Fragment ，然后用 <Fragment> 来替代最外层的 <div> 标签：

import React, { Component, Fragment } from "react"; // 🚀先引入 Fragment；

class TodoList extends Component {
  render() {
    return(
      
      // 🚀再用 Fragment 替代 div。
      <Fragment>
        <div><input /><button>提交</button></div>
        <ul>
          <li>React 初识</li>
          <li>React 入门</li>
          <li>React 进阶</li>
        </ul>
      </Fragment>
    )
  }
}

export default TodoList;

下一篇，我们在本篇“雏形”的基础上，去实现真正的 TodoList 功能，并在实现功能的过程中，讲解两个特别重要的知识点：

React 中的响应式设计思想；
React 事件绑定。

祝好，qdywxs ♥ you！

（04）React 入门——① 编写 TodoList 雏形 | React 基础理论实操

1 编写 TodoList 雏形

2 <div> 包裹带来的后患

2 `<div>` 包裹带来的后患