React.js material-uiの導入と使い方

2019.12.09
React
material-ui, React

react.jsで利用できるマテリアルデザインのCSSフレームワークmaterial-uiを導入手順と簡単な使い方とテンプレートの利用方法を記載。

1. 環境
2. material-uiインストール
3. material-uiを利用

環境

OS CentOS Linux release 8.0.1905 (Core)
node V10.16.3
npm 6.9.0
React 16.12.0

material-uiインストール

下記のコマンドでインストールします。

npm install @material-ui/core

1	npm install @material-ui/core

material-uiを利用

Buttonを配置してみます。

src配下のApp.jsに下記のコードを追加します。

import React from 'react';
//追加
import Button from '@material-ui/core/Button';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">        
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        //追加　ここから
        <Button variant="contained" color="primary">
        Hello World
        </Button>
        //追加　ここまで
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

import React from 'react';

//追加

import Button from '@material-ui/core/Button';

import logo from './logo.svg';

import './App.css';

function App() {

return (

<p>

Edit <code>src/App.js</code> and save to reload.

</p>

//追加　ここから

Hello World

</Button>

//追加　ここまで

className="App-link"

href="https://reactjs.org"

target="_blank"

rel="noopener noreferrer"

Learn React

</a>

</header>

</div>

);

}

export default App;

npm start で起動して、ブラウザから http://プライベートIP:3000 にアクセスすると material-ui を利用したbuttonが配置されています。

次に公式にあるテンプレートを利用してみます。

今回は「Sign-in side template」を利用してみます。

githubに上がっているコードをそのままApp.jsに貼り付けます。

import React from 'react';
import Avatar from '@material-ui/core/Avatar';
import Button from '@material-ui/core/Button';
import CssBaseline from '@material-ui/core/CssBaseline';
import TextField from '@material-ui/core/TextField';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox';
import Link from '@material-ui/core/Link';
import Paper from '@material-ui/core/Paper';
import Box from '@material-ui/core/Box';
import Grid from '@material-ui/core/Grid';
import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
import Typography from '@material-ui/core/Typography';
import { makeStyles } from '@material-ui/core/styles';

function Copyright() {
  return (
    <Typography variant="body2" color="textSecondary" align="center">
      {'Copyright © '}
      <Link color="inherit" href="https://material-ui.com/">
        Your Website
      </Link>{' '}
      {new Date().getFullYear()}
      {'.'}
    </Typography>
  );
}

const useStyles = makeStyles(theme => ({
  root: {
    height: '100vh',
  },
  image: {
    backgroundImage: 'url(https://source.unsplash.com/random)',
    backgroundRepeat: 'no-repeat',
    backgroundColor:
      theme.palette.type === 'dark' ? theme.palette.grey[900] : theme.palette.grey[50],
    backgroundSize: 'cover',
    backgroundPosition: 'center',
  },
  paper: {
    margin: theme.spacing(8, 4),
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
  },
  avatar: {
    margin: theme.spacing(1),
    backgroundColor: theme.palette.secondary.main,
  },
  form: {
    width: '100%', // Fix IE 11 issue.
    marginTop: theme.spacing(1),
  },
  submit: {
    margin: theme.spacing(3, 0, 2),
  },
}));

