11

Is it possible to render a react component inside a Blazor page? I tried adding script tags to the Blazor page, but Blazor does not allow adding script tags.

Thanks for the answer.

2
  • 3
    Why don't you simply rewrite your React component in Blazor code ? Commented Apr 28, 2020 at 18:25
  • 1
    you can not write javascript codes in .razor files. but you can invoke javascript functions. anyway I think it is not reasonable to add a react component inside blazor code! Commented Apr 28, 2020 at 19:44

1 Answer 1

15

Is it possible to render a react component inside a Blazor page?

Yes, it's possible. React is a javascript library and the same way you can add jquery to your blazor app, you can also add React to it, but it have some drawbacks.

I tried adding script tags to the Blazor page, but Blazor does not allow adding script tags.

Indeed, you can't add script tag in a .razor file and the place you should add is in the _Host.cshtml file

Now you may ask, how to add React to a Blazor app? Well.. it's a little complicated.

What you need to do is configure a webpack to generate all files from React and put then in wwwroot and reference all the scripts and links in the _Host.cshtml file.

And then you will need to attach to window a function that will render you react component, something like

// index.js from react
window.renderReactApp = function() {
    ReactDOM.render(<App />, document.getElementById("react-div"))
}

Drawbacks of adding React into a blazor app

1. Communicating between React and Blazor.

If you need to pass data (state) between React and Blazor, it will be a big struggle, you will need to create some sort of Flux pattern that will be the bridge between both. This takes time to do and using it can be confusing.

2. Too much effort for something you might be able to do with Blazor

If you are already using Blazor and want to add React, you need to have really strong reasons to do that. Otherwise, you will wast too much time on something that you could have done with less effort in Blazor

Good reasons to add React to Blazor

There is a lot of js libraries that probably won't be able to be created with Blazor, or if someone do it, probably will be just a wrapper of the js and...

So far, Blazor doesn't give any way for you to do things that webpack can do, so in some cases where you have a lot of javascript or css, you will want to configure a webpack to minify / do what you need with those files. In this case, if you are already configuring the webpack for that, adding react to it, will be no problem.

One example of this is MatBlazor. They use a lot of js and css from material design web components, so they use webpack to bundle everything up. They don't use React, but it's an example of how to use webpack in blazor (something you will need to do to have React in your blazor app)

Sign up to request clarification or add additional context in comments.

3 Comments

Thanks for the long and detailed answer. I managed to render my react component thank to your code snippet. Now I use session storage for communication (I only have to pass 1 token), but I realized that it can be done by a parameter too.
I didn’t use webpack (just copied the production code to wwwroot).
@Kristof how did you handle Typescript? Did you compile it and simply copy-pasted to wwwroot?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.