React X工程目录说明

工程目录图

整体结构说明

文件名称	文件说明
config	配置文件
dist	打包文件
environments	用来配置数据库信息
mock	存放假数据的文件
node_modules	npm 安装的第三方依赖
public	公用文件部分也是静态文件CSS、JS、IMG、字体、入口文件等文件存放位置
scripts	弹出react-scripts的配置文件
src	存放业务源码
.eslintconfig	默认配置
package.json	项目包文件（node_modulesd 的依赖是根据 package.json 来下载的）
tsconfig.json	TypeScript 配置文件

src下的目录说明

文件名程	文件说明
assets	静态资源文件，放一些css文件和image图片
common	定义共通的状态和方法
components	组件文件
components—>common	components文件夹下的自定义共通组件，比如头部画面，底部画面等
components—>error	components文件夹下的error画面
components—>menu	components文件夹下的menu首页
components—>page	components文件夹下的page 画面文件
hooks	自定义hook,复用的方法
redux	redux全局状态管理器
route	工程的路由文件
utils	工程的共通文件
App.tsx	根文件
index.tsx	工程的入口文件

• 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 共通的组件 如图所示
      

    • 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 画面文件
      

  • hooks 自定义hook
    

  • redux 全局状态管理器

  • route 路由文件

  • utils 共用的方法