メサイア・ワークス

package.jsonから開始するreactチュートリアル。Dog APIで犬画像ギャラリー

package.jsonから開始するreactチュートリアル。Dog APIで犬画像ギャラリー

参考URL
https://zenn.dev/likr/articles/6be53ca64f29aa035f07

node_modulesフォルダ(パッケージ置き場)と、package-lock.json(実際にインストールされたパッケージのバージョンが記載)が生成される。
package.jsonは、このパッケージのこのバージョン以上(以下)という条件的な指定で記載されている。

package.jsonを編集して、コマンド追加

hello,worldと表示だけなのに、4つもファイルを生成する!!
index.html -> src/main.jsx -> App.jsx(ここでhello,worldしている)
vite.config.jsは開発ローカルサーバ用

vite.config.js

index.html

src/App.jsx

src/main.jsx

viteを使って、ローカルサーバで実行。
ブラウザから、http://localhost:5173/ でhello,worldが表示される

Dog APIを使った犬画像ギャラリーを作る

CSSフレームワークのbulmaを使う

src/main.jsxに先頭に、追加

src/App.jsを修正。jsxではclassじゃなくてclassNameでクラス指定する言語仕様
さらにコンポーネントの分割!
各htmlパーツを関数化する事により、複雑な構造のHTMLも、一覧性が良くなる。
Header()
Main() -> Gallery() -> Image()
Footer()

関数化して引数を渡せるので、複数URLからループ文で写真表示などもできる

Dog APIからランダム画像を取得して、表示する。
さらに犬種を指定できるようにする。

Formコンポーネントをみると、
HTML部分とjs関数の部分が分離されつつも、
同じFormコンポーネント関数内にあるのが、すごいプログラマ的!
これぞフロントエンドエンジニア技術!?

モバイルバージョンを終了