我使用React（TypeScript + ReduxToolkit + Chakra UI + amplify）来构建了一个应用程序【回覧板应用】

2 年 ago
新, 韵
2 minutes

准备环境

在终端上创建一个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

安装所需的软件包。

官方网站：脉轮

npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion

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

综合《React＋TypeScript的应用程序中引入ESLint和Prettier》详细讲解了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？

已读代码

假设你正在使用React，配合像Redux这样的状态管理库，下面是一个可以用来实现读取功能的代码示例，用于处理一个项目列表。

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>
  );
};

在这段代码中，我们定义了一个ItemList组件，它使用useSelector钩子从Redux存储中获取项目。我们还使用useDispatch钩子创建一个调度程序，用于分发fetchItems动作。

当组件被挂载时，使用 useEffect 钩子函数来获取项目。使用 dispatch 函数将 fetchItems 动作分派到 Redux 存储。

最后，对项目数组进行映射，以显示每个项目的标题和描述。

请参考以下网站：

【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 Amplify部署React应用
试用React Router v6的页面跳转功能

bannerAds