阅读 190

【小白入门】React实现TodoList简易教程(上) | 8月更文挑战

本篇文章主要以React实现一个完整的TodoList功能,作为React的入门案例。

设计思想

React 是一种用于构建用户界面的 JavaScript 库,也是目前最受欢迎的 Web 界面开发工具之一。主要是得益于它精妙的设计思想:

首先,React 让创建交互式 UI 变得轻而易举。  它不仅可以为应用的每一个状态设计出简洁的视图。而且,当数据变动时,React 还能高效更新并渲染合适的组件。

其次,React 把组件化的思想发挥得淋漓尽致。  在 React 应用中,一切皆组件,每个组件像机器零件一样,开发者把每一个组件组合在一起,将 React 应用运转起来。

最后,React 还具有跨平台能力。  React 支持 Node 进行服务器渲染,还可以用 React Native 进行原生移动应用的开发,随着跨平台构建工具的兴起,比如 Taro,开发者可以写一套 React 代码,适用于多个平台。

开发环境搭建

Create React App是一个用于学习 React 的舒适环境,也是用 React 创建新的[单页]应用的最佳方式。前提是需要安装 [Node >= 8.10 和 npm >= 5.6]。要创建项目,请执行:

npx create-react-app my-app
cd my-app
npm start
复制代码

npx 不是拼写错误 —— 它是 npm 5.2+ 附带的 package 运行工具

编写TodoList功能

QQ截图20210803160632.png

实现思路:

  1. 编写整体布局;
  2. 所有任务项都是在一个列表之中,可以定义一个组件,通过props的传值实现数据传递;
  3. 头部的输入框和点击新增。可以当做主容器,作为父组件使用。

未定义子组件时的构造代码

class TodoData extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: ['吃饭','上班'],
    };
    this.handleClick = this.handleClick.bind(this);
    
  }
  handleClick() {
      // 点击新增执行
  }
  render() {
    return (
      <Fragment>
        <div className="input-box">
          <input placeholder="任务" />
          <button className="btn-add" onClick={this.handleClick}>新增</button>
        </div>
        <ul className="list-box ">
            {
            this.state.list.map((item) => {
                return <li>{item}</li>
            })
            }
        </ul>
      </Fragment>
    );
  }
}
export default TodoData;

复制代码

以上是页面初始时的构造模型,由于时间关系,明天继续更新具体实现方法以及形成组件化的方式。请大家持续关注!

文章分类
前端
文章标签