props.children

import React from 'react'
import ReactDOM from 'react-dom'

const App = () => {
  return (
    <>
      <h1>リスト</h1>
      {/* 問題1. childrenを渡そう */}
      <UnorderedList>
        <li>Hello World</li>
      </UnorderedList>
    </>
  )
}

// 問題2. 分割代入でchildrenを受け取ろう
const UnorderedList = ({ children }) => {
  return (
    //  問題3 childrenを表示しよう
    <ul>{children}</ul>
  )
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />)


code-lesson

import React from 'react'
import ReactDOM from 'react-dom'

const App = () => {
  return (
    <>
      <h1>リスト</h1>
      {/* 問題1. childrenを渡そう */}
      <UnorderedList></UnorderedList>
    </>
  )
}

// 問題2. 分割代入でchildrenを受け取ろう
const UnorderedList = () => {
  return (
    //  問題3 childrenを表示しよう
    <ul></ul>
  )
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />)


componentとprops（children）

関数コンポーネント

component（1つ）

component（複数）

props

componentとprops（値）

componentとprops（分割代入）

componentとprops（関数）

componentとprops（childrenにコンポーネントを渡す）

カスタムフック

カスタムHook（1つ）

コンポーネント構造やpropsの流れを把握し、React開発の基礎を固めます。
カスタムHookの作成も学んで、モダンなフロントエンド開発を目指します。

世界的にも人気なReactを使って、Webアプリケーションの作成について学んでいきます