React App

参照元:①[新しい React アプリを作る - React](https://ja.reactjs.org/docs/create-a-new-react-app.html#create-react-app) 参照元:②[Create React App](https://create-react-app.dev/) - 開発環境 - 環境構築 --- ## 開発環境 - MacBookAir(11inch Early 2015) - macOS Big Sur 11.1 - Visual Studio Code 1.62.3 --- ## 環境構築 ```bash 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に移動 ```bash cd my-app ``` npmを起動 ```bash npm start ``` ログ ```bash 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. ``` ![react01.png](https://firebasestorage.googleapis.com/v0/b/prod-ticket-app.appspot.com/o/post%2Fmkk_n%2F1638951824408?alt=media&token=11f2790b-74b7-4e65-98ee-f8c5dcda74ce) 自動的に開きますしかしPORT3000はRubyonRailsとかぶるので変更したい。こちらを参考に4000に変更しました。 - [create-react-app の npm start のポート番号を変える - Qiita](https://qiita.com/urouro_net/items/dd7166f9728d08bc933b) my-appの中に.envファイルを作成し以下を記述して保存 ``` PORT=4000 ``` Control+Cでサーバーを一度終了し、再度起動 ```bash npm start ``` ログ ```bash 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. ``` ![react02.png](https://firebasestorage.googleapis.com/v0/b/prod-ticket-app.appspot.com/o/post%2Fmkk_n%2F1638952172423?alt=media&token=61354b37-fce4-4227-a5a9-afa7b7b9f038) ちなみにこのページのソースはこんな感じ

検証ツール

```jsx React App

```

コード(App.js)

```jsx import logo from './logo.svg'; import './App.css'; function App() { return (

Edit src/App.js and save to reload.

Learn React

); } export default App; ```

Account Tickets