普段は業務でAngularばっかり使ってますが、社内のアプリ開発コンテストでReactを使うことになりました。
徐々に勉強していこうと思いますが、まずは環境構築について書いてみます。
Getting Started
公式で色々書いてありますが、ローカル環境の構築方法は以下に書いてありました。
https://ja.reactjs.org/tutorial/tutorial.html#setup-option-2-local-development-environment
プロジェクトの作成
npx create-react-app my-app
package.json
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.4.1",
"@testing-library/user-event": "^7.2.1",
"react": "^16.13.0",
"react-dom": "^16.13.0",
"react-scripts": "3.4.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
プロジェクトの起動
-
npm startで起動します
npm start
- 起動に成功すると、以下のような表示が出ます
Compiled successfully!
You can now view my-app in the browser.
Local: http://localhost:3000
On Your Network: http://10.0.2.15:3000
Note that the development build is not optimized.
To create a production build, use npm run build.
→ Productionビルドしたかったらnpm run build叩いてねって書いてありますね。
- ブラウザでアクセスします。
※VM(192.168.33.10)上で動かしています
テンプレートプロジェクトの構成について
- プロジェクトルート
[vagrant@localhost /samba/my-app (master)]$ ll
合計 628
-rw-r--r--. 1 vagrant docker 2891 2月 26 22:39 README.md
drwxr-xr-x. 1022 vagrant docker 32768 2月 26 22:42 node_modules
-rw-r--r--. 1 vagrant docker 581143 2月 26 22:40 package-lock.json
-rw-r--r--. 1 vagrant docker 742 2月 26 22:40 package.json
drwxr-xr-x. 2 vagrant docker 120 2月 26 22:39 public
drwxr-xr-x. 2 vagrant docker 148 2月 26 22:39 src
- public ディレクトリ ・・・ 静的ファイル置き場
[vagrant@localhost /samba/my-app (master)]$ ll public
合計 36
-rw-r--r--. 1 vagrant docker 3150 2月 26 22:39 favicon.ico
-rw-r--r--. 1 vagrant docker 1721 2月 26 22:39 index.html
-rw-r--r--. 1 vagrant docker 5347 2月 26 22:39 logo192.png
-rw-r--r--. 1 vagrant docker 9664 2月 26 22:39 logo512.png
-rw-r--r--. 1 vagrant docker 492 2月 26 22:39 manifest.json
-rw-r--r--. 1 vagrant docker 67 2月 26 22:39 robots.txt
- srcディレクトリ ・・・ コード置き場
[vagrant@localhost /samba/my-app (master)]$ ll src
合計 36
-rw-r--r--. 1 vagrant docker 564 2月 26 22:39 App.css
-rw-r--r--. 1 vagrant docker 555 2月 26 22:39 App.js
-rw-r--r--. 1 vagrant docker 280 2月 26 22:39 App.test.js
-rw-r--r--. 1 vagrant docker 366 2月 26 22:39 index.css
-rw-r--r--. 1 vagrant docker 452 2月 26 22:39 index.js
-rw-r--r--. 1 vagrant docker 2671 2月 26 22:39 logo.svg
-rw-r--r--. 1 vagrant docker 5085 2月 26 22:39 serviceWorker.js
-rw-r--r--. 1 vagrant docker 255 2月 26 22:39 setupTests.js
修正してみる
App.jsの文章をHello Reactに変えてみます
src/App.js
import React from 'react';
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>
Hello React
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
↓ 保存すると即座にリロードされます
Firebaseを使って公開してみる
基本的には以前に執筆したAngularのホスティングと同じなので、異なる点だけ書いておきます。
ReactプロジェクトをProductionビルド
-
npm startした際に表示される通り、npm run buildだけでproductionビルドとなります
npm run build
↓
[vagrant@localhost /samba/my-app (master *)]$ npm run build
> my-app@0.1.0 build /samba/my-app
> react-scripts build
Creating an optimized production build...
Compiled successfully.
File sizes after gzip:
39.38 KB build/static/js/2.bc5b117a.chunk.js
771 B build/static/js/runtime-main.aaf88d20.js
605 B build/static/js/main.63c75bea.chunk.js
556 B build/static/css/main.d1b05096.chunk.css
The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.
The build folder is ready to be deployed.
You may serve it with a static server:
npm install -g serve
serve -s build
Find out more about deployment here:
bit.ly/CRA-deploy
buildディレクトリに出力されました。
Firebase Hostingへのデプロイ
- 公開するディレクトリは
buildに変更します
? What do you want to use as your public directory? (public) build
- SPAの設定は
yを選びます
? Configure as a single-page app (rewrite all urls to /index.html)? (y/N) y
- index.htmlは上書きしません
? File build/index.html already exists. Overwrite? (y/N) N
デプロイ
firebase deploy
アクセスしてみる
最後に
Reactについては全然わかってないですが、とりあえず環境の構築とFirebaseでの公開はできました。
SPAは簡単に公開できて良いですね。
徐々にReactについても勉強していこうと思います。