React X工程目录说明

世间万物皆对象

发布于 2024-03-20 20:09:30

900

发布于 2024-03-20 20:09:30

文章被收录于专栏：startstart

整体结构说明

文件名称	文件说明
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>
	  </>;
	)
});