TADANO-BLOG
Link
React学習メモ02

React学習メモ02

2023-09-23
blogreact

Reactコンポーネントはマークアップを添えることが出来るJavaScript関数、ボタンの様に小さいものやページ全体のように大きなものもある。コンポーネントは一つのファイルに分割してインポートすることも可能

JSXでマークアップを記述する

ReactはJavaScriptでマークアップを表現するために、JSXという拡張構文を利用している。JSXはHTMLと似ているが異なる部分があり、そのままHTMLをReactのコンポーネント内に貼り付けても上手くいくとは限らない。

条件付きレンダー

&&演算子：{isPacked && '✔'}この&&演算子においては左の式が真ならば右の式が実行される。即ちチェックマークが実行される。isPackedがtrueの場合はチェックがつく。Button使って真偽値反転させればTodoリスト作れそう。

リストのレンダー

![[Pasted image 20230923215414.png]] これを表現するためには何が必要か自分なりに考える。ただ提示されたコードを読むだけじゃ学習効果が得られにくそう。Headerの'Scientists'はページの中に一文組み込むだけなので独立して表現する必要は無い。対して、人名に付されたIDに対応する情報はDate.jsとして画像情報、名前、descriptionの三点を持つ必要がある。

  1. Data.jsには画像・名前・説明文の3つのコンポーネントから構成されている。
  2. 参照するデータはData.jsとは別にJSON形式で保持する方がよさそう。
  3. App.jsにData.jsを利用して、上記の画像を再現する。

分からない点

  1. 画像の取得方法。Imgur.comを利用する手段。'https://imgur.com/' + URLの構造分からない
  2. IDに対応する顔写真を特定するためには、imageId＋sizeが必要らしい。ImageIDとsizeをImageコンポーネントのpropsとして、若しくはpersonというオブジェクトを引数として、person.imageID,sizeに関しては固定、若しくはApp.js側で指定できるようにする。
  3. 全然分からない。変数をどのように管理すればいいか分からない。画像自体を渡せばいいのか、画像を表示するためのURLを戻り値として渡せばいいのか

公式はどう実装する。

構成は3つのファイル　メインページ部分のApp.js,画像・id,名前、専攻情報、業績、画像idを配列形式で保持したdata.jsと画像を表示するためのURLをData.jsの画像IDから生成するutils.jsから構成されている。まずは、data.jsとutils.jsから

export const people = [{
  id: 0,
  name: 'Creola Katherine Johnson',
  profession: 'mathematician',
  accomplishment: 'spaceflight calculations',
  imageId: 'MK3eW3A'
}, {
  id: 1,
  name: 'Mario José Molina-Pasquel Henríquez',
  profession: 'chemist',
  accomplishment: 'discovery of Arctic ozone hole',
  imageId: 'mynHUSa'
}, {
  id: 2,
  name: 'Mohammad Abdus Salam',
  profession: 'physicist',
  accomplishment: 'electromagnetism theory',
  imageId: 'bE7W1ji'
}];

peopleという変数に配列形式で情報を格納している。

export function getImageUrl(person) {
  return (
    'https://i.imgur.com/' +
    person.imageId +
    's.jpg'
  );
}

data.jsのperson変数から表示する顔写真の画像idを取得して、urlを戻り値として渡すためのコンポーネントになっている。

App.jsに関しては、まず関数内のreturn文の外で、顔写真と説明文に関する配列をlistItemsという変数に格納して、return文内で見出しの'Scientists'とulタグで囲んだlistItemsという構成になっている。

import { people } from './data.js';
import { getImageUrl } './utils.js';

expoert default function List() {
	const listItems = person.map(person =>
		<li key={pereson.id}>
			<img 
				scr={getImageURL(person)}
				alt={person.name}
			/>
			<p>
				<b>{person.name}</b>
				person.profession 
				known for { person.accomlishment}
			</p>
		</li>
	);
	return (
		<article>
			<h1>Scientists<h1>
			<ul>{listItems}<ul>
		</article>
	)
}

学習不足な点

  1. person.map(person => )の一文に関して理解は出来るが実装時に発想として出てこない。原因はpropsとしてコンポーネント間を移動する対象を明確に考えていないからだと推測される。
  2. モックアップ(表現すべき画像)が与えられた際に、まず構成要素を階層関係で考える必要があった。今回の例であれば、artcileタグに囲まれたh1,ulタグの階層関係。また、階層関係を理解した上でコンポーネント間を行き来する変数を設計する必要があった。今回の場合はdata.js内のperson変数にて配列で表現されたデータ。id,name,profession,accomplishment,imageId