React で Hello World を表示

検証環境

Windows11 Home Edition (version 23H2)

D:\>wsl --version
WSL バージョン: 2.1.5.0
カーネル バージョン: 5.15.146.1-2
WSLg バージョン: 1.0.60
MSRDC バージョン: 1.2.5105
Direct3D バージョン: 1.611.1-81528511
DXCore バージョン: 10.0.25131.1002-220531-1700.rs-onecore-base2-hyp
Windows バージョン: 10.0.22631.3296

# installed ubuntu version
Ubuntu 22.04.4 LTS (Jammy Jellyfish)

# docker
Docker version 25.0.3, build 4debf41
Docker Compose version v2.24.6

React のインストール

下記サイトの手順でインストールします

takaya030.hatenablog.com

ソースコード

create-react-app で作成されたソースコードを変更します

react_example/react-app/src/App.tsx

function App() {
  return (
    <div className="App">
      <h1>Hello World</h1>
    </div>
  );
}

export default App;

react_example/react-app/src/index.tsx

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

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

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

アプリケーションの起動

下記のコマンドを実行してコンテナを起動することで React アプリケーションが起動します

$ cd react_example
$ docker compose up -d

WEB ブラウザで http://localhost:3000 にアクセスすると Hello World が表示されます

CSS の追加

App.css を作成します

react_example/react-app/src/App.css

.App {
  text-align: center;
}

.title {
  color: red;
}

App.tsx を下記内容に変更します

react_example/react-app/src/App.tsx

import './App.css';

function App() {
  return (
    <div className="App">
      <h1 className="title">Hello World</h1>
    </div>
  );
}

export default App;

WEB ブラウザで http://localhost:3000 にアクセスすると以下の画像の通り CSS が適用された Hello World が表示されます