如何命令行结束react程序_React实战篇：完成Pomotodo项目

React实战篇：完成Pomotodo项目

产品分析

我们利用现有的知识能够做一款app。先切入最常用的一块

红色部分。

我们先看这个设计图如何拆分组件：

这个APP组件嵌套很简单Pomotodo是父级，其它都是同级子组件。

我们就先把基础架子搭起来：

1.建立项目

使用命令行:

create-react-app pomotodo

2.嵌套结构

这里使用无状态组件，我们拿其中一个举例子，其他有是一样的：

import React 

具体参考起始代码，当大家看到这个界面的时候，就说明我们的项目基本结构跑起来了。

接下来，我们进入具体业务层面。

组件编写

我们在TaskInput添加新任务以后，要在TaskList组件展示，涉及到了不同组件之间数据的传递，肯定是要用到状态的，而不是无状态组件就能搞定的。

因为用到了状态，所以不能用现在的方式，而是需要用class方式创建组件，然后加入State:

import React, {Component} 

这样会出现无法输入数据的问题。

React的setState

React指定了setState方法更新组件的内容，所以我们需要做的是：

1. 监听输入框的onChange事件；

2. 然后获取到用户输入的内容；

3. 通过setState的方式更新state中的new_task；

通过以上3步，input里面的内容现在已经能够更新了。

import React, { Component } 

小节

我们先对产品进行分析；

然后使用命令行创建了项目模板；

最后了解了组件的嵌套与setState的使用。

下篇我们来说说组件通讯，并且应用到pomotodo中。

每周四，一起学习充电！

▼往期精彩回顾

▼

Vue简介(1.1)

Vue项目搭建只需要4步(1.2)

如何细化Vue项目目录？(2.1)

路由轻松设置vue-router(2.2)

vue-商品详情页面的实现(3.9)

vue-实现商品详情页的评价列表(3.10)

vue-实现商品的评价列表(3.11)

vue-项目的优化(4.1)

为什么会出现React?

《没有组件化，不行吗？》

让你告别重复开发——React组件化

用state记录用户的点点滴滴

▼ 往期程序员的职场优势力培养▼

别让“程序员是吃青春饭的”吓到你

程序员的路很多条，你走的哪一条？

解锁一种消灭程序员所有Bug的超能力

只需一个问题，看你是不是躺赢

多学一点，真的没错吗？

工资单的反面，是你的职业价值！

阶层固化算什么？锁死你的是工作习惯

职场癌早期症状：时间不够

但凡做到这点，何惧996？

你与世界

只差一个

公众号

面包理想

专注前端人员发展

前端涨薪好陪伴，请添加面包妹妹微信号：

mblx-sun