React(TypeScript + ReduxToolkit + Chakra UI +  amplify)の構成 でアプリを作成しました【回覧板アプリ】

## 環境の準備
①ターミナルでreactアプリケーションを作成する。

```
npx create-react-app <プロジェクト名> --template redux-typescript
npm start

//package-lock.jsonからyarn.lockに移行する
yarn import
```

② ローカルリポジトリのデフォルトブランチをmasterからmainに変更する。

```
git config --global init.defaultBranch main
git branch -m master main
```



③ 必要なパッケージをインストールする。

公式サイト：[chakra](https://chakra-ui.com/)

```
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
```
```index.tsx
import * as React from 'react'

// 1. import `ChakraProvider` component
import { ChakraProvider } from '@chakra-ui/react'

function App() {
  // 2. Wrap ChakraProvider at the root of your app
  return (
    <ChakraProvider>
      <TheRestOfYourApplication />
    </ChakraProvider>
  )
}
```
公式サイト : [react-icons](https://react-icons.github.io/react-icons/)

```
yarn add react-icons
yarn add react-hook-form@7.22.5
yarn add uuid@8.3.2
yarn add @types/uuid
yarn add moment
yarn add react-markdown
yarn add react-router-dom
```

[ESLintとPrettierとを基本からまとめてみた【React＋TypeScriptのアプリにESLintとPrettierを導入】](https://qiita.com/kanfutrooper/items/afd44e1a339ff6963ebf)



## コンポーネント・ファイル構成

```
 src
  ├── stores　//Reduxに関連するファイル
       ├── slices      
            ├── todoAPI.ts
            └── todoSlice.ts
       ├── hooks.ts
       └── store.ts
  ├── views //アプリのUIに関連するファイル
       ├── components　//部品
            ├── main　 //Main画面
                 ├── AddTodo.tsx
                 ├── Header.tsx
                 ├── TodoItem.tsx
                 └── TodoList.tsx
           　├── top　//top画面
 　　　　　  　   　        ├── Highscreen.tsx
                 └── Lowscreen.tsx
       └── pages　//画面
            ├── top.tsx
            └── Main.tsx
  ├── App.css
  ├── App.tsx
  ├── index.css
  └── index.tsx
```

## AmplifyでAuthの複数リダイレクトURLに対応する方法


## 既読コード

Assuming you are using React with some sort of state management library like Redux, here's an example of code that can be used to implement read functionality for a list of items:




```
import React, { useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import { fetchItems } from "../actions/itemActions";

const ItemList = () => {
  const items = useSelector(state => state.items); // gets the items from the state
  const dispatch = useDispatch(); // creates a dispatcher for actions

  useEffect(() => {
    dispatch(fetchItems()); // fetches the items when the component is mounted
  }, [dispatch]);

  return (
    <div>
      <h1>Item List</h1>
      {items.map(item => (
        <div key={item.id}>
          <h2>{item.title}</h2>
          <p>{item.description}</p>
        </div>
      ))}
    </div>
  );
};
```

In this code, we define a ItemList component that uses the useSelector hook to get the items from the Redux store. We also use the useDispatch hook to create a dispatcher that we'll use to dispatch the fetchItems action.

The useEffect hook is used to fetch the items when the component is mounted. The fetchItems action is dispatched to the Redux store using the dispatch function.

Finally, the items array is mapped over to display each item's title and description.






   

## 参考サイト
[【AWS Amplify入門】第2-1回：UI作成の準備](https://www.youtube.com/watch?v=UY4LGydSN3s)
[【AWS Amplify入門】第2-2回：TodoList、TodoItemコンポーネントの作成](https://www.youtube.com/watch?v=lJAd1rhXpZ8)
[【AWS Amplify入門】第2-3回：AddTodoコンポーネントの作成](https://www.youtube.com/watch?v=bfdqgB5txH4)
[Gitのデフォルトブランチをmasterからmainに変更する方法](https://qiita.com/fk_chang/items/a4839a595fef9a2c3724)
[Chakra UI を使用して React レスポンシブ ポートフォリオ アプリを構築する](https://www.youtube.com/watch?v=dj6rPuWXoQM)
[https://chakra-templates.dev/page-sections/hero](https://chakra-templates.dev/page-sections/hero)
[【AWS入門】AWSを使ってReactアプリをデプロイしてみよう ~AWS Amplifyを使用~](https://www.youtube.com/watch?v=m9ZjW1md_OQ&t=1411s)
[React Router v6 でページ遷移をやってみた](https://qiita.com/oiz-y/items/d98de71cbba3a1d69a9c)