使用React（与Redux）
本部分引用与Redux一起使用的JavaScript库React。
项目结构
您可以在src/main/webapp下找到JHipster前端代码，该代码与Piotr Witek React样式指南密切相关。
如果您对我们的应用程序结构、文件名、TypeScript约定有任何疑问，请先阅读本指南。
对于React路由，我们遵循破折号命名约定，以便URL干净且一致。 当您生成实体时，将根据此约定生成路由名称，路由URL和REST API端点URL，并且实体名称也会在需要时自动复数。
这是主要的项目结构：
webapp
├── app - Your application
│ ├── config - General configuration (redux store, middleware, etc.)
│ ├── entities - Generated entities
│ ├── modules - Main components directory
│ │ ├── account - Account related components
│ │ ├── administration - Administration related components
│ │ ├── home - Application homepage
│ │ └── login - Login related components
│ ├── shared - Shared elements such as your header, footer, reducers, models and util classes
│ ├── app.scss - Your global application stylesheet if you choose the Sass option
│ ├── app.css - Your global application stylesheet
│ ├── app.tsx - The application main class
│ ├── index.tsx - Index script
│ ├── routes.tsx - Application main routes
│ └── typings.d.ts -
├── i18n - Translation files
├── static - Contains your static files such as images and fonts
├── swagger-ui - Swagger UI front-end
├── 404.html - 404 page
├── favicon.ico - Fav icon
├── index.html - Index page
├── manifest.webapp - Application manifest
└── robots.txt - Configuration for bots and Web crawlers
使用实体子生成器创建名为Foo的新实体会在src/main/webapp下生成以下前端文件：
webapp
├── app
│ └── entities
│ ├── foo - CRUD front-end for the Foo entity
│ │ ├── foo-delete-dialog.tsx - Delete dialog component
│ │ ├── foo-detail.tsx - Detail page component
│ │ ├── foo-dialog.tsx - Creation dialog component
│ │ ├── foo.reducer.ts - Foo entity reducer
│ │ ├── foo.tsx - Entity main component
│ │ └── index.tsx - Entity main routes
│ └── index.tsx - Entities routes
└── i18n - Translation files
├── en - English translations
│ ├── foo.json - English translation of Foo name, fields, ...
└── fr - French translations
└── foo.json - French translation of Foo name, fields, ...
请注意，默认语言翻译将基于您在应用生成过程中选择的语言。在此处仅显示’en’和’fr’以进行演示。
Redux
Redux是一个用于应用程序状态管理的开源JavaScript库。它与React一起使用来管理React组件的状态。
Redux提供了一个对象store，用于存储应用程序的整个状态。 要访问此存储并因此更新状态组件，唯一的方法是调度描述请求更新的actions， 然后reducers将定义如何响应这些操作来更新状态。
这是reducers的示例：
export const ACTION_TYPES = {
FETCH_FOOS: 'foo/FETCH_FOOS',
};
const initialState = {
loading: false,
foos: [],
updateSuccess: false,
updateFailure: false
};
// Reducer
export default (state = initialState, action) => {
switch (action.type) {
case REQUEST(ACTION_TYPES.FETCH_FOOS):
return {
...state,
updateSuccess: false,
updateFailure: false,
loading: true
};
case FAILURE(ACTION_TYPES.FETCH_FOOS):
return {
...state,
loading: false,
updateSuccess: false,
updateFailure: true
};
case SUCCESS(ACTION_TYPES.FETCH_FOOS):
return {
...state,
loading: false,
updateSuccess: true,
updateFailure: false,
foos: action.payload.data
};
default:
return state;
}
};
为了访问您的商店并更新当前应用程序状态，您需要如前所述，将操作分派到商店。动作是JavaScript对象，并且必须具有描述动作将要执行的操作的type，通常，它们还具有与要传递给存储的数据相对应的payload。
这是访问商店的操作：
const apiUrl = SERVER_API_URL + '/api/foos';
// Action
export const getFoos = () => ({
type: ACTION_TYPES.FETCH_FOOS,
payload: axios.get(apiUrl)
});
上述动作表明我们要通过发送GET请求来检索所有Foo对象。操作类型将匹配。 请注意，export关键字用于使连接的组件能够在必要时使用该操作（例如，每次更新组件时）。
鉴权
Jhipster使用React路由器来组织应用程序的不同部分。
当涉及需要身份验证的路由时，将使用生成的PrivateRoute组件。该组件将阻止任何未经身份验证的用户访问路由。
这是PrivateRoute用法的示例：
const Routes = () => (
<div className="view-routes">
<Route exact path="/" component={Home} />
<Route path="/login" component={Login} />
<PrivateRoute path="/account" component={Account} />
</div>
);
如您所见，未经身份验证的用户可以访问/和/login，但是访问/account需要登录。
请注意，PrivateRoute使用authentication.isAuthenticated存储值来了解用户是否已通过身份验证。
通知系统
JHipster使用react-toastify为通知系统提供告警。
默认情况下，每当创建/更新/删除实体时，JHipster都会显示成功通知，而从响应中捕获到错误时，JHipster将显示错误通知。
React JHipster库
react-jhipster库为生成的应用程序提供实用程序和通用服务。它也处理i18n。