{
  "$type": "site.standard.document",
  "canonicalUrl": "https://blog.nove-b.dev//posts/explore-react-functionality",
  "path": "/posts/explore-react-functionality",
  "publishedAt": "2021-12-16T00:00:00.000Z",
  "site": "at://did:plc:2atly2y5kfyjcj5zap6pv4wd/site.standard.publication/3mmxeqr2tcb2k",
  "tags": [
    "javascript",
    "react",
    "reactを勉強する"
  ],
  "textContent": "前回、reactのファイルを検分したので、今回は、適当に触ってみる。\n\nそれじゃ、適当に触ってみる\n\nApp.js編\n\nまず、前回インストール時の時から依存ファイルをクリーニングした。\n\n結果、非常にわかりやすくなった。\n\nざっと見た感じ、HTML部分の特別な違いは、class が classNameになること...くらい？\n\n上記コードで保存すると、\n\n!react 変更分\n\nのように表示される。\n\nここまでは特別に難しくない。\n\nApp.css 編\n\n次に、App.js の先頭に書かれている、\n\nを見ていく。\n\nこちらも特別難しいことはない。\n\n普通にcssを読みこんでいるだけなので、\n\ncolor: white; → color: red;\n\nにすればテストの色が変更される、\n\n!css変更画像\n\nこの画像通りに。\n\n特別難しいことはないが、\n\nとか個人的に知らない使い方があったので、勉強になる気がする。\n\nてか、人のコードを見るのは勉強になる。\n\n参考：意外と知らない？メディアクエリを使ってみよう。\n\n参考：【CSS】vw、vh、vmin、vmaxとは？基本的な使い方\n\nindex.js 編\n\n最後に、前述した App.js を読み込んでいる index.js 、こいつが少しわからなかった。\n\nこちらはクリーニングした状態で下記のようになっている。\n\nさて、これはなんなのだろうか。\n\nvue を良く触るので、vueで考えてみると、App.vue（？）あるいは、views 内ファイルのどれか（？）\n\n調べたところ、どうやらindex.js は、\n\n> Reactアプリを実行する際、一番最初に呼び出されるファイル\n\nらしいので、App.vue に近いのだろうか。\n\nんー、わからないので、次で新規でページを作ってみて、index.jsの動きを確認してみる。",
  "title": "react を適当に触って確かめてみる。"
}