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

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

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を導入】

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

 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作成の準備
【AWS Amplify入門】第2-2回：TodoList、TodoItemコンポーネントの作成
【AWS Amplify入門】第2-3回：AddTodoコンポーネントの作成
Gitのデフォルトブランチをmasterからmainに変更する方法
Chakra UI を使用して React レスポンシブ ポートフォリオ アプリを構築する
https://chakra-templates.dev/page-sections/hero
【AWS入門】AWSを使ってReactアプリをデプロイしてみよう ~AWS Amplifyを使用~
React Router v6 でページ遷移をやってみた