# Marspad

**Repository Path**: wei-junmin/marspad

## Basic Information

- **Project Name**: Marspad
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-03-17
- **Last Updated**: 2022-04-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# marspads项目文档

使用 [Create React App](https://github.com/facebook/create-react-app) `React`官方脚手架搭建

## 使用到的技术栈

* __React__ 
* __Typescript__
* __react-redux__

    > react状态管理工具
* __@mui/material__

    > react的ui组件库
* __@emotion/styled__

    > 搭配ui库使用的css样式工具
* __umi-request__

    > 基于fetch封装的网络请求工具
* __web3__

    > 区块链货币工具包

## 目录结构

- src
    - assets

        静态资源目录
    - layout

        布局组件目录
    - components

        公用组件目录
        - CountDown
            
            倒计时组件

            ![倒计时组件](./md/CountDown.jpg)
        - Footer

            页面底部组件

            ![页面底部组件](./md/Footer.jpg)
        - GhostButton

            幽灵按钮组件
            ![幽灵图标按钮组件](./md/GhostButton.jpg)
        - GhostIconButton

            幽灵图标按钮组件

            ![幽灵图标按钮组件](./md/GhostIconButton.jpg)
        - Header

            公共头部组件

            ![公共头部组件](./md/Header.jpg)
        - Icons

            自定义图标组件
        - MediaContext

            检测屏幕尺寸的`Context`组件
        - PrimaryButton

            主题色按钮组件

            ![主题色按钮组件](./md/PrimaryButton.jpg)
    - pages

        页面级别的组件目录
        - Index

            首页
            - FirstScreen

                首屏内容
            - LaunchContainer

                Apply to Launch内容
            - Partnership

                友链内容
            - TabList

                活动商品tab内容
                - CurrencyCard

                    商品组件
                - StyledTabs

                    Tabs组件
        - Market/Detail

            详情页
    - services

        配置接口的目录，统一放置在此
    - store

        配置状态管理的目录
    - utils

        放置一些全局工具方法的目录
    - App.tsx

        顶级组件，用来放置状态管理组件、路由组件等根组件
    - index.tsx

        项目入口文件
- craco.config.js

    对 `Create React App` 脚手架的自定义配置


## 脚本命令

### `yarn start`

使用开发环境运行项目.\
并在浏览器中打开 [http://localhost:3000](http://localhost:3000) .

如果对项目代码进行编辑，页面将重新加载.\
你还将在控制台中看到任何 lint 错误。

### `yarn build`

将用于生产的应用程序构建到 `build` 文件夹。\
它在生产模式下正确捆绑 React 并优化构建以获得最佳性能。

构建被缩小，文件名包括哈希。\
您的应用已准备好部署！

有关详细信息，请参阅有关 [部署](https://facebook.github.io/create-react-app/docs/deployment) 的部分.

## 学习更多

您可以在 [Create React App文档](https://facebook.github.io/create-react-app/docs/getting-started) 中了解更多信息。

要学习 React，请查看 [React 文档](https://reactjs.org/)。