MyReact.jsの復習①～オブジェクトリテラルの配列の要素を取り出して、表示する～

　３つのファイルに分けて記載してます。

　create-react-appを使用して作成してます。

index.js［（プロジェクト）/src 直下］

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

import App from './App';

import reportWebVitals from './reportWebVitals';

const todos = [

  {id:1, title:"Python", contents:"AIプログラミング"},

  {id:2, title:"MyReact", contents:"親子コンポーネント"},

  {id:3, title:"Java", contents:"オブジェクト指向"},

]

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(

  <React.StrictMode>

    <App articles={todos}/>

  </React.StrictMode>

);

// If you want to start measuring performance in your app, pass a function

// to log results (for example: reportWebVitals(console.log))

// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

reportWebVitals();

App.js［(プロジェクト)/src 直下］

import './App.css';

import Article from './components/Article';

function App(props) {

  const articles = props.articles.map(

    article => <Article key={article.id} contents={article.contents}></Article>

  );

  return (

    <div>{articles}</div>

  );

}

export default App;

components［(プロジェクト)/src 直下］/Article.js

const Article = (props) => {

    return(

        <ul>

            <li>{props.contents}</li>

        </ul>

    )

}

export default Article;