どうも、Mejikaです❗️
ようやくコントラクトがデプロイ出来ましたね😊
で……？
この後は？
……🙄
はい、
このままでは何も起きません
例えるなら
お金を入れるところも
押しボタンもない
コーラの自販機です😭
中にコーラは入ってるのに
これでは買えませんねw
なので
押しボタンや
お金を入れるところ
を作りましょう
つまり
実際に手で操作するところ
がフロントエンドですね
このようなイメージになります。
作成ツールは React を使います。
＾＾＾＾＾＾＾＾＾
React は、Meta社(旧Facebook社)が開発したJavaScriptライブラリです😌
ザクっというと…
ホームページ作るときに
1から作るの大変だから
かんたんなコマンドで作れるようにしたよ❗️
という感じですw
ちなみにですが、
そもそもJavaScriptって何だっけ？
については、こちらの動画 がわかりやすかったです
＾＾＾＾＾＾＾
なお！
Reactを使ったアプリ
Click to earn!
の作り方について
Potents さんが
めっっっちゃ
わかりやすく解説してくださっています❣️🤤
本格的にReactを学びたい
という方は こちらの Discord に入って頂いて、「💪React-BCG」 チャンネルをご覧ください😌
今回Reactで作るアプリは
めちゃ簡単なものですw
・メッセージを刻み込むボックス と 送信ボタン
・刻み込んだメッセージを呼び出すボタン と 表示させるボックス
これだけです
色気もデザインも何もありません🙄
あらかじめご容赦くださいwww
ではさっそくまいりましょう
このような感じで進めていきます。
①Reactのライブラリを呼び出す
②ホームページの画面をつくる
③メタマスクとフロントエンドをつなげる
④コントラクトを動作させて結果を表示させる
まずはツールをインストールです
＾＾＾＾＾＾＾＾
npxとnpmの違いについては コチラ が参考になります。
簡単に言うと
npx → 必要最小限の指定したパッケージをダウンロード
npm → パッケージ全てをゴソっとダウンロードして、削除はあとから自分で実施
という感じです😌
＾＾＾＾＾＾＾＾＾
以下を聞かれますので、 y （はい） と答えます
インストールが始まりました👍
うまくインストール出来たようです！
(・_・D フムフム
コマンドはこんな感じか
ホームページの構成ファイルが整ったあとは
npm startでローカルネットワーク上で表示させます。
うまく動作できたらnpm run buildして
出来たフォルダごとサーバーに置きます。
試しにローカル上に表示させてみましょう。
インストールが終わると
react-tutorialのフォルダが作成されます。
そちらのディレクトリに移動したら
npm startしてみましょう。
ブラウザが開いて
ローカルホスト上にページが表示されましたね！
ほうほう
こんな感じですかｗ
ではいよいよ
作成をしていきましょう！
フォルダの構成はこのような感じです。
ファイルが多すぎて目が回る😅……
……ファイトですよー！
＾＾＾＾＾＾＾＾＾＾
srcは、sourceの略です。
sourceは、英語で 素 とか 出典 という意味ですね。
ホームページの中で
動画/画像やアプリ（JaveScript）など
外部から呼び込むものが src です
＾＾＾＾＾＾＾＾＾＾
……ちょっと長くなってきましたので
いったんこの辺で区切りますｗ
ここまで読んでくださったあなた
本当にありがとうございます！
それではまた、お会いしましょう！
ウホウホ
🦍
コメント