はじめに
- AWS Amplifyコンソールのチュートリアルを実施するにあたり、今更ながら、React.jsに入門したので備忘録。
AWS Amplify Consoleとは
- 継続的なデプロイによるフルスタックのサーバーレスウェブアプリケーションのホスティング
AWS Amplify Consoleの無料枠
1000 ビルド分/月
5GB のデータストレージ/月
15GB のホスティングサービス/月
開発環境
- Windows10 Home
- node.js: 12.16.3 LTS
- Visual Studio Code
環境整備
- node.js のインストール
- 自分の環境に合わせたものをダウンロードしてインストールする。
- Win64zip版
- 環境変数にパス追加
- ダウンロードしたファイルを解凍して、保存する。
- 環境変数(C:\Windows\System32\SystemPropertiesAdvanced.exe)のpathに、保存したフォルダを追加する。
Hello React
index.html
<!DOCTYPE html><htmllang="ja"><head><metacharset="UTF-8"><title>Hello React</title><script crossoriginsrc="https://unpkg.com/react@16/umd/react.development.js"></script><script crossoriginsrc="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script></head><body><divid="main">Loading...</div><script>constdom=document.querySelector('#main');constel=React.createElement('p',{},'Hello React');ReactDOM.render(el,dom);</script></body></html>
Reactプロジェクトの作成
- npm と npx がある。
- npx は、npmの拡張版
npx
C:\Dev> npx create-react-app react_app
npx: installed 98 in 22.36s
Creating a new React app in C:\Dev\react_app.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...
:
Created git commit.
Success! Created react_app at C:\Dev\react_app
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run 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 react_app
npm start
Happy hacking!
Hint:
npm
C:\Dev> npm init react-app react_app
:
# npxと同じようにプロジェクトが生成される
プロジェクト操作のコマンド
- npm と yarn がある。
- npm は、node.js標準
- yarnは、Facebook製
| 操作 | npm | yarn |
|---|---|---|
| 開発サーバでアプリの起動 | npm start | yarn start |
| アプリのビルド | npm run build | yarn build |
| アプリのテスト | npm test | yarn test |
| プロジェクトのイジェクト | npm run eject | yarn eject |
アプリの起動
C:\> npm start
アプリのビルド
- buildフォルダ内にアプリが生成される。
- 生成されたファイルを、Webサーバのドキュメントルートに置く。
- サブフォルダに置くなら、package.jsonを編集して、ビルドする。
C:\> npm run build
> react_app@0.1.0 build C:\Dev\react_app
> react-scripts build
Creating an optimized production build...
Compiled successfully.
File sizes after gzip:
39.38 KB build\static\js\2.0103c501.chunk.js
772 B build\static\js\runtime-main.ad7bb390.js
644 B build\static\js\main.1e39e194.chunk.js
547 B build\static\css\main.5f361e03.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
Hint:
- The project was built assuming it is hosted at /.
- You can control this with the homepage field in your package.json.
package.json
{"name":"react_app","version":"0.1.0","private":true,"homepage":"./",#追加する"dependencies":{:Hello JSX
index.html
<!DOCTYPE html><htmllang="ja"><head><metacharset="UTF-8"><title>Hello React</title><script crossoriginsrc="https://unpkg.com/react@16/umd/react.development.js"></script><script crossoriginsrc="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone/babel.min.js"></script></head><body><divid="main">Loading...</div><script type="text/babel">constdom=document.querySelector('#main');constel=(<div><h1>HelloJSX</h1>
<p>JSXisverynice.</p>
</div>
);ReactDOM.render(el,dom);</script></body></html>
スクリプトを別ファイルへ切り出し
./public/js/index.js
constdom=document.querySelector('#main');constel=(<div><h1>Hello JSX</h1><p>JSX is very nice.</p></div>);ReactDOM.render(el,dom);index.html
<!DOCTYPE html><htmllang="ja"><head><metacharset="UTF-8"><title>Hello React</title><script crossoriginsrc="https://unpkg.com/react@16/umd/react.development.js"></script><script crossoriginsrc="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone/babel.min.js"></script></head><body><divid="main">Loading...</div><script type="text/babel"src="./public/js/index.js"></script></body></html>繰返し
./public/js/index.js
constlinks=[{key:1,url:'https://ja.reactjs.org/',name:'React'},{key:2,url:'https://babeljs.io/',name:'Babel'}]constdom=document.querySelector('#main');constel=(<div><h1>Hello JSX</h1><p>JSX is very nice.</p><ul>{links.map((link)=>(<likey={link.key}><ahref={link.url}>{link.name}</a></li>))}</ul></div>);ReactDOM.render(el,dom);
分岐とイベント
index.html
<!DOCTYPE html><htmllang="ja"><head><metacharset="UTF-8"><title>Hello React</title><script crossoriginsrc="https://unpkg.com/react@16/umd/react.development.js"></script><script crossoriginsrc="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone/babel.min.js"></script></head><body><buttonid="cnt"onclick="counter();">Click Me</button><script type="text/babel"src="./public/js/index.js"></script></body></html>./publuc/js/index.js
constcnt_dom=document.querySelector('#cnt');letcount_num=0;functioncounter(){count_num++;constcnt_el=(<div>{count_num>=10?<h2>Thank you for clicking 10 times.</h2>:<span>Clicked: {count_num}</span>}</div>);ReactDOM.render(cnt_el,cnt_dom);}
分岐その２
index.html
<!DOCTYPE html><htmllang="ja"><head><metacharset="UTF-8"><title>Hello React</title><script crossoriginsrc="https://unpkg.com/react@16/umd/react.development.js"></script><script crossoriginsrc="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone/babel.min.js"></script></head><body><divid="cnt2">Loading...</div><script type="text/babel"src="./public/js/index.js"></script></body></html>./public/js/index.js
constcnt2_dom=document.querySelector('#cnt2');letcount_num=-1;letcounter=(event)=>{count_num++;constcnt2_el=(<div>{count_num==0?<buttononClick={counter}>Click Me</button>:count_num>=10?<h2>Thank you for clicking 10 times.</h2>:<buttononClick={counter}>Clicked: {count_num}</button>}</div>);ReactDOM.render(cnt2_el,cnt2_dom);}counter();
おわりに
- AWS Amplifyを使うと、Githubにpushするだけで自動デプロイされて便利。
- コンポーネントの使い方とか、もう少し勉強していく。