前提・実現したいこと
DockerでReactの開発環境を構築しています。
React初心者のため、チュートリアル的なコードを書いてみたのですが下記のコードの「hello」を別の文字に変更してブラウザ(localhost:3000)を更新した際、新しい文字が反映されるまで10秒ほどかかってしまいます。
更新にかかる時間を短縮する方法はあるのでしょうか。解決策をご存知の方がいればご教示ください。
環境など
MacOS Big Sur 11.1
ブラウザ : googlechrome
create-react-appを使用
react 17.0.1
npm 7.4.0
React内のコード
index.html
html
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <title>Reactテスト</title> 6 </head> 7 <body> 8 <div id="root"></div> 9 </body> 10</html>
index.js
import React from 'react'; import ReactDom from 'react-dom'; import App from "./App"; ReactDom.render(<App />, document.getElementById("root"));
App.js
import React from 'react'; const App = () => { return ( <h1>hello</h1> ); }; export default App;
package.json
{ "name": "reactapp", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", "react": "^17.0.1", "react-dom": "^17.0.1", "react-router-dom": "^5.2.0", "react-scripts": "4.0.1", "web-vitals": "^0.2.4" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", "babel": "babel src/index.js -o compiled.js" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } }
###Dockerのコード
docker-compose.yml
version: '3' services: node: container_name: node build: ./docker/node stdin_open: true volumes: - ./frontend:/usr/src/app command: sh -c "cd reactapp && yarn start" ports: - "3000:3000"
Dockerfile
FROM node WORKDIR /usr/src/app
![guest](/img/icon/icnUserSample.jpg)
回答1件
あなたの回答
tips
プレビュー