how to integrate haml with react js.i want to render react component using Haml file?

Question

I want to render React component in Haml file.Is there any way to call React JS class from Haml file for rendering.

Answer 1

I don't think this is possible, because React components are requiring React application to work, however you can achieve the oposite (haml inside react) using the haml-jsx-loader for webpack. Here is demo:

render() {
   return (~
    #content
      .column.sidebar
        %Sidebar(property={value}
               onSelect={() => ...})

      .column.main
        %h2 Welcome to our site!
        %p {info}
   ~);
}

Answer 2

There's a "ManageIQ" tag on your question so I am assuming you are asking in the context of ManageIQ UI.

There's a helper method named react that allows you to use a React component in ManageIQ HAMLs. It is implemented here: https://github.com/ManageIQ/manageiq-ui-classic/blob/master/app/helpers/reactjs_helper.rb

Example call:

= react 'ReportDataTable', {:reportResultId => @report_result_id}

To be able to do that you need to register your React component here: https://github.com/ManageIQ/manageiq-ui-classic/blob/master/app/javascript/packs/component-definitions-common.js

There you can also see a list of components that are already registered and grep for example usage.

If you want to write forms in React inside ManageIQ UI, use this guide: https://github.com/ManageIQ/guides/blob/master/ui/react_forms.md