React講座　Reactの仕組み - あさめしコード

JavaScriptの基礎を学んで次に何をしたらよいか迷っている方、Web開発でスキルを上げたい方、Reactのフレームワークを是非学びましょう。

では、Reactのコンセプトのシリーズ第一章の始まりです。

Reactのアプリケーションをビルドする

では、手元にテキストエディタとNode.jsがあることが条件です。（ここまでわからない人はJavaScriptの基本と）

Viteで作成する場合は同じコマンドだけ下記に記載しておきます。

npm create vite@latest

#React→JavaScript→ cd → npm i

index.html

では、テキストエディタからファイル構成を見てみましょう。

index.htmlがプロジェクトの直下にありますね。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

このHTMLはほぼ触る必要はありません。

CSSもJavaScriptもすべてアプリケーションをマウントする際に他のJavaScriptファイルから読み込ませるようにします。

このマウントというのはReactのアプリケーションを読み込む作業のことです。

ここでIdがrootのdivがあることに注目しましょう。

ここにすべてのReactのアプリケーションをマウントすることになります。

これはsrcフォルダ内のmain.jsxファイルを見ることで理解できます。jsxはJavaScriptのエクステンションのことで、JavaScript内でHTMLを書けるようにしたものです。詳しい説明は後から行います。

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'

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

上記のコードを見ると、先ほどのHTMLのrootのidのところに<App/>というのをレンダーしていることが分かりますね。

ここにassets/App.jsxがマウントされているという事になります。

これがコンポーネントの概念になります。それぞれのJsxファイル内にコンポーネント（パーツ）となるものを作成して再利用できるところでマウントさせることができます。

ですので、ボタンのコンポーネントやフォームのコンポーネントを作成してどこでも再利用できるようになります。便利ですね。

では次にJSXについて説明したいと思います。