More than 3 years have passed since last update.

React+Redux学習への道のり。～Reactを知る2～

React

Posted at 2020-04-27

#はじめに・・・
いざ環境ができても、一体何をどうすればいいのか全く分からないので
Reactの開発ができるレベルまでもっていきます。
なお、概念的なことは事前に公式サイトでお勉強しました！(全然理解できてませんが)

※今回もReactのことだけ

##まずはフォルダ構成を知る
npx create-react-app sampleを実行することでsampleというReactアプリケーションが完成します。
完成すると、フォルダーは以下の構成になります

sample
 |-node-modules 
 |-public       
　　|-index.html
　　|-：
 |-src          
　　|-index.js
　　|-App.js
　　|-：
 |-package.json
 |-yarn.lock
 |-README.md
 |-.gitignore

yarn.lock と package.jsonはバージョンを管理するためのファイル。
モジュールのバージョンを見るときに開いたりはします。

##各フォルダの説明
###node-modules
nodeのモジュール置き場。
npm install xxxxでインストールしたモジュールが配置されるフォルダ。
なので開発する際は触らない。

###public
静的ファイル(画像など)の置き場。
このフォルダの中にはindex.htmlが配置されている。
あんまりここも触らない？

###src
JavaScriptコードの置き場。
ここがReact開発の肝となるフォルダ！

ファイルを見てみる

アプリを作成して、何もせずにアクセスすると以下のような画面が表示されます。

なぜこの画面が表示されるのか、実際にソースを見てみます。

public/index.html = テンプレートファイル

画面に表示されているのはHTMLなのだから、まず真っ先に見ます。内容は・・・

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

なんのこっちゃわかりません。
メタ情報とリンク情報とbodyの内容だけ・・・。
画面に表示されているEdit src/App.js and save to reload.なんてどこにも記述されていません。

このindex.htmlはただのテンプレートファイル。
実際の内容は対となるメインプログラムindex.jsに記述されています。

src/index.js = HTMLとjsを紐づけるメインプログラム

内容は・・・

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

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

serviceWorker.unregister();

だいぶ関連が見えてきました。けどまだEdit src/App.js and save to reload.はありません！
このindex.jsはHTMLのテンプレートとJavaScriptのコンポーネントを組み合わせてレンダリングし、実際の表示を作成しているルートになります！

ReactDOM.render()がHTMLとJavaScriptを組み合わせてる箇所。
ここでポイントになるのが、何を・どこに組み合わせるか？というところ。
それはソースを見れば大体わかります。

ReactDOM.render(
  <React.StrictMode>                 ← 「何を」の部分
    <App />
  </React.StrictMode>,
  document.getElementById('root')    ← 「どこに」の部分
);

###「何を」の部分
<React.StrictMode>
開発モードにしか適用されないツールを起動するためのタグ。詳細は公式へ
<App />
Appコンポーネント。import App from './App';から読み取れるようsrc/App.jsの内容。
###「どこに」の部分
document.getElementById('root')これはpublic/index.htmlにあった<div id="root"></div>

まとめると・・・
index.htmlの<div id="root"></div>にsrc/App.jsの内容がレンダリングされる。
ってことです。

<<余談>>
index.htmlに<div id="root2"></div>と追記すれば、index.jsでもdocument.getElementById('root2') が利用できたりします。
※ここら辺の使われ方とかはいまいちわかってません。

src/App.js　=　コンポーネント

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

ようやく見つけました。Edit src/App.js and save to reload.
ここが実際の内容に当たるってことです。App.jsの内容を編集すれば画面に表示される内容も変更されます。
なのでApp.jsをお手本にコンポーネントの開発をしていくと思います。

HTMLのタグが書かれてますが、これがJSXなので微妙に記述方法が違います。ここは場数踏んで覚えるのが一番かなぁと。

#おわりに・・・
なお私はSPAを完全理解しておらず、index.htmlやcontents.htmlといった風にHTMLファイルが沢山あると思ってました。なので、『publicフォルダにhtmlファイルつくるんやろなぁ』と思ってました。
ですが違うんですね～。Reactの場合htmlファイルはindex.html一つだけ・・・。画面遷移をするにはreact-routerってのを使うらしい。またこれは別途勉強します。はい。

#お世話になったサイト
初心者のためのReact入門
とてつもなくお世話になりました。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

React+Redux学習への道のり。～Reactを知る2～

ファイルを見てみる

public/index.html = テンプレートファイル

src/index.js = HTMLとjsを紐づけるメインプログラム

src/App.js = コンポーネント

src/App.js　=　コンポーネント