0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

AmplifyでReact-Native導入

Last updated at Posted at 2021-07-26

#まず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

初期化する

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?