React X工程目录说明

简介: React X工程目录说明
工程目录图


6617e310ed7ec5cdebf1f2638b38891c.jpg


整体结构说明


image.png


src下的目录说明


image.png


src


  • assets 静态资源文件
  • common 定义共通的状态和数据,代码如下


    import { PAGEID } from "~/route/pageConfig";
    export enum ENV {
    DEVELOPMENT = 'development',
    PRODUCTION = 'production',
    TEST = 'test',
    }
    export const Config = {
      urlApi: '/HAG4030A',
      illegal: `^(?![\\s\\S]*(\\\\n)|[\\s\\S]*(\\\\t)|[\\s\\S]*(\\t))[\\s\\S]*$`,
      illegalCharacter: `^(?![\\s\\S]*(\\\\n)|[\\s\\S]*(\\\\t)|[\\s\\S]*(\\t)[\\s\\S]*(\\n))[\\s\\S]*$`,
      hankaku: `ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲンァィゥェォッャュョー゙゚ 。、!#%&()*+,-./:;<=>?@[]^_\`{|}~・「」$"'\\r\n`,
      youon: 'ァィゥェォャュョッ',
      pattarn: /^1[3456789]\d{9}$/,
      YYYYMMDD: /^([0-9]{4})\/([0-1][0-9])\/([0-3][0-9])$/,
      YYYYMM: /^([0-9]{4})\/([0-1][0-9])$/,
      YYMMDD: /^([0-9]{2})\/([0-1][0-9])\/([0-3][0-9])$/,
      YYMM: /^([0-9]{2})\/([0-1][0-9])$/,
      MMDD: /^([0-1][0-9])\/([0-3][0-9])$/,
      ROLLIST: /^\[(\{"rolCd":"[^({|}|,|")]+","rolKj":"[^({|}|,|")]+","shmFl":"[^({|}|,|")]+","hnbTenKb":"[^({|}|,|")]+"\},)*(\{"rolCd":"[^({|}|,|")]+","rolKj":"[^({|}|,|")]+","shmFl":"[^({|}|,|")]+","hnbTenKb":"[^({|}|,|")]+"\}\])$/g,
      yyyymmdd: /^([0-9]{4})([0-1][0-9])([0-3][0-9])$/,
      yyyymm: /^([0-9]{4})([0-1][0-9])$/,
      yymmdd: /^([0-9]{2})([0-1][0-9])([0-3][0-9])$/,
      yymm: /^([0-9]{2})([0-1][0-9])$/,
      mmdd: /^([0-1][0-9])([0-3][0-9])$/,
      tel: /^(\+?81|0)\d{1,4}[ -]?\d{1,4}[ -]?\d{4}$/,
    };
    export const Constants = {
      STORAGE_PREFIX: 'persist:',
      STORAGE_ROOT: 'root',
      STORAGE_BUSSINESS_COMMON: 'busesCommon',
      STORAGE_KEY_CLEAR_FLG: 'clearFlg',
      STORAGE_CLEAR_FLG_VAL_TRUE: '1',
      STORAGE_KEY_DIRECT_URL_ACCESS: 'direct_url_access',
      STORAGE_KEY_GMN_SNI_FLG: 'gmn_sni_flg',
      STR_TRUE:'true'
    }
    export const singlePage: string[] = [
      PAGEID.XARPAGE0010
    ]
    export const ButtonState = {
      // 照会
      BUTTEN_DO_REF_BTN: 'doRefBtn',
      // 検索
      BUTTEN_DO_SRH_BTN: 'doSrhBtn',
      // 履歴
      BUTTEN_GO_RIREKI_BTN: 'goRirekiBtn',
      // 修正
      BUTTEN_DO_UPD_BTN: 'doUpdBtn',
      // 戻る
      BUTTEN_BACK_BTN: 'backBtn',
      // 一覧
      BUTTEN_GO_ICHIRAN_BTN: 'goIchiranBtn',
    }


components 组件文件

  • common 共通的组件 如图所示


ec9fbb3f4960d5f7471d67b9667e77ec.jpg


  • error 报错的画面


import * as React from 'react';
export default React.memo(function NotFoundPage() {
  return (
   <> 
      <h3 style={{textAlign:'center'}}>
      <span style={{color:'#33717f'}}>システムエラー画面 -404-</span>
    </h3>
    <h4>エラー通知</h4>
    <table>
      <tr>
        <td>システムエラーが発生しました。システム管理者に連絡してください。</td>
      </tr>
    </table>
    </>;
  )
});


  • menu 首页
  • page 画面文件


600a14b968a067b1fa840628b1ffacef.jpg


hooks 自定义hook


a96de1dce1adcc7bed2446a18ed5d6e2.jpg


  • redux 全局状态管理器
  • route 路由文件
  • utils 共用的方法
相关文章
|
前端开发 数据处理 API
react中的目录规范
react中的目录规范
97 1
|
前端开发
React框架课时二认识项目的结构目录一
React框架课时二认识项目的结构目录一
172 0
|
前端开发
【React工作记录四十六】react中的目录规范
【React工作记录四十六】react中的目录规范
145 0
|
资源调度 前端开发 JavaScript
React默认工程的目录说明
React默认工程的目录说明
React默认工程的目录说明
|
前端开发
React中祖孙组件嵌套传值(案例分析说明)
本文主要讲React中祖孙组件嵌套传值
685 0
React中祖孙组件嵌套传值(案例分析说明)
|
资源调度 前端开发
使用react脚手架快速搭建项目以及项目文件的介绍(目录文件的功能及作用)
本篇文章教大家使用脚手架搭建react的项目,对于新建的react项目,项目目录里的文件都是干什么的,有什么作用呢?
332 0
使用react脚手架快速搭建项目以及项目文件的介绍(目录文件的功能及作用)
|
存储 前端开发 JavaScript
React有状态组件以及事件处理的相关(案例说明,一看就会)
今天给大家带来React入门——有状态组件和事件处理。
189 0
React有状态组件以及事件处理的相关(案例说明,一看就会)
|
前端开发
React工作76:react 主题开发目录
React工作76:react 主题开发目录
379 0
React工作76:react 主题开发目录
|
前端开发
react使用Context方法实现组件通信(案例说明嵌套传值+详细用法总结)
之前的文章我们介绍了在react中使用props实现组件通信,比如父子,祖孙通信,但是使用props一层层传递的时候还是很麻烦的,那么今天这篇文章就来介绍新的用法——使用Context实现组建通信
375 0
|
前端开发 JavaScript 数据库
react + Ant Design + 支持 markdown 的 blog-react 项目的文档说明
react + Ant Design + 支持 markdown 的 blog-react 项目的文档说明
315 0
react + Ant Design + 支持 markdown 的 blog-react 项目的文档说明