ReactJS

This package is designed to create templates for GenesisX-themed React-based applications.

Usage

To create ReactJS microApps, you can follow the steps outlined below:

Pre-requisites

• Make sure you are on correct version of Nodejs 18.x and Nx Version 16.6

  node --version
  nx --version

• To start with, create a new GenesisX workspace in an empty directory, run below command, of if you already have the workspace ready , please skip this step.

  npx @genesisx/create-workspace
  • Provide the requested parameters
  • Provide name to your workspace like test-workspace
  • Move to the created workspace - cd test-workspace
  • Install the packages

    yarn install
• Install ReactJS package

  yarn add @genesisx/react
• Now follow either of the two modes(mentioned below) to use this generator - either the Nx Console or CLI

Via Nx Console

Generate app using Nx console

• Goto Generate > search for @genesisx/react:application
• Fill in the form
  • appName: Name of the app
  • port: Port number the app should be served on
  • docs: Full https url to the docs

Via Command Line

To integrate this package in your application, use below command:

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

Features

On the creation of above application, using the Nx console in GenesisX, we can also

• Create a component
• Component cypress spec
• Component story
• Hook
• Library
• Redux slice
• Stories
• Storybook configuration and
• Storybook migrate defaults

Testing the app

You can test the newly created app using the Nx Serve command

nx serve <appName>

Running build and lints

To execute the lint checks on this package, run

nx lint next

To build this package, run

nx build next

To execute the unit tests via Jest, run

nx test next

More details & Troubleshooting

Visit the troubleshooting guide for common issues or refer to the readme.md file located within the package folder

<workspace-folder>/node_modules/@genesisx/react/README.md