The app is {isHealthy ? 'healthy' : 'unhealthy'}.
); } @page('[/]*') static NotFoundPage() { return ( <>Sorry, there is nothing here.
); } } return Application; }; ``` ```ts // TS // frontend/src/components/application.tsx import {Routable} from '@layr/routable'; import React, {Fragment} from 'react'; import {layout, page, useData} from '@layr/react-integration'; import type {Application as BackendApplication} from '../../../backend/src/components/application'; export const extendApplication = (Base: typeof BackendApplication) => { class Application extends Routable(Base) { declare ['constructor']: typeof Application; @layout('/') static MainLayout({children}: {children: () => any}) { return ( <>The app is {isHealthy ? 'healthy' : 'unhealthy'}.
); } @page('[/]*') static NotFoundPage() { return ( <>Sorry, there is nothing here.
); } } return Application; }; export declare const Application: ReturnTypeThe app is {isHealthy ? 'healthy' : 'unhealthy'}.
`). `NotFoundPage()` implements a page that is displayed when a user goes to an URL that is not handled by the app: - It is decorated with [`@page('[/]*')`](https://layrjs.com/docs/v2/reference/react-integration#page-decorator), which makes the method acts as a page associated with any unhandled URL path starting with `'/'` and specifies that the main layout (`'/'` enclosed in square brackets `'[]'`) should be used. - It renders some simple HTML tags and texts indicating that the page cannot be found. ##### Backend Here's what the initial backend root [component](https://layrjs.com/docs/v2/reference/component) (`Application`) looks like: ```js // JS // backend/src/components/application.js import {Component, method, expose} from '@layr/component'; export class Application extends Component { @expose({call: true}) @method() static async isHealthy() { return true; } } ``` ```ts // TS // backend/src/components/application.ts import {Component, method, expose} from '@layr/component'; export class Application extends Component { @expose({call: true}) @method() static async isHealthy() { return true; } } ``` This component is straightforward. `isHealthy()` implements a class method that the frontend can call to check whether the app is healthy: - It is decorated with [`@expose({call: true})`](https://layrjs.com/docs/v2/reference/component#expose-decorator), which exposes the method to the frontend. - It is also decorated with [`@method()`](https://layrjs.com/docs/v2/reference/component#method-decorator), which is required so that the `@expose()` decorator can be used. - It always returns `true`, which is rather pointless. An actual `isHealthy()` method would, for example, check whether a database responds correctly. #### Displaying "Hello, World!" in the Frontend It's about time to write some code. We'll start gently by modifying the frontend to display "Hello, World!" instead of "The app is healthy.". Modify the `MainPage()` class method in the `frontend/src/components/application.jsx``frontend/src/components/application.tsx` file as follows: ```ts @page('[/]') static MainPage() { returnHello, World!
; } ``` Save the file, and your browser should automatically refresh the page with the following contents:
Hello, World!
; } ``` That's it. The app just got a new page. You could view it by changing the URL path to `/hello-world` in your browser, but adding a link to the new page inside the main page would be better in terms of user experience. Let's do so by modifying the `MainPage()` class method as follows: ```ts @page('[/]') static MainPage() { return (
{helloWorld}
); } ``` As seen in the initial [`MainPage()`](https://layrjs.com/docs/v2/introduction/hello-world#frontend) method, we use the [`useData()`](https://layrjs.com/docs/v2/reference/react-integration#use-data-react-hook) React hook to call a backend method (with `await this.getHelloWorld()`) and render its result (with `{helloWorld}
`). If you refresh the "Hello, World!" page in your browser, you should not see any difference. However, if you inspect the network requests via the browser's developer tools, you should see that the `'Hello, World'` string displayed in the frontend comes from the backend. #### One Last Thing Technically, we now have a full-stack app involving a frontend and a backend. But the app is a bit static. The backend always returns the same `'Hello, World'` string, which is rather boring. Let's make the app more dynamic by modifying the `getHelloWorld()` class method in the `backend/src/components/application.js``backend/src/components/application.ts` file as follows: ```ts @expose({call: true}) @method() static async getHelloWorld() { const translations = ['Hello, World!', 'Bonjour le monde !', 'こんにちは世界！']; const translation = translations[Math.round(Math.random() * (translations.length - 1))]; return translation; } ``` Save the file to restart the backend, and now, when you refresh the "Hello, World!" page several times in your browser, you should see some translations randomly picked up. Here's an example showing the Japanese translation:
