# react を適当に触って確かめてみる。
3 min read
Table of Contents
前回、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;上記コードで保存すると、
のように表示される。
ここまでは特別に難しくない。
App.css 編
次に、App.js の先頭に書かれている、
import './App.css';を見ていく。
こちらも特別難しいことはない。
普通にcssを読みこんでいるだけなので、
color: white; → color: red;
にすればテストの色が変更される、
この画像通りに。
特別難しいことはないが、
@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の動きを確認してみる。
