React jsxファイルでhello worldを表示するサンプル

nas2021/11/20

Reactのjsxファイルでhello worldを表示するサンプルです。

目次

サンプル ファイルの構成
hello worldを表示する
拡張子をjsxにしたらエラーが出る場合

ファイルの構成

同じフォルダ内にApp.jsxとindex.jsとindex.htmlがあります。

プロジェクトフォルダ-srcフォルダ-App.jsxとindex.jsとindex.html

hello worldを表示する

jsxのファイル(App.jsx)

export const App1 = () => {
  return (
    <>
      <p>hello world</p>
      <p>こんにちは</p>
    </>
  );
};

1行目は、App1にexportを指定しています。他のファイルでimportができるようになります。
App1の最初の文字は大文字にします。
4,5行目の文字列を返します。

※jsxでなくjsでも問題ありません。

jsのファイル(index.js)

import ReactDOM from "react-dom";
import { App1 } from "./App";

ReactDOM.render(<App1 />, document.getElementById("root"));

2行目は、App.jsxファイルのApp1をインポートします。
4行目は、getElementByIdでrootを指定しています。<App1 />はコンポーネントになります。

htmlのファイル(index.html)

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

9行目のid="root"の場所にApp.jsxのApp1の文字列が表示されます。

画面は以下のようになります。

拡張子をjsxにしたらエラーが出る場合

reactを起動しているコマンドプロンプトでctrl +cを押して停止し、

再度npm startを入力します。

関連の記事

Reactのインストールとhello worldを表示する手順

△上に戻る