【Progate】Reactコースを終えての所感

自己紹介

29歳。文系卒。新卒入社でWebディレクターを２年半経験。
その後は番組の字幕制作の仕事に従事。
現在はエンジニア転職を目指して勉強中。

Reactの印象

「JavaScriptのライブラリ」「便利」くらいしか知りませんでした。本コースではstateやpropsのあたりから理解が難しくなり、２周３周と学習を進めましたが、身についたとはとても言えない状態です。

コードを丁寧に追って処理の流れを読むことはできても、何も参考せずに実装しろとなればかなり厳しい…。

しかし、エンジニアを目指すのであればこのくらいの処理は完璧に理解したいところ。なので、いまいちピンとこない部分の解像度を上げるため、自分なりに整理することにしました。

わからないこと一覧

• state
• props
• map

並べてみると少ないものですね。
使用例と一緒に整理していきます

state

ユーザーの挙動(クリックや入力)によって変わる値のこと。
stateの値で判定し、それに応じてJSXを表示させる。
（例：モーダルウィンドウの表示、入力エラー文の表示）

// 子コンポーネント

// stateの定義
constructor(props) {
    super(props);
    this.state = {state名:デフォルトの値};
}

// stateの取得
this.state.state名

// stateの変更
this.setState({state名:変更後の値})

使用例

// 子コンポーネント

// stateを用意
constructor(props) {
    super(props);
    this.state = {state名:デフォルトの値};
}

// stateを変更するメソッドを用意
メソッド名(){
    this.setState({state名:変更後の値});
}

// JSX用の変数を用意
render(){
    let 変数名;
    ┇

    // 条件式を用意
    if(stateを利用した条件式){
        変数名 = (代入したいJSX)
    }else{
        変数名 = (代入したいJSX)
    }
    ┇
    
 
    return(
        ┇
        // メソッドを呼び出すイベントを設定
        <button onClick = {()=>{this.メソッド名()}}>
        
        // 表示させたい位置に変数(JSX)を挿入
        <div>{変数名}</div>
        ┇
        }

props

プロパティのこと。
コンポーネントごとに中身(テキストや画像)を変更したいときに設定する。
親コンポーネントから子コンポーネントに渡す。
(例：〇〇の一覧画面、コンテンツ)

// 親コンポーネント

// propsを渡す
<子コンポーネント名
    props名 = 値
    props名 = 値...
    />

// 子コンポーネント

// propsの取得
// (これを文言やURLに挿入する)
this.props.props名

map

配列の各要素に対して順に処理を行う。
要素の異なる同コンポーネントが並ぶ場合に使用する。

// 親コンポーネント

// 配列オブジェクトと、その中身を定義
const 配列名 = [
    {プロパティ名:値,プロパティ名:値...}
]

// 「コンポーネントを呼び出してpropsを渡す」を
//  配列オブジェクトのすべてに対して行う。
{配列名.map((引数名)=>{
    return (
        <子コンポーネント名
            props名 = {引数名.プロパティ名}
            props名 = {引数名.プロパティ名}...
        />
    )}

まとめ

自分は今、なんとなく理解している気になっている状態だと思います。
しかし、こうして整理する前の理解度と比べると、深まっていることは確かです。
こういったアウトプット(?)を繰り返して、きっと自らの土壌になっていくのでしょう。

今後も継続して学習を続けていきたいと思います。

間違いなどあればご指摘いただけますと幸いです。