Reactは、画面をコンポーネントの組み合わせで構築します。

Appコンポーネント

create-react-app で生成されるAppコンポーネントを見てみましょう。

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

ES6モジュール形式なので見慣れない表現が出てくるかもしれませんが、「そういうもの」として見ていきましょう。

App() はreturnで直接HTMLを返しています。とても不思議な感じがしますが「そういうもの」として見ましょう。この部分をJSXと呼びます。JSXを返す関数がコンポーネントになり、別のHTMLの部分でタグとして使えるようになります。

コンポーネントクラスを定義したら、これを外部に公開しないといけません。外部に公開するには export default App; を記述します。

コンポーネントを使う

コンポーネントは定義しただけでは描画されません。どこかに描画するための処理を記述する必要があります。

このAppコンポーネントは index.tsx で使用されています。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

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

// 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();

import App from './App'; で別ファイルのコンポーネントを読み込んでいます。そして ReactDOM.render() で「どこに」「どのコンポーネントを配置するか」を指定しています。ここではAppを配置しています。

このように、コンポーネントはカスタムタグのように使用することができます。