React 入門

TypeScript コメント掲示板アプリの開発

見出しと箇条書きを表示してみる

まずはトップページに見出しと簡単な箇条書きを表示してみよう．App コンポーネント（src/App.tsx） に<h1> 要素を配置してみます．配置したい要素は次の通り return(); の中に記載します．

src/App.tsximport './App.css';

function App() {
  return (
    <h1>コメント一覧</h1>
  );
}

export default App;

見出しが表示されていることが確認できました．

次に，箇条書きを追加します．しかしながら，エラーが表示されました．

src/App.tsx（エラー）import './App.css';

function App() {
  return (
    <h1>コメント一覧</h1>
    <ul>
      <li>あああ</li>
      <li>いいい</li>
      <li>ううう</li>
    </ul>
  );
}

export default App;

React では JSX と呼ばれる JavaScript の拡張機能を利用します．JSX では JavaScript ファイルに直接 HTML のような要素を配置できます．しかしながらコンポーネントの return() の中で返すことのできる要素は1個に限られています．したがって，見出しと箇条書きなどのように複数の要素をまとめて返したい場合は全体を親タグで囲って全体を一つの要素にする必要があります．例えば次のように <div> で全体を囲うとよいでしょう．

src/App.tsximport './App.css';

function App() {
  return (
    <div>
      <h1>コメント一覧</h1>
      <ul>
        <li>あああ</li>
        <li>いいい</li>
        <li>ううう</li>
      </ul>
    </div>
  );
}

export default App;

この結果，見出しと箇条書きが表示できました．

なお，React では親要素の <div> ... </div> の代わりに，<fragment> ... </fragment> や <> ... </> がよく利用されます．以降では <> ... </> を主に利用することにします．

src/App.tsximport './App.css';

function App() {
  return (
    <>
      <h1>コメント一覧</h1>
      <ul>
        <li>あああ</li>
        <li>いいい</li>
        <li>ううう</li>
      </ul>
    </>
  );
}

export default App;

目次に戻る