使用React布局实现TODOLIST效果图

        年前使用HTML布局实现TODOLIST效果图，是为了学习使用React实现效果图做铺垫，写的一篇文章，如有疑问可以通过历史消息查看《HTML布局实现TODOLIST效果图》文章。

        此篇文章主要是通过React的组件思想，先实现其效果图，后续在使用React添加待办事项的事件，完善其功能。现在也是直接上React需要实现todolist的效果图：

从图中分析TODOLIST布局的主要思路：

1.将官网上生成的代码中classname为app的DIV为整个界面的可视化窗口，设置其宽，并且居中显示。

2.在app的DIV中添加标题todos和下面的待办事项容器。

3.待办事项容器中添加了一个隔离线、输入容器和现实容器

4.输入容器包括一个添加按钮和一个输入框，实现待办事项的输入

5.显示容器包括待办事项列容器和底部编辑容器

6.待办事项列容器包括前面的一个按钮、中间显示字段和后面一个按钮

7.底部编辑容器包括一个全选按钮、遗留事项和清除按钮

有了这个思路，我们就开始可以考虑使用react来实现效果了，将代码文件和效果图进行对应显示：（ 其中使用的Common.css和之前的HTML实现一致）

现在大致讲解下代码实现：

a.先从react官网上，有个Create React App的命令，创建对应的实现功能文件，其命令如下：

npm install -g create-react-app

create-react-app react-todoList

cd react-todoList

npm start

生成的文件和对应的预览效果

b.在此基础上实现TODOLIST

修改app.js(设置当前可视化界面的宽度并居中显示，同时加载Title.js和Container.js)

import React, { Component } from 'react';

import Title from './Title';

import Container from './Container';

import './App.css';

class App extends Component {

  constructor(props) {

  super(props);

  this.state = {

  width: 600,

  marginLeft: 300

  }

  }

  componentDidMount() {

  console.log('componentDidMount');

  var w = window.innerWidth;

  this.setState({

  width: w/4,

  marginLeft: w/3

  })

  }

  render() {

    return (

     

 

       

       

     

 

    );

  }

}

export default App;

实现Title.js文件

import React, { Component } from 'react';

import './Common.css';

class Title extends Component {

  render() {

    return

todos

 

  }

}

export default Title;

实现Container.js文件（包括上面的隔离线、输入容器和显示容器）

import React, { Component } from 'react';

import Line from './Line';

import Header from './Header';

import Content from './Content';

import './Common.css';

class Title extends Component {

  render() {

    return (

   

 

   

   

   

   

 

    )

  }

}

export default Title;

实现Line.js文件

import React, { Component } from 'react';

import './Common.css';

class Line extends Component {

  render() {

    return (

     

 

 

    );

  }

}

export default Line;

实现Header.js文件

import React, { Component } from 'react';

import './Common.css';

class Header extends Component {

  render() {

    return (

     

 

      +

     

     

 

    );

  }

}

export default Header;

实现Content.js文件（包括显示待办列和底部编辑容器）

import React, { Component } from 'react';

import Footer from './Footer';

import './Common.css';

class Content extends Component {

  render() {

    return (

     

 

     

 

     

 

√

今天下午和客户沟通需求

×

 

 

 

 

○

明天制定方案

×

 

 

 

 

○

明天下午需要购物

×

 

 

     

 

     

 

     

 

    );

  }

}

export default Content;

实现Footer.js文件

import React, { Component } from 'react';

import './Common.css';

class Footer extends Component {

  render() {

    return (

   

 

    Toggle all

2 item left

Clean completed

   

 

    );

  }

}

export default Footer;

如有疑问可以留言或者添加个人微信号。

---

        微信订阅号：全栈工程师成长记（qzgcsczj）

目前阶段：

        以个人学习前端技术，来记录如何入门，如何填坑，如何成长，记录过程中可能知识零散，没有整合，如有问题直接添加个人微信号，交流学习；

未来阶段：

        整合个人学习技术，形成书签式的记录分享，为大家填坑，能够尽量少走弯路，成为全栈工程师。

如有兴趣一起学习，一起进步的朋友可以添加个人微信号，互相交流进步。

微信订阅号二维码

个人微信二维码