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

https://github.com/KyleAndKelly/ArticleHub-React
## 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

```jsx
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

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

- pages/Login/index.js

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

### ルーティングを設定する

- router/index.js

```jsx
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

```jsx
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
```

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

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

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

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

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

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

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

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

```jsx
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
```