\n\n`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.\n\n# Usage\n\n- open the terminal;\n- `npx create-react-app PROJECT_NAME --template ui5-webcomponents-react-seed`;\n- cd into `PROJECT_NAME`;\n- run `node post_create.js` to add **Husky** and move some dependencies to devDependencies (both are limitations of `create-react-app`)\n- (no need to run `yarn install` since it already installs it for you);\n- run the available scripts.\n\nPS.: It is important to add the `--template ui5-webcomponents-react-seed` at the end to get our template.\n\n# Configuration Included\n\n- JEST Up & Runnning;\n\n- ESLint & EditorConfig Up & Running;\n\n- CommitLint Up & Running;\n\n- Enviroment Variables Up & Running;\n\n- Internalization Up & Running;\n\n- PR Template;\n\n- IE Support;\n\n- Multiple Scripts.\n\n# Engine & Samples Included\n\n- Fallback Engine (``, `` and ``);\n\n- MockServer Engine (w/ `json-server`);\n\n- API HTTP Request Engine (w/ `Request`, `APIProvider`, `BrowserProvider`);\n\n- Permission Engine (w/ `RouteValidator` and `ComponentValidator`).\n\n- Pagination Engine (w/ custom hook `usePaginatedGet`).\n\n- ToDo Form Edition w/ `yup` and `formik`.\n\n# Hooks Included\n\n- `useRequest`: Which includes `get`, `post`, `patch`, `delete`, `put` HTTP helpers;\n\n- `useAuthority`: Which includes `hasAccess` helpers.\n\n# Project Structure\n\nFollowing 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).\n\nThe only custom change we have incremented were the Custom Components and the folder for each project containing the `tests` artefacts.\n\n# Scripts Included\n\nIn the project directory, you can run:\n\n## Up & Running\n\n### `yarn start`\n\nRuns the app in the development mode @ [http://localhost:3000](http://localhost:3000).\n\n⚠️ It requires an AppRouter or a BackEnd up & running @ `:/api`.\n\n### `yarn mock`\n\nRuns the app in the development mode @ [http://localhost:3001](http://localhost:3000) w/ json-server.\n\n## Testing\n\n### `yarn test`\n\nLaunches the test runner in the interactive watch mode.\n\n### `yarn test:ci`\n\nExecutes the test runner without the interactive watch mode.\n\n### `yarn test:coverage`\n\nExecutes the test runner and generates the report.\n\n## Checks\n\n### `yarn lint`\n\nChecks all the files of the project according to the `.eslintrc.js` pre stablished configuration.\n\n### `yarn lint:fix`\n\nFixes all the files of the project according to the `.eslintrc.js` pre stablished configuration.\n\n### `yarn prettier`\n\nChecks all the files of the project according to the `.prettierrc` pre stablished configuration.\n\n### `yarn prettier:fix`\n\nFixes all the files of the project according to the `.prettierrc` pre stablished configuration.\n\n## Deploy\n\n### `yarn build`\n\nBuilds the app for production to the `build` folder.\n\n# Suggested Extensions\n\n### [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)\n\nThis will help you when building the JSX files by renaming the closing for you.\n\n### [EditorConfig](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig)\n\nThis will help you to use the defined coding style at the `.editoronfig` file during development.\n\n### [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)\n\nThis will help you to use the defined coding style at the `.eslintrc` file during development.\n\n### [Jest](https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest) & [Jest Runner](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)\n\nThis will help you run and debug your `*.test.js` file during file during test-development.\n\n### [vscode-icons](https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons)\n\nThis will help you better see the folders and files icons according to its extensions/subject.\n\n### [prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)\n\nThis will enforces a consistent style by parsing your code and re-printing it with its own rules, wrapping code when necessary.\n\n# Dependencies Included\n\n### `types/jest`\n\nAutocomplete/Intelissense your testing methods from the JEST lib.\n\n### `react-query`\n\nUsed to manipulate async request, data fetching, cache and more (no redux / saga anymore).\n\n[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).\n\n### `react-helmet`\n\nUsed to manpilate DOM attributes through JSX such as ``.\n\n### `react-i18next`\n\nUsed to translate strings and text in the application following the Internationalization pattern.\n\n### `i18next-browser-languagedetector`\n\nUsed to identify the browsers culture and change the applications text accordingly.\n\n### `react-device-detect`\n\nUsed to identify the device, browser, ratios and etc.\n\n### `react-query-devtools`\n\nUsed to help developers during the React Query information flow.\n\n### `commitlint`\n\nUsed to check the commits before actually commits.\n\n### `env-cmd`\n\nUsed for embed the enviroment variables during the API URL build.\n\n### `husky`\n\nUsed to provide a checker before actions.\n\n### `nodemon`\n\nUsed to update the files without restarting the server.\n\n### `npm-run-all`\n\nUsed to run multiple commands without worrying about OS syntax.\n\n### `react-app-polyfill`\n\nUsed to support old browsers.\n\n### `jest & jest-enviroment-jsom-sixteen`\n\nUsed to support jest and its scripts with the new engine.\n\n# Contributing\n\nTake a look into our Kanban Board [here](https://github.com/LuisValgoi/ui5-webcomponents-react-seed/projects/1?fullscreen=true).\n","readmeFilename":"README.md","homepage":"https://github.com/LuisValgoi/ui5-webcomponents-react-seed#readme","repository":{"type":"git","url":"git+https://github.com/LuisValgoi/ui5-webcomponents-react-seed.git"},"bugs":{"url":"https://github.com/LuisValgoi/ui5-webcomponents-react-seed/issues"}}
![\"UI5](\"https://user-images.githubusercontent.com/8363610/93131219-1e36c300-f6aa-11ea-90e6-581d3f8a4491.png\")
\n
\n \n \n 
\n \n \n ![\"\"](\"https://img.shields.io/npm/dm/cra-template-ui5-webcomponents-react-seed.svg\")
\n \n