JSXのルールとpropsやchirdrenの挙動把握

はじめに
JSXのルール
- エラーが発生する例
- 正しい書き方
CSSの指定方法
props
- propsの分割代入
chirdren
参考
続く…
- コメント

はじめに

本記事では「モダンJavaScriptの基本から始める React実践の教科書」で学んだ内容と別途気になって調べた内容や知識も含めアウトプットしています。

書籍に記載されている内容を順序立ててまとめるというよりは、整理しておきたい周辺の知識と深ぼった内容を雑多に書いています。

超初歩的な内容です！

JSXのルール

JSXのルールとして、return文以降のコードは1つの要素で囲まれている必要があります。

JSXでは、1つの要素で囲まれていない場合には、エラーが発生します。これは、Reactが仮想DOMを効果的に操作するために、1つのルート要素を必要とするためです。

エラーが発生する例

import ReactDOM from 'react-dom';

const App = () => {
    return (
      <div>Hello, World!</div>
      <p>This is a paragraph.</p>
    );
};

正しい書き方

divでもよいですがフラグメントを使用することで不要なDOMが生成せずに済みます。

import ReactDOM from 'react-dom';

const App = () => {
  <>
        return (
          <div>Hello, World!</div>
          <p>This is a paragraph.</p>
        );
  </>
};

CSSの指定方法

ReactでCSSを指定する際には、以下のルールに従って記述する必要があります。

プロパティ名はキャメルケースで指定します。例えば、background-colorはbackgroundColorとなります。
値は文字列リテラルで囲みます。例えば、font-size: 16pxはfontSize: '16px'となります。

import React from 'react';

interface MyComponentProps {
  className?: string;
}

const MyComponent: React.FC<MyComponentProps> = ({ className }) => {
  const styles: React.CSSProperties = {
    backgroundColor: 'red',
    fontSize: '16px',
    marginTop: '20px',
  };

  return <div className={className} style={styles}>Hello, World!</div>;
};

export default MyComponent;

props

propsは、Reactコンポーネントに渡されるプロパティ（パラメータ）のことです。

親コンポーネントから子コンポーネントにデータや機能を渡すために使用されます。

import React from "react";
import ReactDOM from "react-dom";

const ChildComponent: React.FC = (props) => {
  console.log(props);
// {message: "Hello, World!", count: 3} このような値が渡る

  return (
    <div>
      <h2>Child Component</h2>
      <p>This is the content of the child component.</p>
    </div>
  );
};

const ParentComponent: React.FC = () => {
  return (
    <div>
      <h1>Parent Component</h1>
      <p>This is the content of the parent component.</p>
      <ChildComponent message="Hello, World!" count={3} />  // propsを指定
    </div>
  );
};

ReactDOM.render(
  <React.StrictMode>
    <ParentComponent /> {/* 親コンポーネントを読み込む */}
  </React.StrictMode>,
  document.getElementById("root")

propsの分割代入

propsオブジェクトから必要な値を分割代入することもできます。

関数コンポーネントの引数でpropsオブジェクトを分割代入して、直接必要なプロパティを取り出しています。

これにより、props.nameやprops.ageの代わりに単純にnameやageとして利用することができます。

const ChildComponent = ({ name, age }) => {
  return (
    <div>
      <h2>Child Component</h2>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
    </div>
  );
};

chirdren

chirdrenは親コンポーネントが子コンポーネントに直接コンテンツを渡すために使用されます。

chirdrenはpropsに配列として渡されることがわかります。要素はObjectとなっています。

// 親コンポーネント
import React from 'react';
import ReactDOM from "react-dom";

const ChildComponent = (props) => {
  const { children } = props;
  console.log(props);     // {message: "Hello, World!", count: 3, children: Array(2)}
  console.log(children);  // [Object, Object]

  return (
    <div>
      <h2>Child Component</h2>
      <div>{children}</div>
    </div>
  );
};

const ParentComponent = () => {
  return (
    <div>
      <h1>Welcome to Parent Component!</h1>
      <ChildComponent message="Hello, World!" count={3}>
        <p>This is the content passed as children.</p>
        <button onClick={() => console.log("click")}>Click Me</button>
      </ChildComponent>
    </div>
  );
};

ReactDOM.render(
  <React.StrictMode>
      <ParentComponent />
  </React.StrictMode>,
  document.getElementById('root')
);