Using React

GOX allows you to use React components within GOX templates. The integration automatically manages your compilation, loading, assembly and disassembly in the browser.

Install React

Run the following command from the root of the project:

gox client add react

The command creates the React environment within client/react/, installs the necessary dependencies and generates the shared bundle used by the React components.

Created structure

After running the command, the project contains the following structure:

client/
└── react/
    ├── node_modules/
    ├── package.json
    ├── pnpm-lock.yaml
    └── pnpm-workspace.yaml

The command prepares the environment of the framework, but does not create example components. The components can be organized freely within the framework. client/react/.

Create a React component

Create the following file:

client/react/menu/menu.jsx

The file must export the component by export default:

import { useState } from "react"

export default function Menu(attributes) {
    const [isOpen, setIsOpen] = useState(false)

    return <nav>
        <button onClick={() => setIsOpen(!isOpen)}>
            Menú de {attributes.name}
        </button>
        {isOpen && <p>El menú está abierto.</p>}
    </nav>
}

The default export is the component that GOX uses as a assembly point.

Files can also be used .tsx:

client/react/menu/menu.tsx

The developer doesn't need to matter. createRoot, manually assemble the component or manage its disassembly. GOX automatically performs these operations by integrating React.

Use the component in GOX

Declares the component by indicating its name, framework and source file:

client Menu react {
    src: "menu/menu.jsx"
}

The route of src is resolved from client/react/. So, menu/menu.jsx corresponds to:

client/react/menu/menu.jsx

See Client declarations to know all the properties and rules of a statement.

After declaring it, use a Client tag to include it in the Template:

<@Menu hydrate="idle" name="George" />

In this example:

• hydrate establishes the hydration strategy.
• name is sent to the React component within the object attributes.

See Props to know how GOX transfers values to the component and Hydrate to know the activation strategies available.

The component may also contain a SSRT to present initial content generated by the server before React is activated.

Full example

module index

import "github.com/gox-lang/gox"

client Menu react {
    src: "menu/menu.jsx"
}

func GET(ctx *gox.Context) gox.Page {
    return <html>
        <head>
            <title>Menú de George</title>
        </head>
        <body>
            <@Menu hydrate="idle" name="George" />
        </body>
    </html>
}

The pages using Client components should include <head>where GOX adds the Import Map necessary to load React and the component in the browser.

Best practices

• Keep the React components inside client/react/.
• Organizes related components in subdirectories.
• Use .jsx for JavaScript and .tsx for TypeScript.
• Exports the main component by export default.
• Do not manually mount or dismount the component.
• It uses routes relating to client/react/ on the property src.
• Keep in GOX the initial information to be given from the server.

See also

• Client declarations
• Props
• SSRT
• Hydrate
• Import Map