[云开发5]-通过React+Boostrap快速构建一个卡片应用

React

React，目前非常流行的前端框架之一。采用声明式的设计，高效，灵活。

Bootstrap

Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站，其中包括以下组件：
下拉菜单、按钮组、按钮下拉菜单、导航、导航条、路径导航、分页、排版、缩略图、警告对话框、进度条、媒体对象等

项目设计

• 通过服务器获取一些待办事项，然后通过漂亮的卡片设计来显示。
• 支持多端设备。

项目开发

1. 数据通过JSON来模拟后端获取的数据:

{
"todos": [
    {
        "title": "Reading",
        "date": "2020-02-01",
        "description": "fdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfd"

    },
    {
        "title": "Coding",
        "date": "2020-02-03",
        "description": "fdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfd"

    },
    {
        "title": "Running",
        "date": "2020-02-04",
        "description": "fdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfd"

    },
    {
        "title": "Party",
        "date": "2020-02-05",
        "description": "fdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfd"

    },
    {
        "title": "Sleep",
        "date": "2020-02-06",
        "description": "fdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfd"

    }
]
}

2. 创建React项目：
   通过create react app创建app。

内容比较简单，将数据通过Card显示:

创建一个页面的Component,Contents.js:

import React, { Component } from 'react';
import { todos } from './todos.json';

export default class Content extends Component {
    render() {
        return (
            <main role="main" class="container">

                <div class="row">


                    {todos.map(
                        todo => {
                            return (
                                <div class="col-sm-12 col-md-4">

                                    <div class="card mb-3">
                                        <div class="card-body">
                                            <h5 class="card-title">{todo.title}</h5>
                                            <h6 class="card-subtitle mb-2 text-muted">{todo.date}</h6>
                                            <p class="card-text">{todo.description}</p>
                                            <a href="#" class="card-link">link</a>
                                            <a href="#" class="card-link">Another link</a>
                                        </div>
                                    </div>

                                </div>
                            )
                        }
                    )}


                </div>


            </main>
        );
    }
}

3. 引入Bootstrap

这里是通过CSS的方式引入了bootstrap，在index.html中加入bootstrap的css和js文件:

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
    integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
    integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
    crossorigin="anonymous"></script>

测试运行

本地运行:

npm start

Bootstrap还提供了响应式的交互，在移动端也能方便查看：

小结

React使用JSX，JSX是JS语法的扩展，看起来和HTML比较像，比较推荐的写法。通过React构建组件，使代码更加容易得到复用。

Bootstrap作为最受欢迎的CSS库，可以非常方便的快速构建一个美观的应用。

项目代码

• cards-app

参考阅读

• https://reactjs.org/
• https://github.com/twbs/bootstrap