スポンサーリンク

【React】最低限の構成で動かしてみる

【React】最低限の構成で動かしてみるJavaScript
【React】最低限の構成で動かしてみる
2023.02.17
スポンサーリンク

React案件に入ることが決まったので、予習をすることに。まずは基礎から学んでいこうと、ReactTutorialをやってみたところReact素人の私にはさっぱり理解ができませんでした。

create-react-appでいい感じにプロジェクトができるようですが、まずはそこから学習を始めたいと思います。

ちなみにReactTutorialの完成版はこちらです。三目並べゲーム！こんなの作りたい！

Just a moment...
codepen.io

Reactプロジェクトの作成

ReactTutorialで学んだプロジェクトの作成方法です。

Reactプロジェクトを作成する

npx create-react-app my-app

作成されたプロジェクトフォルダに移動

cd my-app

サーバーを起動する

npm start

URL欄に「http://localhost:3000」を入力

画面が表示されました！

create-react-appで作成した構成

C:\REPOS\MY-APP
│  .gitignore
│  package-lock.json
│  package.json
│  README.md
│  
├─node_modules
├─public
│      favicon.ico
│      index.html
│      logo192.png
│      logo512.png
│      manifest.json
│      robots.txt
│
└─src
        App.css
        App.js
        App.test.js
        index.css
        index.js
        logo.svg
        reportWebVitals.js
        setupTests.js

Reactプロジェクトを理解するために必要な知識

create-react-appでプロジェクトを作成すると一瞬でReactのひな型が作れてしまいます。Reactを動かすために何が必要か？どんなことをしているかを細分化して学んで行きたいと思います。

Reactプロジェクトで大事な構成要素について

  • npm
  • package.json
  • package-lock.json
  • node_modules

４つの用語について

npmとはパッケージを管理するシステムのことで、package.jsonとはプロジェクトを管理するファイルのことです。このファイルにインストールしたパッケージのバージョン範囲が記載されます。インストールしたパッケージはnode_modulesに追加されます。

package-lock.jsonはnpmインストールで実際にインストールされたバージョンが記載されます。主に異なる環境化での開発において、パッケージのバージョンの整合性を保つために使用されるそうです。

package-lock.jsonはnpm installで自動生成されますが、package.jsonは自動生成されません。

package.jsonがないとnpm installができないため、最初に作成します。

最低限の構成でReactプロジェクトを作成

中身は後で修正できるので、対話形式を飛ばして作成します

package.jsonの作成

npm init　-y
package.json
{
  "name": "react-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

package.jsonが作成されたらreact-scripts(パッケージ)で使用するコマンドを追記していきます。scriptsに記述したコマンドは省略して使用することができます。

package.jsonに以下を追記

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

Reactを使用するためのパッケージをインストール

npm install react react-dom react-scripts

インストール後に追加された箇所は赤字にしています。

dependenciesでインストールしたパッケージの管理をしています

トランスパイル(JavaScriptの構文変換)の対象とするブラウザをbrowserslistに指定することができます。development(開発環境)とproduction(本番環境)で分けることもできる

package.json
{
  "name": "react-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
    },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "^5.0.1"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

インストールしたパッケージの説明

react

React は React ライブラリのエントリポイントです。<script> タグから React を読み込む場合、これらの最上位 API をグローバルの React から利用できます。npm と ES6 を使う場合、import React from 'react' と書けます。npm と ES5 を使う場合、var React = require('react') と書けます。

https://ja.reactjs.org/docs/react-api.html

react-dom

Reactの仮想DOMを提供している。

react-dom パッケージではアプリのトップレベルで使うための DOM 特有のメソッドを提供しています。また必要に応じて React モデルから外に出るための避難ハッチ用メソッドも提供しています。

https://ja.reactjs.org/docs/react-api.html
  • 仮想DOMについて

従来のDOMだと変更があるとページ全体を構築していたが、仮想DOMを使うことで変更された箇所のみを再構築できるため画面表示の高速化が可能となる。

【React】仮想DOMって何！？コンポーネントのレンダリングと描画について理解しよう！ - Qiita
ReactにおけるDOM構築についてReactはDOMを仮に構築する仕組みを備えており、仮想DOMを設計してからリアルDOMを作成するため、従来のDOMやフレームワークで構築されたDOMに比べて処…
qiita.com

react-scripts

webpackとbabelを内部的に動作させています。

  • babel

JavaScriptのトランスコンパイラです。JavaScriptのバージョン間の差異を無くすために互換性を持たせています。ブラウザで対応していないバージョンで記述されたJavaScriptがあれば、下位バージョンのJavaScriptで動くように変換します。

トランスコンパイラ - Wikipedia
ja.wikipedia.org
  • webpack

複数のファイルを一つにまとめます。複数のファイルをマージしてまとめることで、一度のリクエストでファイルを読み取ることができます。その結果、何度もファイルを読み取りに行く必要が無くなり、通信の負荷軽減と画面の表示速度向上につながります。

HelloWorldを画面に表示させる

サーバー起動時にpublic/index.htmlとsrc/indexを読み込みに行くためpublicフォルダとsrcフォルダを作成します。publicフォルダにhtml、srcフォルダにjsを配置していきます。

デフォルトの読み込み先はpaths.jsファイルに記述されている

\node_modules\react-scripts\config\paths.js

フォルダの作成

mkdir public
mkdir src

<div id=”root”></div>ここでDOM操作を行う。

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>react-main_concepts</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

ReactDOMで仮想DOMを構築してroot.renderで画面表示させてます。

index.js
import React from 'react';
import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>Hello, world!</h1>);

サーバーを起動する

npm start
GitHub - TokutyTok/react-todoApp: react_todoApp
react_todoApp. Contribute to TokutyTok/react-todoApp development by creating an account on GitHub.
github.com

最低限の構成でReactプロジェクトを作成した場合の構成

C:\REPOS\REACT-APP
│  package-lock.json
│  package.json
│
├─node-modules
├─public
│      index.html
│
└─src
        index.js

今回学んだこと

Reactに必要なパッケージ react react-dom react-scripts

パッケージ管理について npm package.json package-lock.json node_modules

Reactを最低限の構成で動かす方法

おすすめの書籍

JavaScriptのおすすめの書籍です。

基本的に構文が載っているため、教科書代わりに使える内容となっています。

Reactの前にとてもお世話になりました。JavaScriptをこれから始める方におすすめです。

おすすめのUdemy講座

ReactでおすすめのUdemy講座を紹介します。

モダンJavaScriptの基礎から始める挫折しないためのReact入門

ReactはJavaScriptの基本的な構文を使用するため、Reactだけの理解では足りないでしょう。

こちらのReact講座は、JavaScriptでのTODOアプリを作成してからReactでのTODOアプリを作成するため、ReactだけではなくJavaScriptを基礎から学ぶことができます。

Reactからいきなり入らずにJavaScriptの基礎から学べる点が、初心者にとてもおすすめできる内容となっています。

【Reactアプリ開発】3種類のReactアプリケーションを構築して、Reactの理解をさらに深めるステップアップ講座

APIを使用してデータを取得したり、react-router-domでのページ遷移を学べるためより実践的な内容となっています。

３種類のReactアプリケーションを作成することができるため、Reactの基礎的な内容を学んだ人におすすめです。

タイトルとURLをコピーしました