react

This is a generator for creating Genesis themed react application templates.

Usage

Prerequisites

For Using this package into your app, to create react micro apps, please follow the below steps

• Install this npm package to your repo first

• yarn add @genesisx/react

• or run

• npm install @genesisx/react

• Now follow the either of the two modes to use this generator

Usage Via NX Console

• Generate app using nx console
  • Goto generate > search for @genesisx/react
  • Fill in the form
    • name: name of the application
    • style: select the type of styling to be used in the application
    • directory: enter the directory of the new application where it is required to be created
    • classComponent: select this if class component will be used instead of the default functional component
    • e2eTestRunner: select the test runner that if required from the dropdown
    • globalCss: select this if the component to be generated is required to be with .css/.scss instead of .module.css/.module.scss
    • js: select this if java script is to be used instead of type script
    • linter: choose the type of linter from the dropdown
    • pascalCaseFiles: select this to use pascal case in component file names
    • routing: select this if routing is to be used in the application
    • setParserOptionsProject: select this to configure the ESLint "parserOptions.project" option
    • skipFormat: select this to skip formatting of files
    • skipWorkspaceJson: select this to skip updating workspace.json with default options based on values provided to this app
    • standaloneConfig: select this to split the project configuration into /project.json rather than including it inside workspace.json
    • strict: select this to create an application with strict mode and strict type
    • tags: enter the tags to be used for linting
    • unitTestRunner: choose the type of unit test runner if required

Usage Via Command line

• If NX Console doesnt work, alternatively use this command

• nx generate @genesisx/react:templated <name-of-react-app> --no-interactive

• or run the command without parameters nx generate @genesisx/react:templated and supply the arguments as asked.

• If nx is not already installed then install it using npm install -g nx

• On the creation of above application we can also create a component, component cypress spec, component story, hook, library, redux slice, stories, storybook configuration and storybook migrate defaults using the nx console in genesis.

Contribution

Running build and lints

Run nx lint react to execute the lint checks on this package.

Run nx build react to build this package.

Run nx test react to execute the unit tests via Jest.

Publish to NPM

To publish the package you must first be logged into NPM (npm login) then run this command from the root of the project.

• Make sure the package name in package.json should start with @genesisx/
• Also use the correct version number in package.json same will be used for the published package.
• Use your NPM js credentials (Publicis Sapient) with publish rights
• Verify the package at https://www.npmjs.com/settings/genesisx/packages

npm publish dist/packages/react --access public

Local development and testing

If you're going to locally developm and run/test this package you need to build it and copy into node_modules with every change. You can simply do this by running a bash command below:

yarn nx run react:build && cp -R dist/packages/react/ node_modules/@genesisx/react/