100日後にReactをちょっと理解するデザイナー - 親子コンポーネント

私は限界インハウスUIデザイナー。最近、エンジニアの工数が不足し、開発を効率化するため、デザインシステムを導入し浸透する活動をしている。

そこで出てくるのが「React」だ。リアクトって何すか…フロントエンドチームから説明はしてもらえるのだが、自分でも調べておかないとやばい。

HTMLとCSSがちょっと書けるレベルのデザイナーが、Reactについて調べた記録を残していくよ。

---

書ける様になるまではいかなくても、実際エンジニアが何をやっているのかを、UIを設計する立場から知っておきたい。

インスタンスの文字変更って、どうやって実装してるの？

疑問

Figmaでデザインを引くとすると、

コンポーネントを作る
↓
インスタンスを作る
↓
インスタンスの文字だけ変更する

みたいな作業がよくある。これをReactでどうやっているのか？？

コンポーネントが表示されるまでのおさらい

前回の記事

子コンポーネントと親コンポーネント

この流れの中で、親コンポーネントと子コンポーネントを書いている部分はどこか？

コンポーネント作成　例：ChildComponent.js　＜子コンポーネント＞
　↓コンポーネントをインポート
App.js　＜親コンポーネント＞
　↓コンポーネントをレンダリング
index.js
　↓JSXが仮想DOMに変換される
仮想DOM　差分を検出し、変更が必要な部分のみを更新
　↓変換
実際のDOM
　↓HTMLの生成
HTMLがブラウザ上に表示される

親コンポーネントで props を指定

親コンポーネント（例: App.js）で子コンポーネントに渡すデータを props を通じて指定します。

ChatGPT

// App.js
import React from 'react';
import ChildComponent from './ChildComponent';

class App extends React.Component {
  render() {
    return (
      <div>
        <ChildComponent name="John" age={25} />
      </div>
    );
  }
}

export default App;

子コンポーネントで props を受け取る

子コンポーネント（例: ChildComponent.js）では、props を関数の引数として受け取ります。

ChatGPT

// ChildComponent.js
import React from 'react';

class ChildComponent extends React.Component {
  render() {
    return (
      <div>
        <p>Name: {this.props.name}</p>
        <p>Age: {this.props.age}</p>
      </div>
    );
  }
}

this.props を使用して親コンポーネントから渡されたデータにアクセスできます。

このようにして、props を使用して親から子にデータを渡すことができます。props は読み取り専用であり、子コンポーネント内では変更することはできません。データの変更が必要な場合は、コンポーネント内で状態を使用するか、親コンポーネントから新しい props を渡して再レンダリングする必要があります。

ChatGPT

map メソッド

この例では、List 配列が render メソッド内で使われ、map メソッドを使用してリストの要素を表示しています。各要素は <li> タグで表示され、Reactのリスト内で一意なキーが指定されています。これにより、Reactが効率的に要素の変更を検出できます。

ChatGPT

// App.js

import React from 'react';

class App extends React.Component {
  render() {
    // リストのデータ
    const List = ['Item 1', 'Item 2', 'Item 3'];

    return (
      <div>
        <h1>My List</h1>
        <ul>
          {/* リストの要素を表示 */}
          {List.map((item, index) => (
            <li key={index}>{item}</li>
          ))}
        </ul>
      </div>
    );
  }
}

export default App;

こんな書き方もできる。

// App.js

import React from 'react';
import 子コンポーネント from './子コンポーネント'; 

class App extends React.Component {
  render() {
    // リストのデータ
    const びよよん = [
      {
        name: 'あああ',
        image: '〜〜〜',
      },
      {
        name: 'いいい',
        image: '〜〜〜',
      },
    ];

    return (
      <div>
        <h1>H1がここに入る</h1>
        <ul>
          {/* リストの要素を表示 */}
          {びよよん.map((ばなな) => {
            return (
              <子コンポーネント
                name={ばなな.name}
                image={ばなな.image}
              />
             )
          })}
        </ul>
      </div>
    );
  }
}

export default App;