React课程学习系列笔记：03-01 使用React编写TodList功能

第三章

---

3-1 使用React编写TodList功能

1.使用官方脚手架 create-react-app 创建 react 项目：

create-react-app todolist

2.启动项目

npm start

注：

    1.项目默认端口为：3000，启动后若结束编码，应通过 Ctrl + C 来结束，不然下次启动项目会报端口占用，导致项目无法启动；

    2.若端口被占用，项目无法启动，可以通过任务管理器，杀死 node ；

3.项目代码：

    在 src 下创建文件，命名 TodoList.js ；

    1).在 JSX 语法中，要求一个组件 render 函数里面返回的内容外层必须有一个包裹元素，如下代码就违反了此规则；

import React, { Component, Fragment } from 'react';

class TodoList extends Component {
  render (){
    return(
    	<div>
          <input />
          <button>提交</button>
        </div>
        <ul>
          <li>hello</li>
        </ul>
    )
  }
}

export default TodoList;

    2).解决此问题可以在最外层再包裹一层 <div></div> ，若不想多一层 dom 元素，可以使用 React 提供的占位符：Fragment ；

import React, { Component, Fragment } from 'react';

class TodoList extends Component {
  render (){
    return(
    <Fragment>
        <div>
          <input />
          <button>提交</button>
        </div>
        <ul>
          <li>hello</li>
        </ul>
    </Fragment>
    )
  }
}

export default TodoList;

    3).引用TodoList组件：

import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList';
//	JSX 语法中，如果我们要使用自己创建的组件，如<TodoList />,组件开头必须大写字母开头
ReactDOM.render(<TodoList />, document.getElementById('root'));

4.项目目录结构：