试着使用Material-UI代替Bootstrap在React中使用

在使用superAgent时，将Rails和React进行API集成，接着创建一个简易的表格。

上次我们成功地将Rails和React进行了API集成，并创建了一个数据表格。
以下是上次完成的结果。

本次计划沿着《React初学者指南》的步骤来创建表格编辑功能，但是由于太丑陋了，缺乏动力，所以我打算先将设计部分弄得漂亮一些。

我想使用一个类似于Bootstrap的东西。

我通常在使用Rails时，当我想要“尝试做点什么”时，我通常会使用Bootstrap。但是，在使用React时，我思考应该怎么做，所以我进行了一些调查，并找到了一些有用的文章。

早く・それなりの UI を実現する React コンポーネントセット 16 選

根据这篇文章所说的，

• React を前提とした React コンポーネントセット

既存の CSS を移植した React コンポーネントセット

好像有两种模式，一种是前面提到的。
进一步阅读后发现前者更方便，所以这次我想使用一个叫做Material-UI的组件库。

如果您想快速了解Material-UI的概述，我认为以下文章配有GIF和图片可能更加易懂。

• Material UIを使ってカッコいいUIのReactアプリケーションを作ってみた

• 公式サイト Material-UI

Gtihub Material-UI

安装Material-UI。

$ npm install --save material-ui

将主题导入组件

当阅读官方网站的使用说明时，我们可以了解到，为了使用Material-UI的组件，必须导入主题。

我会根据官方网站的样例追加代码。

import React from 'react'
import ReactDOM from 'react-dom'
import request from 'superagent'
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider' // 追記

class Books extends React.Component {
  constructor() {
    super()
    this.state = {
      books: [],
    }
  }

  componentWillMount() {
    this.getState()
  }

  getState() {
    request
      .get('/api/books/index')
      .end((error, res) => {
      if (!error && res.status === 200) {
        const json = JSON.parse(res.text)
        this.setState({
          books: json.books,
        })
      } else {
        console.log(error)
      }
    })
  }

  render() {
    const {books} = this.state
    const headers = books[0] != null ? Object.keys(books[0]) : []
    return (
      <MuiThemeProvider> // 追記
        <div>
          <h1>BookApp</h1>
          <table>
            <thead>
              <tr>
                {headers.map((header, index) => {
                  return (
                    <th key={index}>{header}</th>
                  )
                })}
              </tr>
            </thead>
            <tbody>
            {books.map((book, index) => {
              return (
                <tr key={index}>
                  {Object.values(book).map((row, index) => {
                    return (
                      <td key={index}>{row}</td>
                    )
                  })}
                </tr>
              )
            })}
          </tbody>
          </table>
        </div>
      </MuiThemeProvider> // 追記
    )
  }
}

ReactDOM.render(
  <Books />,
  document.getElementById("books")
)

MuiThemeProvider似乎需要将一个单一元素作为Props传递。您可以像使用组件一样传递元素，或者像此次的例子一样，通过包裹在`

`中的单一元素传递都应该没有问题。

使用Material-UI重新编写表格

由于已经做好了使用 Material-UI 的准备，现在我们可以开始实际地重写表格的代码。

import React from 'react'
import ReactDOM from 'react-dom'
import request from 'superagent'
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
// 以下追記
import {Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn} from 'material-ui/Table'

class Books extends React.Component {
  constructor() {
    super()
    this.state = {
      books: [],
    }
  }

  componentWillMount() {
    this.getState()
  }

  getState() {
    request
      .get('/api/books/index')
      .end((error, res) => {
      if (!error && res.status === 200) {
        const json = JSON.parse(res.text)
        this.setState({
          books: json.books,
        })
      } else {
        console.log(error)
      }
    })
  }

  render() {
    const {books} = this.state
    const headers = books[0] != null ? Object.keys(books[0]) : []
    return (
      <MuiThemeProvider>
        <div>
          <h1>BookApp</h1>
          // <table>, <thead>, <tbody>, <tr>, <th>, <td>を変更
          // 詳しくは (http://www.material-ui.com/#/components/table) を参照
          <Table>
            <TableHeader>
              <TableRow>
                {headers.map((header, index) => {
                  return (
                    <TableHeaderColumn key={index}>{header}</TableHeaderColumn>
                  )
                })}
              </TableRow>
            </TableHeader>
            <TableBody>
              {books.map((book, index) => {
                return (
                  <TableRow key={index}>
                    {Object.values(book).map((row, index) => {
                      return (
                        <TableRowColumn key={index}>{row}</TableRowColumn>
                      )
                    })}
                  </TableRow>
                )
              })}
            </TableBody>
          </Table>
          // ここまで変更
        </div>
      </MuiThemeProvider>
    )
  }
}

ReactDOM.render(
  <Books />,
  document.getElementById("books")
)

到目前为止，我们的UI如下所示。

我想让它看起来更好一些，所以想尝试使用Material-UI的组件。

import React from 'react'
import ReactDOM from 'react-dom'
import request from 'superagent'
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
import {Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn} from 'material-ui/Table'
import {Card, CardHeader} from 'material-ui/Card' // 追記

class Books extends React.Component {
  constructor() {
    super()
    this.state = {
      books: [],
    }
  }

  componentWillMount() {
    this.getState()
  }

  getState() {
    request
      .get('/api/books/index')
      .end((error, res) => {
      if (!error && res.status === 200) {
        const json = JSON.parse(res.text)
        this.setState({
          books: json.books,
        })
      } else {
        console.log(error)
      }
    })
  }

  render() {
    const {books} = this.state
    const headers = books[0] != null ? Object.keys(books[0]) : []
    return (
      <MuiThemeProvider>
        <Card> // 変更
          <CardHeader title="BookApp" /> // 変更
          <Table>
            <TableHeader>
              <TableRow>
                {headers.map((header, index) => {
                  return (
                    <TableHeaderColumn key={index}>{header}</TableHeaderColumn>
                  )
                })}
              </TableRow>
            </TableHeader>
            <TableBody>
              {books.map((book, index) => {
                return (
                  <TableRow key={index}>
                    {Object.values(book).map((row, index) => {
                      return (
                        <TableRowColumn key={index}>{row}</TableRowColumn>
                      )
                    })}
                  </TableRow>
                )
              })}
            </TableBody>
          </Table>
        </Card> // 変更
      </MuiThemeProvider>
    )
  }
}

ReactDOM.render(
  <Books />,
  document.getElementById("books")
)

通过将平坦无纹的表面变成带有纹理的卡片，使得表格具备了立体感！

总结

在Qiita上有一些关于Material-UI的文章，而且文档也非常完备，我认为它非常易于使用！现在我想按照React初学者指南逐步学习…。