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 を通じて指定します。
// 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 を関数の引数として受け取ります。
// 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 を渡して再レンダリングする必要があります。
map メソッド
この例では、List 配列が render メソッド内で使われ、map メソッドを使用してリストの要素を表示しています。各要素は <li> タグで表示され、Reactのリスト内で一意なキーが指定されています。これにより、Reactが効率的に要素の変更を検出できます。
// 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;
この記事が気に入ったらサポートをしてみませんか?