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

vue案件が多い中、reactを使用する必要があったので、勉強することにした。

react 勉強シリーズ

目次

前回、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の動きを確認してみる。

次に読むおすすめ記事

Angularでwebアプリを作成する時「コンポーネントのベストプラクティス」

JavaScriptを使用してWordPressの投稿に目次を挿入する

javascriptでimportするときに { 中括弧 } をつける時とつかない時があって釈然としない

JavaScriptにおけるcount++と++countの違いについて調べてみた

今更ながら、即時関数がとでも便利でかっこいい

この記事に対するコメント

お気軽にコメントを下さい

メールアドレスが公開されることはありません。 が付いている欄は必須項目です