【デイトラ学習記録】DAY28 Reactの基礎知識と環境構築

今回はReactの基礎知識と環境構築を学習しています。

Reactの基礎知識と環境構築 Webアプリ開発コースフロントエンド開発編

フロントエンド領域の開発を学んでキャリアの幅を広げよう

Reactとは

JavaScriptのライブラリで、主にUIを作成するために作られる
Reactはコンポーネントベースで作られている
UIが複雑なアプリなど、効率的なUI開発が求められる場合にReactの利点が生きる

仮想DOM

Reactには仮想DOMという仕組みがある。

ざっくり、「差分のみ本物のDOM操作に反映されるため早い」

状態管理が簡単

データの状態と、DOMを関連付けるのが簡単にできる。

環境構築

これまで学習してきた環境にReactを追加する形で作っていきます。

TypeScript + React で開発し、webpackでコンパイルしていきます。

パッケージの追加

reactのインストール
- npm i ---save-exact react react-dom
TypeScriptと組みわせて使用する
- npm i --save-dev --seve-exact @types/react @types/react -dom

package.json

{
  "name": "dev-react-practice",
  "version": "1.0.0",
  "description": "dev-react-practice",
  "scripts": {
    "format": "npx prettier . --write",
    "lint:js": "npx eslint \"**/*.js\"",
    "start:dev": "npx webpack serve --mode development",
    "build:prod": "npx webpack --mode production",
    "build:dev": "npx webpack --mode development",
    "build:tailwind": "npx tailwindcss -i ./src/css/input.css -o ./src/css/output.css --watch"
  },
  "devDependencies": {
    "@eslint/js": "9.15.0",
    "@types/react": "19.0.2",
    "@types/react-dom": "19.0.2",
    "css-loader": "7.1.2",
    "eslint": "9.15.0",
    "eslint-config-prettier": "9.1.0",
    "eslint-plugin-prettier": "5.2.1",
    "eslint-plugin-react": "7.37.2",
    "globals": "15.12.0",
    "html-webpack-plugin": "5.6.3",
    "mini-css-extract-plugin": "2.9.2",
    "prettier": "3.4.2",
    "style-loader": "4.0.0",
    "tailwindcss": "3.4.17",
    "ts-loader": "9.5.1",
    "typescript": "5.7.2",
    "webpack": "5.97.1",
    "webpack-cli": "6.0.1",
    "webpack-dev-server": "5.2.0"
  },
  "dependencies": {
    "react": "19.0.0",
    "react-dom": "19.0.0"
  }
}

tsconfig.json

TypeScriptの設定ファイル

tsconfig.json

{
  "compilerOptions": {
    "jsx": "react", // jsxでreactを使うための記述
    "sourceMap": true,
    "target": "ES5",
    "module": "ES2015",
    "strict": true
  }
}

webpackconfig.js

webpackの設定ファイル

webpackがHTMLなどを含めてコンパイルしている
ts-loader が TypeScript をコンパイルしてくれている
- ts-loader は tsconfig.json の設定に従って、コンパイルした JavaScript ファイルを生成している

.tsx ファルとは？

JSXを書くための .jsxという拡張値がある。
JavaScritp を TypeScript で書くために、.ts という拡張子が存在する
JSX を TypeScript で書くために、.tsx という拡張子がある

webpackconfig.js

const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: "./src/js/index.tsx", // 監視する拡張子を変更
  output: {
    path: `${__dirname}/docs/`,
    filename: "js/bundle.js",
  },
  mode: "development",
  devtool: "source-map",

  devServer: {
    static: {
      directory: "./docs/",
    },
    watchFiles: ["src/**/*"],
  },

  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
      {
        test: /(\.ts|\.tsx)$/, // .tsxもts-loaderでコンパイル
        use: "ts-loader",
      },
    ],
  },

  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
    }),
    new MiniCssExtractPlugin({
      filename: "css/style.css",
    }),
  ],

  resolve: {
    extensions: [".tsx", ".ts", ".js"], // .tsxもwebpackで監視
  },
};

React プロジェクトを始めるために

React プロジェクトを始める – React

The library for web and native user interfaces

Reactでアプリやウェブサイトを作りたい場合、人気のフレームワークを使うことがおすすめ
- Next.js
- Remix
- Gatsby
- など
フレームワークなしも可能だが、おすすめしないとされている

今回は学習のため、あえてフレームワークなしで進めていきます。