.vscodeが作成されない

Question

以下のサイトを参考にreactのプログラムを書いています。
リンク内容

index.js側でdocument.getElementById('root')している
意味がわかりません。これは、app.jsで取得したものを
どこにレンダリングするかを指定するもので
index.jsに'root'タグがないと成立しないと思いますが如何でしょうか？

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;

index.js↓

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

ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();

Comments

[Daregada]

タイトルと質問内容が関係ないようですが。

Answer 1

index.jsに'root'タグがないと成立しないと思いますが如何でしょうか？

root要素はsrc/index.jsではなく、public/index.htmlにあります。
以下細かい話ですが・・・

恐らくこのプロジェクトはcreate-react-appで作られています。
※README.md中に**"This project was bootstrapped with Create React App."**の一文があるため恐らくそうです。

create-react-appで作られたプロジェクトはnpm startで起動しますが、その際に行われているのはpackage.jsonに書かれているstart処理です。
package.jsonは以下の通りです。

{
  // ...略
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  // ...略
}

この中のstartに該当するreact-scripts startが実際には実行されているわけです。
react-scriptsコマンドはcreate-react-appが作った、reactアプリの動作環境もろもろのスクリプトを丸めた処理です。

この処理の中で**public/index.htmlを配置して、その後でindex.jsやApp.jsなどのソース一式を読み込んで、それを最終的にlocalhost:3000でサービスを立てて・・・**、といった具合に各種コードの配置をしてくれています。

これは推測ですが、特別な使い方をしない限りはindex.htmlは触ることはないため、デフォルトでsrcディレクトリではなくpublicディレクトリにあるのだと思います。