ui5-webcomponents-react-seed

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #llm #golang #go #android #deep-learning #awesome-list #pytorch #mcp #ios #open-source

ui5-webcomponents-react-seed

(★ 12)

Seed of UI5 Web Components for React

ui5-webcomponents-react-seed Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

`ui5-webcomponents-react-seed` decrease’s the bootstrap time spent on new projects, POCs or MVPs which uses **React + UI5 WebComponents React** by leveraging several out-of-the-box components, scripts & configurations.

# Warning

⚠️ The repo was moved to the SAP UI5 WebComponents for React repository ⚠️

For more info, check this link [here](https://github.com/SAP/ui5-webcomponents-react#creating-a-new-react-app-based-on-our-seed).

# Usage

- open the terminal;
- `npx create-react-app PROJECT_NAME --template ui5-webcomponents-react-seed`;
- cd into `PROJECT_NAME`;
- run `node post_create.js` to add **Husky** and move some dependencies to devDependencies (both are limitations of `create-react-app`)
- (no need to run `yarn install` since it already installs it for you);
- run the available scripts.

PS.: It is important to add the `--template ui5-webcomponents-react-seed` at the end to get our template.

# Configuration Included

- JEST Up & Runnning;

- ESLint & EditorConfig Up & Running;

- CommitLint Up & Running;

- Enviroment Variables Up & Running;

- Internalization Up & Running;

- PR Template;

- IE Support;

- Multiple Scripts.

# Engine & Samples Included

- Fallback Engine (`<ErrorBoundary />`, `<NotFound />` and `<Error />`);

- MockServer Engine (w/ `json-server`);

- API HTTP Request Engine (w/ `Request`, `APIProvider`, `BrowserProvider`);

- Permission Engine (w/ `RouteValidator` and `ComponentValidator`).

- Pagination Engine (w/ custom hook `usePaginatedGet`).

- ToDo Form Edition w/ `yup` and `formik`.

# Hooks Included

- `useRequest`: Which includes `get`, `post`, `patch`, `delete`, `put` HTTP helpers;

- `useAuthority`: Which includes `hasAccess` helpers.

# Project Structure

Following one of the several recommendations for structuring files on a React based project, the seed use: [Grouping by file type](https://reactjs.org/docs/faq-structure.html#grouping-by-file-type).

The only custom change we have incremented were the Custom Components and the folder for each project containing the `tests` artefacts.

# Scripts Included

In the project directory, you can run:

## Up & Running

### `yarn start`

Runs the app in the development mode @ [http://localhost:3000](http://localhost:3000).

⚠️ It requires an AppRouter or a BackEnd up & running @ `<domain>:<port>/api`.

### `yarn mock`

Runs the app in the development mode @ [http://localhost:3001](http://localhost:3000) w/ json-server.

## Testing

### `yarn test`

Launches the test runner in the interactive watch mode.

### `yarn test:ci`

Executes the test runner without the interactive watch mode.

### `yarn test:coverage`

Executes the test runner and generates the report.

## Checks

### `yarn lint`

Checks all the files of the project according to the `.eslintrc.js` pre stablished configuration.

### `yarn lint:fix`

Fixes all the files of the project according to the `.eslintrc.js` pre stablished configuration.

### `yarn prettier`

Checks all the files of the project according to the `.prettierrc` pre stablished configuration.

### `yarn prettier:fix`

Fixes all the files of the project according to the `.prettierrc` pre stablished configuration.

## Deploy

### `yarn build`

Builds the app for production to the `build` folder.

# Suggested Extensions

### [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)

This will help you when building the JSX files by renaming the closing for you.

### [EditorConfig](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig)

This will help you to use the defined coding style at the `.editoronfig` file during development.

### [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)

This will help you to use the defined coding style at the `.eslintrc` file during development.

### [Jest](https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest) & [Jest Runner](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)

This will help you run and debug your `*.test.js` file during file during test-development.

### [vscode-icons](https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons)

This will help you better see the folders and files icons according to its extensions/subject.

### [prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

This will enforces a consistent style by parsing your code and re-printing it with its own rules, wrapping code when necessary.

# Dependencies Included

### `types/jest`

Autocomplete/Intelissense your testing methods from the JEST lib.

### `react-query`

Used to manipulate async request, data fetching, cache and more (no redux / saga anymore).

[Tutorial Link](https://www.youtube.com/watch?v=yccbCol546c), [Random Post](https://blog.bitsrc.io/how-to-start-using-react-query-4869e3d5680d) and [Creator Official Video](https://www.youtube.com/watch?v=seU46c6Jz7E).

### `react-helmet`

Used to manpilate DOM attributes through JSX such as `<head>`.

### `react-i18next`

Used to translate strings and text in the application following the Internationalization pattern.

### `i18next-browser-languagedetector`

Used to identify the browsers culture and change the applications text accordingly.

### `react-device-detect`

Used to identify the device, browser, ratios and etc.

### `react-query-devtools`

Used to help developers during the React Query information flow.

### `commitlint`

Used to check the commits before actually commits.

### `env-cmd`

Used for embed the enviroment variables during the API URL build.

### `husky`

Used to provide a checker before actions.

### `nodemon`

Used to update the files without restarting the server.

### `npm-run-all`

Used to run multiple commands without worrying about OS syntax.

### `react-app-polyfill`

Used to support old browsers.

### `jest & jest-enviroment-jsom-sixteen`

Used to support jest and its scripts with the new engine.

# Contributing

Take a look into our Kanban Board [here](https://github.com/LuisValgoi/ui5-webcomponents-react-seed/projects/1?fullscreen=true).

ui5-webcomponents-react-seed

ui5-webcomponents-react-seed Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

ui5-webcomponents-react-seed

ui5-webcomponents-react-seed Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README