To deacrease the boostrap time spent on projects which uses React + UI5 WebComponents React.
- 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.
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).
-
JEST Up & Runnning.
-
ESLint & EditorConfig Up & Running.
-
CommitLint Up & Running.
-
Enviroment Variables Up & Running.
-
Internalization Up & Running.
-
PR Template.
-
IE Support.
-
Multiple Scripts.
-
Fallback Engine (
<ErrorBoundary />
,<NotFound />
and<Error />
). -
MockServer Engine (w/
json-server
). -
HTTP Request Engine (w/
Request
andURLProvider
). -
Permission Engine (w/
RouteValidator
andComponentValidator
)
-
useBrowser
: Which identifies the user browser. -
useIsMobile
: Which identifies the user device perspective. -
useRequest
: Which includesget
,post
,patch
,delete
,put
HTTP helpers. -
useAuthority
: Which includeshasAccess
helpers.
In the project directory, you can run:
Runs the app in the development mode @ http://localhost:3000.
Runs the app in the development mode @ http://localhost:3001 w/ json-server.
Launches the test runner in the interactive watch mode.
Executes the test runner without the interactive watch mode.
Executes the test runner and generates the report.
Builds the app for production to the build
folder.
This will help you when building the JSX files by renaming the closing for you.
This will help you to use the defined coding style at the .editoronfig
file during development.
This will help you to use the defined coding style at the .eslintrc
file during development.
This will help you run and debug your *.test.js
file during file during test-development.
This will help you better see the folders and files icons according to its extensions/subject.
Autocomplete/Intelissense your testing methods from the JEST lib.
Used to manipulate async request, data fetching, cache and more (no redux / saga anymore).
Tutorial Link, Random Post and Creator Official Video.
Used to manpilate DOM attributes through JSX such as <head>
.
Used to translate strings and text in the application following the Internationalization pattern.
Used to identify the browsers culture and change the applications text accordingly.
Used to check the commits before actually commits.
Used for embed the enviroment variables during the API URL build.
Used to provide a checker before actions.
Used to update the files without restarting the server.
Used to run multiple commands without worrying about OS syntax.
Used to support old browsers.
Used to support jest and its scripts with the new engine.