検証環境
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 のインストール
下記サイトの手順でインストールします
ソースコード
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 が表示されます