Skip to main content

React

To create a React application with the HA CLI, select the option to jumpstart the react/next.js template app during the jumpstart.

info

Refer to Hello Magnolia - HA CLI for more information about jumpstarting and running a new project with HA CLI.

HA CLI installs a Magnolia instance with the react/next.js app. You can use all the features of React and Next.js in your newly created application.

info

Learn more about creating new components, content apps, and page templates in the Explore the web application section of this documentation, which showcases the React web application.

WithMgnlProps HOC#

If you inspect ha generated components, you can notice that each of the generated react component is wrapped with HOC (high order component), named WithMgnlProps.

BOOTSTRAP-TEMPLATE Folder Strucdture

This HOC is responsible for transforming json data received from magnolia delivery endpoints an passing this transformed data to child component as appropriate model.
Data model used by the component is defined by the yaml component definition (magnolia field definitions). So, in some cases (usually when using complex magnolia fields) we need to adapt the data that we are getting from magnolia to be easily consumed in the react component. For this purpose we use `WithMgnlProps` HOC.