#まずAWS公式を参考に
#React
公式サイトを見ると、Reactは「A JavaScript library for building user interfaces」と称されています。UIのためのライブラリと理解して良いでしょう。
●Reactの主な仕事はデータを画面に表示する
さらに「Reactに与えるデータを変えると表示されるデータも変わる」という機能も備えています。データを変更してReactに与えれば、変更部分を半自動的に検出し、反応的(reactive)に表示を変えます。
この反応的変化がReactの価値を大きく高めています。webでは非常に多数の変数と状態管理が必要になります。JavaScriptだけでこれを解決しようとすると、複雑に絡んだいわゆるスパゲティコードになりがちです。そういった場合にReactを使えば、この変更を感知し、自動的に画面に反映させることができます。
また、Reactは表示要素のコンポーネント化(部品化)についても長けています。いくつかの表示要素と機能をまとめ、コンポーネントとして利用可能にします。ウェブにもWeb Componentsというコンポーネント化の標準規格がありますが、まだまだ実用的ではないということもあり、Reactが採用される場面が多く存在します。
npm install react react-dom
React および ReactDOM は CDN を介して利用することもができます。
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
上記のバージョンは開発のためだけのものであり、本番環境には適していません。圧縮・最適化された本番バージョンの React は下記のリンクから利用できます。
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
Expo CLI と React Native CLI
Expo CLI
Expo はすぐにネイティブアプリを作成できます。
アプリの機能は Expo のエコシステム内に限られます。
React Native CLI
Xcode か Android Studio の設定が必要です。
大規模なアプリ開発向けです。
いったんExpo CLIを利用します。
npm install -g expo-cli
expo init react_native_amplify_30
npm start
GitHubにコミットする
GitHub レポジトリを作成してコードをレポジトリにコミット
https://aws.amazon.com/jp/getting-started/hands-on/build-react-app-amplify-graphql/module-one/
コマンドラインインターフェイスで以下のコマンドを実行する新しい GitHub レポジトリにアプリケーションをプッシュします。
git init
git remote add origin git@github.com:username/reponame.git
git add .
git commit -m “initial commit”
git push origin master
デプロイ時のCannot find file './src/aws-exports'
amplify init
npm init
初期化する