React/Material-UIで簡単なUI

6940 ワード
React material-ui React テキストリンク

Material-UIのインストール

$ npm install @material-ui/core

Material-UIでUI作成

~/Desktop/sample-app/src/components/MySample.js
import React from "react";
import {
  AppBar,
  Container,
  Toolbar,
  Typography,
  Grid,
} from "@material-ui/core";

const MySample = () => {
  return (
    <div>
      <AppBar position="static">
        <Toolbar>
          <Typography>Iris Dashboard</Typography>
        </Toolbar>
      </AppBar>
      <Container>
        <Grid container>
          <Grid item xs={12}>
            AAA
          </Grid>
          <Grid item xs={6}>
            AAA
          </Grid>
          <Grid item xs={6}>
            BBB
          </Grid>
          <Grid item xs={4}>
            AAA
          </Grid>
          <Grid item xs={4}>
            BBB
          </Grid>
          <Grid item xs={4}>
            CCC
          </Grid>
        </Grid>
      </Container>
    </div>
  );
};

export default MySample;
~/Desktop/sample-app/src/App.js
import logo from "./logo.svg";
import "./App.css";
import MySample1 from "./components/MySample";

function App() {
  return (
    <div className="App">
      <MySample />
    </div>
  );
}

export default App;