2022-03-18

Reactメモ ~State~

Reactのメモです。

State

Stateはコンポーネントによって完全プライベートに管理される。

クラス

クラスコンポーネントは常にpropsを引数に、親クラスのコンストラクタを呼び出す必要がある。

    cinstructor(props){
      super(props);
      this.state={data: new Date()};
    }

setState

stateは直接変更するのでなく、setState()を使用する。何故なら、setState()を使わないと再レンダリングされないから。

    //再レンダーされない。
    this.state.comment='Hello!';
    
    //再レンダーされる。
    this.setState({comment: 'Hello!'});

コンストラクタのみthis.stateに直接代入してよい。this.setStateはそれぞれが定義されているコンポーネント内でプライベートとみなすべきもの。

stateの更新

Reactは複数のsetStateを一度の更新にまとめることがある(効率化のため)。

this.propsとthis.stateは非同期に更新されるため、以下のようにする。

    //カウンターが正しく機能しない可能性あり。
    this.setState({
      counter: this.state.counter + this.props.increment,
    });
    
    //正解
    this.setState((state,props)=>({
      counter: state.counter + props.increment
    }));

stateの個別更新

stateの中身が複数あるとき、setStateで個別に更新して良いのか

    ...
    this.state={
      posts: [],
      comments: []
    };
    ...
    this.setState({
      post: response.posts
    });

更新された値のみ置き換えられる。

2022-03-18

Reactメモ ~~

Reactのメモ2です

propsの指定

JavaScript式

任意のJavaScript式は{}で囲むことによってpropsとして渡すことができます。

<MyComponent foo={1+2+3+4}/>

MyComponentというコンポーネントのpropsのfooに10が与えられる。

if文やfor文はJavaScriptでは文ではないらしいので{}の中で使うことができないので、JSX記法の近くで間接的に用いるらしい。

    function Number(props){
      let description;
      if(props.number %2 == 0){
        description=<strong>even</strong>;
      } else{
        description = <i>odd</i>;
      }
      return <div>{props.number} is an {description} number </div>;
    }

文字列リテラル

文字列リテラルをpropsに与える場合、以下は同じである。

    <MyComponent message="hello world" />
    
    <MyComponent message={'hello world'} />

プロパティのデフォルトはtrue

プロパティのデフォルトはtrueであるため、以下は同じである。

    <MyTextBox autocomplete />
    
    <MyTextBox autocomplete={true} />

しかし、値の省略は推奨してないらしいので、省略はしないように。

propsのスプレッド構文

props オブジェクトがあらかじめ存在しており、それを JSX に渡したいような場合は ... を「スプレッド」演算子として使用することで、props オブジェクトそのものを渡すことができます。

以下は同じである。

    function App1(){
      return <Greeting firestName="Ken" lastName="Sato" />; 
    }
    
    function App2(){
      const props = {firstName:'Ken', lastName'Sato'};
      return <Greeting {...props} />;
    }

また、必要なプロパティのみ取り出して、残りをスプレッド構文でまとめることもできます。

2022-03-18

Reactメモ ~タグの大文字小文字~

Reactのメモ

一通り学習した後に、新たにReactで得た知識を書きます。ただのメモです。

タグの大文字小文字

タグの中の始まりが小文字の場合、htmlタグとして認識される。大文字の場合コンポーネントとして認識される。

以下、ダメな例

    //コンポーネントは大文字で始める。
    function hello(props){
      return  <div>Hello {props.name} </div>;
    }
    
    //小文字で始まっているため、htmlタグとして認識されている。
    function HelloWorld(){
      return <hello name="Mike" />;
    }

タグの大文字小文字には注意！

2022-03-16

CSS Styled ~中央寄せ~

中央寄せ

htmlで作成したUIを中央に寄せるときに使用する記法。 MUIのstyledのなかでの記法になる。

    margin:"auto",

これだけでは中に文字を入れている場合(タグで文字を挟んだ場合)その文字には中央揃えは適用されていない。文字に中央ぞろえを適用させるためには以下のように記述する。

    textAlign:"center",

cssをあまり触れずにReactを触っているため、cssに対するあいまいな知識や知らない知識が多い。忘れたころに戻ってこれるように簡単に記述しておいた。

2022-03-16

MUIの勉強記録 3 ~Avatar component~

Avatar

LINEやtwitterのアイコンのようなUIを作成できる。

まずはアバターのモジュールをインポートしておく。最低限これをインポートしておく。ここから各々必要に応じてインポートする。

    import as React from "react";
    import Avatar from '@mui/material/Avatar';

画像アバター

alt属性は画像が表示できない場合に代わりに表示する文字列。 srcに表示したい画像のパスを指定する。

<Avatar alt="You" src="/~/~/you.jpg" />

