⚛️
Create React AppでReactの環境構築を試してみた
作成日：
2021/12/08
7
参照元:①新しい React アプリを作る - React
参照元:②Create React App
- 開発環境
- 環境構築
開発環境
- MacBookAir(11inch Early 2015)
- macOS Big Sur 11.1
- Visual Studio Code 1.62.3
環境構築
npx create-react-app my-app
ログ
```bash
% npx create-react-app my-app
npx: 67個のパッケージを12.559秒でインストールしました。
Creating a new React app in /Users/XX/my-app.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...
yarn add v1.22.11
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
warning "react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.20.0" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
[4/4] 🔨 Building fresh packages...
success Saved lockfile.
warning Your current version of Yarn is out of date. The latest version is "1.22.15", while you're on "1.22.11".
info To upgrade, run the following command:
$ curl --compressed -o- -L https://yarnpkg.com/install.sh | bash
success Saved 7 new dependencies.
info Direct dependencies
├─ cra-template@1.1.2
├─ react-dom@17.0.2
├─ react-scripts@4.0.3
└─ react@17.0.2
info All dependencies
├─ cra-template@1.1.2
├─ immer@8.0.1
├─ react-dev-utils@11.0.4
├─ react-dom@17.0.2
├─ react-scripts@4.0.3
├─ react@17.0.2
└─ scheduler@0.20.2
✨ Done in 291.40s.
Initialized a git repository.
Installing template dependencies using yarnpkg...
yarn add v1.22.11
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
warning "react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.20.0" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
warning " > @testing-library/user-event@12.8.3" has unmet peer dependency "@testing-library/dom@>=7.21.4".
[4/4] 🔨 Building fresh packages...
success Saved lockfile.
success Saved 16 new dependencies.
info Direct dependencies
├─ @testing-library/jest-dom@5.15.0
├─ @testing-library/react@11.2.7
├─ @testing-library/user-event@12.8.3
├─ react-dom@17.0.2
├─ react@17.0.2
└─ web-vitals@1.1.2
info All dependencies
├─ @testing-library/dom@7.31.2
├─ @testing-library/jest-dom@5.15.0
├─ @testing-library/react@11.2.7
├─ @testing-library/user-event@12.8.3
├─ @types/aria-query@4.2.2
├─ @types/jest@27.0.3
├─ @types/testing-library__jest-dom@5.14.1
├─ css.escape@1.5.1
├─ css@3.0.0
├─ lz-string@1.4.4
├─ min-indent@1.0.1
├─ react-dom@17.0.2
├─ react@17.0.2
├─ redent@3.0.0
├─ strip-indent@3.0.0
└─ web-vitals@1.1.2
✨ Done in 25.39s.
Removing template package using yarnpkg...
yarn remove v1.22.11
[1/2] 🗑 Removing module cra-template...
[2/2] 🔨 Regenerating lockfile and installing missing dependencies...
warning " > @testing-library/user-event@12.8.3" has unmet peer dependency "@testing-library/dom@>=7.21.4".
warning "react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.20.0" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
success Uninstalled packages.
✨ Done in 18.16s.
Created git commit.
Success! Created my-app at /Users/XX/my-app
Inside that directory, you can run several commands:
yarn start
Starts the development server.
yarn build
Bundles the app into static files for production.
yarn test
Starts the test runner.
yarn eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd my-app
yarn start
Happy hacking!
```
my-appに移動
cd my-app
npmを起動
npm start
ログ
Compiled successfully!
You can now view my-app in the browser.
Local: http://localhost:3000
On Your Network: http://192.168.0.108:3000
Note that the development build is not optimized.
To create a production build, use yarn build.
自動的に開きます
しかしPORT3000はRubyonRailsとかぶるので変更したい。
こちらを参考に4000に変更しました。
my-appの中に.envファイルを作成し以下を記述して保存
PORT=4000
Control+Cでサーバーを一度終了し、再度起動
npm start
ログ
Compiled successfully!
You can now view my-app in the browser.
Local: http://localhost:4000
On Your Network: http://192.168.0.108:4000
Note that the development build is not optimized.
To create a production build, use yarn build.
ちなみにこのページのソースはこんな感じ
検証ツール
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="/manifest.json" />
<!--
Notice the use of in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
<script src="/static/js/bundle.js"></script>
<script src="/static/js/vendors~main.chunk.js"></script>
<script src="/static/js/main.chunk.js"></script></body>
</html>
コード(App.js)
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
2021年からプログラミング学習を開始し、未経験から受託開発企業に転職。2022年前半を目標に転職活動中です。
JavaScriptとjQueryはPFで使用経験あり。最近始めたReactを使用してアプリを作成したいと考えております。
#ENJIN