100日後にReactをちょっと理解するデザイナー - 親子コンポーネント
私は限界インハウスUIデザイナー。最近、エンジニアの工数が不足し、開発を効率化するため、デザインシステムを導入し浸透する活動をしている。
そこで出てくるのが「React」だ。リアクトって何すか…フロントエンドチームから説明はしてもらえるのだが、自分でも調べておかないとやばい。
HTMLとCSSがちょっと書けるレベルのデザイナーが、Reactについて調べた記録を残していくよ。
書ける様になるまではいかなくても、実際エンジニアが何をやっているのかを、UIを設計する立場から知っておきたい。
インスタンスの文字変更って、どうやって実装してるの?
疑問
Figmaでデザインを引くとすると、
みたいな作業がよくある。これをReactでどうやっているのか??
コンポーネントが表示されるまでのおさらい
前回の記事
子コンポーネントと親コンポーネント
この流れの中で、親コンポーネントと子コンポーネントを書いている部分はどこか?
親コンポーネントで 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
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>
);
}
}
map メソッド
// 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;
この記事が気に入ったらサポートをしてみませんか?