【React】コンポーネントとは

コンポーネントとは

index.js

const App = () => {
  return (
    <>
      <h1>こんにちは</h1>
      <p>お元気ですか？</p>
    </>
  );
};

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

上記index.jsでApp関数の内容が増えれば増えるほど一つのファイルが長くなっていしまいます。

そこでコンポーネントという単位（JavaScriptの関数）で切り分けます

コンポーネント化手順

1）コンポーネントファイルを作成

App.jsを作成

index.jsの中身をそのまま貼り付け

const App = () => {
  return (
    <>
      <h1>こんにちは</h1>
      <p>お元気ですか？</p>
    </>
  );
};

2）コンポーネントファイルを他のファイルから参照できるようにする

exportを追記

export const App = () => {
  return (
    <>
      <h1>こんにちは</h1>
      <p>お元気ですか？</p>
    </>
  );
};

2）import文を追記

基本的にエディタ上で<App>と打つと自動で「import App from ‘./App’;」追記されます

import App from './App';

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

root.render(
  <React.StrictMode>
    <App>
  </React.StrictMode>
);

注意

コンポーネント名は大文字始まりでないとエラーになります