(三)最简单的React教程,开发自己的电影网站:规划页面布局

avatar

这一节来把页面的布局写出来,布局还用vue教程里的那个

总共就五个类型的电影列表,所以我们做成下面这样

原谅我这画风。。

根据上面的布局,可以把组件分为

  1. 最上面的tabbar
  2. 下面的列表
  3. 列表中的每一项
  4. 最后还有一个详情页不要忘了

在components里新建四个js文件

  • TabBar.js
  • List.js
  • Item.js
  • Detail.js

内容大致长下面这样

import React, { Component } from 'react';

class TabBar extends Component {
  constructor(props) {
    super(props);
    this.state = {}
  }
  render() {
    return (<div></div>);
  }
}

export default TabBar;

建好后先放这,下一节来介绍一下组件里的一些细节

目前还没有回答,快来帮帮TA吧!
添加一条评论 请尽量发布对他人有帮助的评论

登录后可发布评论

登录 | Github登录