文字のアバター

文字のアバター(ツイッターなどのアイコン)は、文字列を渡すと作成できる。sx属性(cssの設定ができる。)にbgcolorでアイコン背景の色を指定できる。カラーは各々必要な色をインポートしておく。今回は"deepOrange"をインポートした。

※なお、カラーについては MUI Color公式ページ sx属性についてはsx属性 MUI公式ページに掲載。

import { deepOrange } from '@mui/material/colors';
<Avatar>H</Avatar>
<Avatar sx={{ bgcolor: deepOrange[500] }}>N</Avatar>

size

アバターのサイズを変更できる。

    <Avatar
    alt="You"
    src="~/~/image.jpg"
    sx={{width:24,height:24}}
    />

以下のようにsx内にbgcolorとsizeの変更を同時にすることもできる。

   
import { deepOrange } from "@mui/material/colors"
<Avatar
    sx={{width:24, height:24, bgcolor:deepOrange[500]}}
/>

アイコンアバター

フォルダのアイコンなどのアイコンをインポートしてアバターの画像として使うことができる。icons-materialをインストールしていなければ以下のコマンドを打ち込んでインストールする。

// with npm
npm install @mui/icons-material

// with yarn
yarn add @mui/icons-material

使いたいアイコンをインポートしてアバタータグの中にタグとして設定する。

import FlderIcon from '@mui/icons-material/Folder'
import PageviewIcon from '@mui/icons-material/Pageview'
<Avatar>
    <FolderIcon />
</Avatar>
    
<Avatar>
    <PageviewIcon />
</Avatar>

ほかにもたくさんのiconのテンプレートがある。ここにアイコンの一覧が見れる公式ページがある。

形のあるアイコン

正方形や、角に丸みを帯びた形のアバターが使える。"variant"に指定する。variantにroundedを指定すると角の丸い正方形が表示される。

    <Avatar variant="square">
      N
    </Avatar>

アバターグループ

通常表示

グループ内に複数の人がいるときに重ねて表示します。maxに表示する最大の数を入れます。

    import AvatarGroup from '@mui/material/AvatarGroup';
    
    <AvatarGroup max={4}>
      <Avatar>A</Avatar>
      <Avatar>B</Avatar>
      <Avatar>C</Avatar>
      <Avatar>D</Avatar>
      <Avatar>E</Avatar>
    </AvatarGroup>

アバターの数制御

表示されていないアバターの数を制御することができる。 totalに書いた数、アバターが存在しているような表示になります使いどころがいまいちわかりませんでした。

    import AvatarGroup from '@mui/material/AvatarGroup'
    <AvatarGroup total={10}>
      <Avatar>A⁢/Avatar>
      <Avatar>B⁢/Avatar>
      <Avatar>C⁢/Avatar>
      <Avatar>D⁢/Avatar>
    </AvatarGroup>

Avatar コンポーネントは複数の人が出てくるアプリで重宝しそうですね。公式ページにはバッジ付きの説明もあるのですが、先にstyledを学んでから戻ってこようと思います。なので次回はstyledを更新します。お疲れさまでした。

2022-03-15

MUIの勉強記録 2 ~Buttonコンポーネント~

Buttonコンポーネント

公式の説明を読みながら解読します。

基本ボタンには、テキスト、包含、アウトラインの3つのバリエーションがあります。
引用元:MUI公式サイト_Button

variant

variant属性には"text","contained","outlined"がある。

"text"と指定すると、タグでくくって指定した文字がボタンになる。何も指定しない場合、デフォルトで"text"になる。
"contained"と指定するとボタン全体が青色になる。(青色はデフォルトの場合。変更可能)
"outlined"と指定するとボタンの外枠のみが青色になる。

クリックの処理

ボタンタグの中にonClick関数を置きます。

color

既定のボタンを使用することができます。例えば"secondary","success","error"などがあります。また、カスタムをすることもできます。

使いかた

   color="secoundary"

size

ボタンのサイズを変更します。

small
medium
large

使いかた

    size="small"
    size="medium"
    size="large"

2022-03-15

MUIの勉強記録 1

MUIについて勉強していくので、軽く使い方をまとめます。間違い、要望あればコメントください。

MUIとは

UIテンプレートの集まり。そのまま使うことも改良することもできる。基本的にはググれば出てくる。以前は"material-ui"だったが、最近では新たに"mui"が使えるようになった。

これから

MUIは豊富なコンポーネントを持つため、それぞれのコンポーネントについてまとめて行く予定。

初投稿かつ短い記事になってしまいましたが、今回はここで区切らせていただきます。次回以降も簡単にまとめるだけにする予定です。MUIを使いこなせるようになればUIで困ることが減りそうなので一通り触っていきます。