教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。
その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。
まずはReactアプリを準備しましょう。
今回はFacebookが提供しているReactアプリ作成ツールの1つ[Create React App]を使用します。
Create React Appを使用することで、ビルドの設定やローカルでの開発サーバー起動処理など、Reactアプリ開発に必要なツールのインストールと設定をまとめて行うことができます。
このツールは、初回のセットアップ時のみ利用しますので、npx
経由で実行しましょう。
Create React Appを実行するコマンドは、npx create-react-app <project-directory> [options]
のように書きます。
つまり、作成したいアプリの名前を英語で指定することで、作成したアプリのディレクトリを見つけることが簡単になります。
今回作るアプリはAWS AmplifyとReact、そしてStripeを使うものですので、amplify-react-stripe
を使用します。
アプリのディレクトリを作成したいディレクトリで、以下のコマンドを実行しましょう。
console Copied!npx create-react-app amplify-react-stripe --scripts-version "4.0.3"
アプリのセットアップが完了すると、以下のように英語で開発の進め方の紹介文が表示されます。
console Copied!Success! Created amplify-react-stripe at /Users/development/amplify-react-stripe
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 amplify-react-stripe
npm start
Happy hacking!
cd amplify-react-stripe
コマンドを実行して、作成されたアプリのディレクトリに入りましょう。
console Copied!cd amplify-react-stripe
ls -la
コマンドを実行すると、様々なファイルが作成されていることが確認できます。
console Copied!ls -la
total 1368
drwxr-xr-x 9 development staff 288 7 11 18:04 .
drwxr-xr-x 3 development staff 96 7 11 18:02 ..
-rw-r--r-- 1 development staff 310 7 11 18:04 .gitignore
-rw-r--r-- 1 development staff 3369 7 11 18:04 README.md
drwxr-xr-x 1040 development staff 33280 7 11 18:04 node_modules
-rw-r--r-- 1 development staff 684168 7 11 18:04 package-lock.json
-rw-r--r-- 1 development staff 823 7 11 18:04 package.json
drwxr-xr-x 8 development staff 256 7 11 18:04 public
drwxr-xr-x 10 development staff 320 7 11 18:04 src
続けてライブラリのバージョンをアップデートします。
これは本コースをスムーズに完了させるため、create-react-app
コマンドでインストールするライブラリのバージョンを固定化しているためです。
本コースでは、今後のアップデートで挙動が変化し、アプリの構築ができなくなりリスクを避けるためにバージョンを固定しています。
--scripts-version "4.0.3"
をcreate-react-app
コマンドに追加したことで、執筆時点の安定版であるバージョン4.0.3が常にインストールされます。
ただこの方法では、バグや脆弱性に対応したアップデート版がリリースされた場合、その変更が未反映のコードを利用することになります。
そのため、セットアップ完了後、amplify-react-stripe
ディレクトリで以下のコマンドを実行し、インストールされたライブラリの更新を行いましょう。
console Copied!npm install --save "react-scripts@4.0.*"
"react-scripts@4.0.*"
とライブラリ名の後ろに@でバージョンを指定しています。また、*
(ワイルドカード)を利用することで、「4.0.X系の最新バージョン」をインストールすることができます。
コマンドの実行が完了すると、実際にどのバージョンがインストールされたかが表示され、更新が完了します。
console Copied!+ react-scripts@4.0.3
updated 1 package and audited 1931 packages in 59.627s
Create React Appでアプリをセットアップすると、すぐにアプリをローカル環境で起動することができます。
react-amplify-stripe
ディレクトリで、以下のコマンドを実行しましょう。
console Copied!npm start
起動に成功すると、ブラウザで表示を確認するためのURLなどの情報が表示されます。
console Copied!Compiled successfully!
You can now view amplify-react-stripe in the browser.
Local: http://localhost:3000
On Your Network: http://192.000.00.000:3000
Note that the development build is not optimized.
To create a production build, use npm run build.
起動したサーバーは、[Control]キーと[c]キーを同時に押すことで停止できます。
Create React Appで作成したアプリは、ファイルの変更を自動で検知してブラウザを再読み込みしてくれます。
せっかくですので、1つファイルを変更してみましょう。
変化を体験するため、先ほど実行したnpm start
コマンドは中断せず、Reactアプリをブラウザで開いたまま作業することをお勧めします。
react-amplify-stripe/src/App.js
をVS Codeで開き、9行目〜11行目のテキストを変更しましょう。
javascript123 Copied!<p>
Edit <code>src/App.js</code> and save to reload.
</p>
javascript123 Copied!<p>
Hello React Stripe Amplify app!
</p>
src/App.js
の変更を保存すると、ブラウザで表示しているアプリのテキストが、いつの間にか変更されていることが確認できます。
Create React Appで作成したアプリでは、マークアップに問題が起きた時などに、エラーを画面に表示してくれる機能も備わっています。
react-amplify-stripe/src/App.js
をVS Codeで開き、11行目の</p>
を削除してみましょう。
javascript123 Copied!<p>
Hello React Stripe Amplify app!
</p>
javascript123 Copied!<p>
Hello React Stripe Amplify app!
</p>
が不足している状態にわざと変更した状態で保存してみましょう。構文エラーが画面に表示されるようになりました。
英文なのですこし「うっ」となるかもしれませんが、よく読むとExpected corresponding JSX closing tag for <p>. (20:6)
と書かれています。
closing tag for <p>
とあることから、「pの閉じタグ」について言及していることが伺えます。
このようにマークアップ構造がおかしくなったり、バグが発生した時には、画面に表示されたメッセージを確認し、必要ならばGoogle翻訳やDeepLなどで翻訳しつつ解決を目指すことをお勧めします。
最後に、削除した11行目の</p>
タグを復活させて、保存し直しましょう。
src/App.js
全コード途中で独自のチャレンジをされた場合に、元に戻ることができなくなることがあるかもしれません。
もし迷ってしまった場合は、src/App.js
に以下のコードを丸ごとコピーアンドペーストして保存してください。
src/App.js12345678910111213141516171819202122232425 Copied!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 Stripe Amplify app!
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
npx create-react-app <ディレクトリ名>
でReactアプリのセットアップができるnpm start
ですぐにReactアプリを動かすことができるOn Your Network
のURLでアクセスできる次はBootstrapを使って見た目を簡単に整えることに挑戦します。
nvm install stable
nvm use stable
こちらを実行して良いですか?
最終的にそれぞれのライブラリはどのバージョンでしたか?
初めの指定のバージョンとソースコード提示の際に異なるケースが散見されています。
(py310_2) user@usernoMacBook-Pro waffle2 % npx create-react-app amplify-react-stripe --scripts-version "4.0.3"
npx: 67個のパッケージを5.03秒でインストールしました。
You are running Node 12.22.3.
Create React App requires Node 14 or higher.
Please update your version of Node.