Goal

To deacrease the boostrap time spent on projects which uses React + UI5 WebComponents React.

Usage

open the terminal;
go to a random folder you want;
npx create-react-app folderrr --template ui5-webcomponents-react-seed;
cd into folderrr;
run yarn install;
run yarn test:ci or any other;
have fun with the other scripts;

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

Getting Started

Once you have created your project using the ui5-webcomponents-react-seed template, you can start by:

yarn install: To install this project dependencies.
yarn mock: To run this project with json-server.
yarn start: To run this project with backend (⚠️ currently not supported).

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 Included

Fallback Engine (<ErrorBoundary />, <NotFound /> and <Error />).
MockServer Engine (w/ json-server).
HTTP Request Engine (w/ Request and URLProvider).
Permission Engine (w/ RouteValidator and ComponentValidator)

Hooks Included

useBrowser: Which identifies the user browser.
useIsMobile: Which identifies the user device perspective.
useRequest: Which includes get, post, patch, delete, put HTTP helpers.
useAuthority: Which includes hasAccess helpers.

Scripts Included

In the project directory, you can run:

`yarn start`

Runs the app in the development mode @ http://localhost:3000.

`yarn mock`

Runs the app in the development mode @ http://localhost:3001 w/ json-server.

`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.

`yarn build`

Builds the app for production to the build folder.

Suggested Extensions

Auto Rename Tag

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

EditorConfig

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

ESLint

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

Jest & Jest Runner

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

vscode-icons

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

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, Random Post and Creator Official Video.

`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.

`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.

lpohren / react-snapshot-demo Goto Github PK

react-snapshot-demo's Introduction

Goal

Usage

Getting Started

Configuration Included

Engine Included

Hooks Included

Scripts Included

yarn start

yarn mock

yarn test

yarn test:ci

yarn test:coverage

yarn build

Suggested Extensions

Jest & Jest Runner

Dependencies Included

types/jest

react-query

react-helmet

react-i18next

i18next-browser-languagedetector

commitlint

env-cmd

husky

nodemon

npm-run-all

react-app-polyfill

jest & jest-enviroment-jsom-sixteen

Recommend Projects

Recommend Topics

Recommend Org