How to mix React JS code with Reflex to add components and Providers?

[nb-programmer]

I would like to add some code for Authentication in the reflex app, which is msal-react so that I can wrap <MsalProvider> around the whole app. Other use would be to import JSX components and use them from a local folder. Can this be achieved?

[picklelo]

@nb-programmer Yes you should be able to wrap that library, as well as any local components that you need. If you run into any issues let us know.

[nb-programmer]

Glad to hear that it is possible to mix JSX into the components.
Can you suggest any tutorial that shows how to do this? For example, how to make reflex use a custom root page components?

For example, lets say I the root page is:

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
      <App />
  </React.StrictMode>
);

I would like to wrap App with another Provider (if that's how to do it, I'm assuming):

const msalInstance = new PublicClientApplication(msalConfig);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <MsalProvider instance={msalInstance}>
      <App />
    </MsalProvider>
  </React.StrictMode>
);

How do I do this in a reflex app? I found a .web folder, but that seems to be not version controlled

[picklelo]

@nb-programmer this isn't in our main docs yet, but you can add your own app wrap components when you wrap - see here for an example. It takes a priority (which specifies it's position relative to the other app wrappers) and the wrapper component.

[picklelo]

Your local components you can put in your assets/ directory. I have a PR incoming to update the website docs with this info, but this is basically how it works:

You can also wrap components that you have written yourself. Local components should be stored in your assets directory. For example, you could define a basic Hello component like this:

// assets/hello.js
import React from 'react';

export function Hello() {
  return (
    <div>
      <h1>Hello!</h1>
    </div>
  )
}

Then specify the library as following (note: we use the public directory here instead of assets as this is the directory that is served by the web server):

import reflex as rx

class Hello(rx.Component):
    # Use an absolute path starting with /public
    library = "/public/hello"

    # Define everything else as normal.
    tag = "Hello"