Reactを使ってブログサイトを作る 01 - 開発環境の構築

1.CRAを使用してプロジェクトを作成する

- npxを使用してプロジェクトを作成する
npx create-react-app ArticleHub
- プロジェクトに移動
cd ArticleHub
- プロジェクトを起動
npm start

2.プロジェクトのディレクトリ構造を調整する

-src
  -apis           プロジェクトのAPI関数
  -assets         プロジェクトのリソースファイル（例：画像など）
  -components     共通コンポーネント
  -pages          ページコンポーネント
  -store          状態管理
  -utils          ツール（例：token、axiosのラップなど）
  -App.js         ルートコンポーネント
  -index.css      グローバルスタイル
  -index.js       プロジェクトのエントリーポイント

3.SCSSを導入する

• SASSはCSSのプリプロセッサで、高度な構文をサポートしており、効率的にスタイルを書くことができます。CRAでSCSSを導入するのは非常に簡単で、sassツールをインストールするだけです。
• sass解析パッケージをインストール：npm i sass -D
• グローバルスタイルファイルを作成：index.scss

4.Ant Designを導入する

インストール

• npm install antd --save

テスト

App.js

import React from 'react';
import { Button } from 'antd';
function App() {
    return <div className="App">
        <Button type="primary">Button</Button>
    </div>
}
export default App;

5.基本的なルーティングを設定する

ルーティングパッケージをインストールする

• npm i react-router-dom

LayoutとLoginの2つの基本コンポーネントを準備する

• pages/Layout/index.js

const Layout = () => {
  return <div>this is layout</div>
}
export default Layout

• pages/Login/index.js

const Login = () => {
  return <div>this is login</div>
}
export default Login

ルーティングを設定する

• router/index.js

import { createBrowserRouter } from 'react-router-dom'
import Login from '../pages/Login'
import Layout from '../pages/Layout'
const router = createBrowserRouter([
  {
    path: '/',
    element: <Layout />,
  },
  {
    path: '/login',
    element: <Login />,
  },
])
export default router

• index.js

import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.scss'
import router from './router'
import { RouterProvider } from 'react-router-dom'

ReactDOM.createRoot(document.getElementById('root')).render(
    <RouterProvider router={router} />
)

テスト

6.エイリアスパスを設定する

背景

• 業務開発中、フォルダの階層が深くなることがあり、従来のパス選択は手間がかかりミスが発生しやすいです。パスエイリアスを設定することで、このプロセスを簡略化できます。
• パス解析設定（webpack）：@/をsrc/として解釈。
• パス補完設定（VSCode）：VSCodeで@/を入力すると、自動的にsrc/以下のサブディレクトリを補完。

パス解析設定

1. cracoをインストールする

npm i -D @craco/craco

1. プロジェクトのルートディレクトリに設定ファイルcraco.config.jsを作成する

const path = require('path')
module.exports = {
  // webpack設定
  webpack: {
    // エイリアス設定
    alias: {
      // 規約：@はsrcフォルダを指す
      '@': path.resolve(__dirname, 'src')
    }
  }
}

1. 設定ファイルにパス解析設定を追加するpackage.json

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

1. パス補完設定を追加するjsconfig.json

ルートディレクトリに新しい設定ファイルを作成する

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  }
}

1. 起動とビルドコマンドを設定する

import React from 'react'
import ReactDOM from 'react-dom/client'
import Layout from '@/pages/Layout'
import Login from '@/pages/Login'
import { createBrowserRouter } from 'react-router-dom'

const router = createBrowserRouter([
  {
    path: '/Login',
    element: <Login />
  },
  {
    path: '/',
    element: <Layout />
  }
])

export default router