# dapp-react-learn

**Repository Path**: lw1987/dapp-react-learn

## Basic Information

- **Project Name**: dapp-react-learn
- **Description**: dapp react 学习
- **Primary Language**: NodeJS
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-11-02
- **Last Updated**: 2021-11-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

1. 创建项目

        create-react-app dapp-react-learn --template typescript

2. 安装项目依赖

        yarn add styled-components -S

        yarn add @types/styled-components -S

        yarn add react-redux -S

        yarn add @types/react-redux -S

        yarn add @reduxjs/toolkit -S  //(本身就是typescript 编写)

        yarn add react-router-dom -S
 
        yarn add @types/react-router-dom -S  

        yarn add react-i18next -S 

        yarn add i18next -S // react-118next 只是提供了react 的组件，核心还是i18next  

    > 以太坊dapp 需要用到的

         yarn add ethers -S

         // 使用@web3-react/core @web3-react/injected-connector 或者使用useWallet（useWallet 对@web3-react 进行了更一步的封装）
         yarn add @web3-react/core -S

         yarn add  @web3-react/injected-connector -S

3. 搭建项目目录结构

    + components: 自定义的组件

    + config: 配置文件，包括常量，字符串常量等

    + context: 封装的context

    + hooks: 业务hooks 定义，采用hooks 封装业务逻辑

    + state: 状态管理，使用reduxjs/toolkit 工具集封装redux

    + language: i18next 语言包 

    + utils: 工具类库

    + views: 页面组件

    + App.tsx: 根组件

    + index.tsx : 入口组件

    + router.tsx: 路由组件

    + .env .env.development .env.production 环境变量配置文件，使用Process.ENV 设置的变量

4. 图片模块定义

    使用create-react-app 创建的项目在react-scripts 已经定义了

    如果是自己搭建的项目，则需要自己定义typescript 图片声明


            /// <reference types="node" />
            /// <reference types="react" />
            /// <reference types="react-dom" />

            declare namespace NodeJS {
                interface ProcessEnv {
                    readonly NODE_ENV: 'development' | 'production' | 'test';
                    readonly PUBLIC_URL: string;
                }
            }

            declare module '*.bmp' {
                const src: string;
                export default src;
            }

            declare module '*.gif' {
                const src: string;
                export default src;
            }

            declare module '*.jpg' {
                const src: string;
                export default src;
            }

            declare module '*.jpeg' {
                const src: string;
                export default src;
            }

            declare module '*.png' {
                const src: string;
                export default src;
            }

            declare module '*.webp' {
                const src: string;
                export default src;
            }

            declare module '*.svg' {
                import * as React from 'react';

                export const ReactComponent: React.FunctionComponent<React.SVGProps<
                    SVGSVGElement
                > & { title?: string }>;

                const src: string;
                export default src;
            }

            declare module '*.module.css' {
                const classes: { readonly [key: string]: string };
                export default classes;
            }

            declare module '*.module.scss' {
                const classes: { readonly [key: string]: string };
                export default classes;
            }

            declare module '*.module.sass' {
                const classes: { readonly [key: string]: string };
                export default classes;
            }

5. react-i18next i18next 配置预言切换

            yarn add  react-i18next i18next --save

6. 配置tsconfig.json

+ 添加"baseUrl": "src",解决引用路径中../../ 这样的路径

+ 添加： "resolveJsonModule": true， 运训引入json 文件，因为abi 是json 的