React ウェブサイト制作　何から始める

HTMLとCSSとjQueryでウェブ制作をしてきた人間です。
今後のことを考えてreactを身につけようとチュートリアルを済ませて、何か作ろうと手をつけ始めました。
今までの制作実績をとりあえずreactで並べてみようと思いました。
その際に＜画像＞＜タイトル＞＜要約＞がワンセットで何個も繰り返される事が予想されるので、ここがコンポーネントになるんだろうなと思いました。
ただ、チュートリアルの五目並べを作っただけでは全くサイトの作り方の予想がつかず,,,

例えば連想配列に

javascript
1works = {
2{1:{img:OOO.png , title:OOOOO , text:OOOO}},
3{2:{img:OOO.png , title:OOOOO , text:OOOO}},
4{3:{img:OOO.png , title:OOOOO , text:OOOO}}
5};

制作実績のデータを詰め込んで、それの数だけfor文でコンポーネントにpropsを渡しながら回していくのでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

works を配列にして、for でゃなく map を使いましょう。

jsx
1const works = [
2  {img:OOO.png , title:OOOOO , text:OOOO},
3  {img:OOO.png , title:OOOOO , text:OOOO},
4  {img:OOO.png , title:OOOOO , text:OOOO}
5];
6
7const App = () => {
8  return (
9    <div>
10      <h1>My Workd</h1>
11      <ul>
12        {
13          works.map((work, index) =>
14            <li key={work.title}>
15              <img src={work.img} />
16              <div className='title'>{index + 1}. {work.title}</div>
17              <div className='text'>{work.text}</div>
18            </li>
19          )
20        }
21      </ul>
22    </div>
23  );
24};

さらに <li>〜</li> をコンポーネント化します。

jsx
1const Work = ({ work, index }) => {
2  return (
3    <li key={work.title}>
4      <img src={work.img} />
5      <div className='title'>{index + 1}. {work.title}</div>
6      <div className='text'>{work.text}</div>
7    </li>
8  );
9};
10
11const App = () => {
12  return (
13    <div>
14      <h1>My Workd</h1>
15      <ul>
16        {
17          works.map((work, index) => <Work key={index} work={work} index={index} />)
18        }
19      </ul>
20    </div>
21  );
22};