BETA

create-react-app + TypeScript + Material-UI お勉強用環境のセットアップメモ

投稿日:2020-02-01
最終更新:2020-02-01

概要

ちょっとMaterial-UIを使ったUI開発を勉強しようと思って、まずは開発環境をセットアップしたメモ。

インストール

以下のように--typescriptを指定するのはDeprecatedらしい。警告が出てしまう。

$ npx create-react-app --typescript my-sample   

--template typescript を指定するのが正しい

$ npx create-react-app --template typescript my-sample  

次にMaterial-UIをインストール

$ cd my-sample  
$ yarn add @material-ui/core  

使い方

@material-ui/coreから使いたいコンポーネントをインポートする。

import { Typography, TextField, Button, CssBaseline, Container, DialogTitle, Dialog } from '@material-ui/core';  

JSXにコンポーネントを埋め込んで使えるようになる。

  return (  
    <Container maxWidth="sm" >  
      <CssBaseline />  
      <Typography variant="h5">ようこそ</Typography>  
      <form>  
        <TextField  
          label="名前"  
          name="name"  
          variant="outlined"  
          size="small"  
          fullWidth  
          margin="normal"  
          onChange={handleNameChange} />  
        <Button  
          variant="contained"  
          color="primary"  
          fullWidth  
          disabled={buttonDisabled}  
          onClick={handleClickOpen}>  
          Click!  
        </Button>  
        <HelloDialog open={open} name={name} onClose={handleClose} />  
      </form>  
    </Container>  
  );  

提供されているコンポーネントの種類や使い方、コードサンプルは公式サイトのComponentsやComponent APIを見て調べる。

補足

Hello World的な最初のサンプルコード作成の流れは個人ブログの記事にまとめた。

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

日々学んだことや感じたことをゆる〜く書いていこうと思います

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう