使用React
来源: |
时间:2018-11-09
|
|

使用React

本节引用Redux一起使用的JavaScript库React

项目结构

可以src/main/webappPiotr Witek React风格指南下找到JHipster客户端代码,并紧随其后

如果您对我们的应用程序结构,文件名,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是JavaScript的可预测状态容器。它与React一起用于管理React组件的状态。

基本上,Redux提供了一个用于存储应用程序整个状态的对象要访问此存储并因此更新状态组件,唯一的方法是分派 描述请求更新这一事实的操作,然后reducers将定义状态的更新方式以响应这些操作。

以下是reducer的示例:

export const ACTION_TYPES = {
  FETCH_FOOS: 'foo/FETCH_FOOS',};const initialState = {
  loading: false,
  foos: [],
  updateSuccess: false,
  updateFailure: false};// Reducerexport 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对象,并且必须具有描述操作将要执行的操作类型,并且通常它们还具有与要传递给存储的数据相对应有效负载

以下是访问商店的操作:

const apiUrl = SERVER_API_URL + '/api/foos';// Actionexport 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库

反应-jhipster LIB提供了生成的应用程序的实用程序和通用服务。它也处理i18n。


J

提交
查看更多评论
没有更多评论