react を適当に触って確かめてみる。

それじゃ、適当に触ってみる

App.js編

まず、前回インストール時の時から依存ファイルをクリーニングした。

結果、非常にわかりやすくなった。

ざっと見た感じ、HTML部分の特別な違いは、class が classNameになること…くらい？

import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <p>HTML部分の特別な違いは、class が classNameになること...くらいかしら</p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >Learn React</a>
      </header>
    </div>
  );
}

export default App;

上記コードで保存すると、

react 変更分

のように表示される。

ここまでは特別に難しくない。

App.css 編

次に、App.js の先頭に書かれている、

import './App.css';

を見ていく。

こちらも特別難しいことはない。

普通にcssを読みこんでいるだけなので、

color: white; → color: red;

にすればテストの色が変更される、

css変更画像

この画像通りに。

特別難しいことはないが、

@media (prefers-reduced-motion: no-preference)  {}
font-size: calc(10px + 2vmin);

とか個人的に知らない使い方があったので、勉強になる気がする。

てか、人のコードを見るのは勉強になる。

参考：意外と知らない？メディアクエリを使ってみよう。

参考：【CSS】vw、vh、vmin、vmaxとは？基本的な使い方

index.js 編

最後に、前述した App.js を読み込んでいる index.js 、こいつが少しわからなかった。

こちらはクリーニングした状態で下記のようになっている。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

さて、これはなんなのだろうか。

vue を良く触るので、vueで考えてみると、App.vue（？）あるいは、views 内ファイルのどれか（？）

調べたところ、どうやらindex.js は、

Reactアプリを実行する際、一番最初に呼び出されるファイル

らしいので、App.vue に近いのだろうか。

んー、わからないので、次で新規でページを作ってみて、index.jsの動きを確認してみる。

それじゃ、適当に触ってみる#

App.js編#

App.css 編#

index.js 編#

それじゃ、適当に触ってみる

App.js編

App.css 編

index.js 編