{"revision":"c10276e953456835cdbb1f3a60d58ae1980be353","document":{"id":2931,"path":"application-development/ui-development-react.md","title":"User interface development with React","bundle":null,"doc_type":null,"release":"australia","body":"\n# User interface development with React\n\nDevelop a user interface \\(UI\\) with the React library to build a full-stack application in source code.\n\n## Overview of UI development with React\n\nReact is an industry-standard web framework for building UI components that you use to develop and render custom user interfaces. A React component is a self-contained, reusable JavaScript function, such as a button, and supports JavaScript \\(JS/JSX\\) and TypeScript \\(TS/TSX\\) syntax. For general information about React, see the [React documentation](https://react.dev/learn) on the react.dev website.\n\nWith the ServiceNow IDE or ServiceNow SDK, you can use React in an application to create a UI page in ServiceNow Fluent code. The ServiceNow Fluent UI Page API refers to an HTML entry point \\(`index.html`\\) that loads the page at the endpoint provided. After building and installing the application on an instance, the static assets are stored in the appropriate tables. For an example of a React application in source code, see the [ServiceNow SDK examples](https://github.com/ServiceNow/sdk-examples) GitHub repository. To get started using React, select one of the React templates when creating an application with the ServiceNow IDE or ServiceNow SDK.\n\n**Note:** You can use some Next Experience Components in a React application with the React Wrapper Component Library Node Package Manager \\(npm\\) package on the [public npm registry](https://www.npmjs.com/package/@servicenow/react-components). To use the React Wrapper Component Library in an application, you can use Build Agent or you must install it from the ServiceNow IDE or ServiceNow SDK. For more information, see [Use third-party libraries with the ServiceNow IDE](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/servicenow-ide-family-release/use-third-party-libraries-ide.md) or [Use third-party libraries with the ServiceNow SDK](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/servicenow-sdk/use-third-party-libraries.md).\n\n## UI development process\n\nThe following list is a high-level overview of the process to develop a React application with the ServiceNow IDE or ServiceNow SDK:\n\n1.  Create an application and select one of the React templates.\n\n    The application includes the files and directories required for React development.\n\n2.  In the `src/client` directory, add client assets for a user interface, such as an HTML entry point \\(`index.html`\\), client scripts, and style sheets. The `index.html` file must contain the `<script>` tag as the JavaScript entry point.\n3.  Define a UI page \\[sys\\_ui\\_page\\] in code with the ServiceNow Fluent UI Page API. In the `now.ts` file that contains the UI page definition, you import the HTML and refer to it from the html property of the UiPage object.\n4.  Build the application to execute a pre-build Rollup script that bundles dependencies and packages the client assets in the `src/client` directory before executing the rest of the build process. The standard Rollup build process and plugins are used as the default JavaScript bundler.\n\n    Static assets are output to the `dist/static` directory.\n\n5.  Install the application to add the static assets to the application files \\[sys\\_metadata\\] in the appropriate tables: UX Asset \\[sys\\_ux\\_lib\\_asset\\], Images \\[db\\_image\\], and UX Theme Asset \\[sys\\_ux\\_theme\\_asset\\] tables. These tables support adding files as attachments.\n\n    **Important:** UI development with React is an experimental feature due to how content is served from an instance and the content types and tables that are currently supported.\n\n\n## Limitations\n\n-   The UI page HTML should be modified only in source code. Changes to the HTML of a UI page \\[sys\\_ui\\_page\\] on an instance aren't synchronized into source code and are likely to result in unintended behavior.\n-   Audio, video, and WASM content types aren't supported.\n-   The maximum file size of uploaded attachments is limited by the size configured with **com.glide.attachment.max\\_size** system property. For more information, see [Maximum allowed attachment size](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/platform-security/sc-max-allowed-attachment-size.md).\n-   Output paths must be deterministic.\n-   Pre-loading content linked from HTML isn't supported \\(`rel=\"preload\"`\\).\n-   Relative style sheets linked from HTML aren't supported \\(`rel=\"stylesheet\"`\\). Import style sheets into code instead \\(`@import 'path/to/style-sheet'`\\).\n-   Relative imports in CSS aren't supported.\n-   CSS modules aren't supported.\n-   Only hash routing is supported by UI pages.\n-   Server-side rendering and React server components aren't supported.\n\n## UI page development with React\n\nIn a `.now.ts` file in the `src/fluent` directory, a UI page is defined in ServiceNow Fluent code. The HTML of the page is imported from the `index.html` file in the `src/client` directory.\n\n```javascript\n//incident-manager.now.ts\nimport '@servicenow/sdk/global'\nimport { UiPage } from '@servicenow/sdk/core'\nimport incidentPage from '../../client/index.html'\n\nUiPage({\n    $id: Now.ID['incident-manager-page'],\n    endpoint: '<scope>_incident_manager.do',\n    description: 'Incident Response Manager UI Page',\n    category: 'general',\n    html: incidentPage,\n    direct: true,\n})\n```\n\nIn the `index.html` file, the `<script>` tag refers to the `main.jsx` file in the `src/client` directory.\n\n```xml\n//index.html\n<html>\n<head>\n  <title>Incident Response Manager</title>\n\n  <!-- Initialize globals and Include ServiceNow's required scripts -->\n  <sdk:now-ux-globals></sdk:now-ux-globals>\n\n  <!-- Include your React entry point -->\n  <script src=\"./main.jsx\" type=\"module\"></script>\n</head>\n<body>\n  <div id=\"root\"></div>\n</body>\n</html>\n```\n\nIn the `main.jsx` file, the imports required for rendering the page and the main application component are included and the entry point of the React application is defined.\n\n```javascript\n//main.jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom/client'\nimport App from './app'\n\nconst rootElement = document.getElementById('root')\nif (rootElement) {\n    ReactDOM.createRoot(rootElement).render(\n        <React.StrictMode>\n            <App />\n        </React.StrictMode>\n    )\n}\n```\n\nAfter building and installing the application, you can open the page from the endpoint provided in the UiPage object \\(`https://<instance>/<scope>_incident_manager.do`\\), which displays an interface for creating and managing incidents.\n\n\\[Omitted image \"servicenow-sdk-react-ui-page.png\"\\] Alt text: An example UI page for Incident Response Management created with React\n\n**Related topics**  \n\n\n[UI Page API - ServiceNow Fluent](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/servicenow-sdk/fluent-ui-page-api.md)\n\n[ServiceNow Fluent](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/servicenow-fluent.md)\n\n"}}