export default function SignInSide() {
  const classes = useStyles();

  return (
    <Grid container component="main" className={classes.root}>
      <CssBaseline />
      <Grid item xs={false} sm={4} md={7} className={classes.image} />
      <Grid item xs={12} sm={8} md={5} component={Paper} elevation={6} square>
        <div className={classes.paper}>
          <Avatar className={classes.avatar}>
            <LockOutlinedIcon />
          </Avatar>
          <Typography component="h1" variant="h5">
            Sign in
          </Typography>
          <form className={classes.form} noValidate>
            <TextField
              variant="outlined"
              margin="normal"
              required
              fullWidth
              id="email"
              label="Email Address"
              name="email"
              autoComplete="email"
              autoFocus
            />
            <TextField
              variant="outlined"
              margin="normal"
              required
              fullWidth
              name="password"
              label="Password"
              type="password"
              id="password"
              autoComplete="current-password"
            />
            <FormControlLabel
              control={<Checkbox value="remember" color="primary" />}
              label="Remember me"
            />
            <Button
              type="submit"
              fullWidth
              variant="contained"
              color="primary"
              className={classes.submit}
            >
              Sign In
            </Button>
            <Grid container>
              <Grid item xs>
                <Link href="#" variant="body2">
                  Forgot password?
                </Link>
              </Grid>
              <Grid item>
                <Link href="#" variant="body2">
                  {"Don't have an account? Sign Up"}
                </Link>
              </Grid>
            </Grid>
            <Box mt={5}>
              <Copyright />
            </Box>
          </form>
        </div>
      </Grid>
    </Grid>
  );
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

import React from 'react';

import Avatar from '@material-ui/core/Avatar';

import Button from '@material-ui/core/Button';

import CssBaseline from '@material-ui/core/CssBaseline';

import TextField from '@material-ui/core/TextField';

import FormControlLabel from '@material-ui/core/FormControlLabel';

import Checkbox from '@material-ui/core/Checkbox';

import Link from '@material-ui/core/Link';

import Paper from '@material-ui/core/Paper';

import Box from '@material-ui/core/Box';

import Grid from '@material-ui/core/Grid';

import LockOutlinedIcon from '@material-ui/icons/LockOutlined';

import Typography from '@material-ui/core/Typography';

import { makeStyles } from '@material-ui/core/styles';

function Copyright() {

return (

Your Website

</Link>{' '}

{new Date().getFullYear()}

{'.'}

</Typography>

);

}

const useStyles = makeStyles(theme => ({

root: {

height: '100vh',

image: {

backgroundImage: 'url(https://source.unsplash.com/random)',

backgroundRepeat: 'no-repeat',

backgroundColor:

theme.palette.type === 'dark' ? theme.palette.grey[900] : theme.palette.grey[50],

backgroundSize: 'cover',

backgroundPosition: 'center',

paper: {

margin: theme.spacing(8, 4),

display: 'flex',

flexDirection: 'column',

alignItems: 'center',

avatar: {

margin: theme.spacing(1),

backgroundColor: theme.palette.secondary.main,

form: {

width: '100%', // Fix IE 11 issue.

marginTop: theme.spacing(1),

submit: {

margin: theme.spacing(3, 0, 2),

}));

export default function SignInSide() {

const classes = useStyles();

return (

</Avatar>

</Typography>

<TextField

variant="outlined"

margin="normal"

required

fullWidth

id="email"

label="Email Address"

name="email"

autoComplete="email"

autoFocus

<TextField

variant="outlined"

margin="normal"

required

fullWidth

name="password"

label="Password"

type="password"

id="password"

autoComplete="current-password"

<FormControlLabel

control={<Checkbox value="remember" color="primary" />}

label="Remember me"

<Button

type="submit"

fullWidth

variant="contained"

color="primary"

className={classes.submit}

</Button>

Forgot password?

</Link>

</Grid>

{"Don't have an account? Sign Up"}

</Link>

</Grid>

</Box>

</form>

</div>

</Grid>

);

}

下記のエラーが発生。

Module not found: Can't resolve '@material-ui/icons/LockOutlined'

1	Module not found: Can't resolve '@material-ui/icons/LockOutlined'

モジュールがないといっているのでインストールします。

npm install @material-ui/icons

1	npm install @material-ui/icons

ブラウザから http://プライベートIP:3000 にアクセスするとテンプレートが利用できていることが確認できます。

React.js material-uiの導入と使い方

環境

material-uiインストール

material-uiを利用

Ubuntu19.10 pythonでwebサーバーを起動する 2019.12.09

Ubuntu19.10にhugoをインストールしてテンプレートを適応する 2019.12.10