One of the many cool things with Blazor is that we can actually use a Blazor component within a React application…<\/p>\n
\r\nyarn create react-app my-app-js\r\n<\/pre>\nIn this example, we’ll use JS instead of Typescript, but I’ll show how to use Typescript later\n<\/li>\n
\r\ndotnet new blazorwasm-empty -o BlazorComponents\r\n<\/pre>\n<\/li>\n
\r\n<h3>Welcome to My Component<\/h3>\r\n\r\n<button @onclick="UpdateCounter">OK<\/button>\r\n\r\n<div>@_counter<\/div>\r\n\r\n@code {\r\n int _counter = 0;\r\n\r\n private void UpdateCounter()\r\n {\r\n _counter++;\r\n }\r\n}\r\n<\/pre>\n<\/li>\n\r\nbuilder.RootComponents.RegisterAsCustomElement<MyComponent>("my-component");\r\n<\/pre>\nThe my-component<\/em> is the name that gets used within the React app.\n<\/li>\n- To test, simple add the component to you Blazor project’s Index.razor and then run the project<\/li>\n
- When you’re happy, run\n
\r\ndotnet publish\r\n<\/pre>\n<\/li>\n
- We now need to copy the _content<\/em> folder from ${project}\\bin\\Release\\net9.0\\publish\\wwwroot to the public folder of the React app<\/li>\n
- In the index.html file within the public folder of the React application add the following before the <\/body> tag\n
\r\n<script src="_framework\/blazor.webassembly.js"><\/script>\r\n<\/pre>\n<\/li>\n
- Finally add our component (using the name we gave it earlier) to our React code, so for example my App.tsx looks like this\n
\r\n<div className="App">\r\n <my-component><\/my-component>\r\n<\/div>\r\n<\/pre>\n<\/li>\n<\/ul>\nNow if we created our React application using Typescript, which is my usual way of doing this, using<\/p>\n
\r\nyarn create react-app my-app-ts --template typescript\r\n<\/pre>\nand if you follow all the instruction for the React side of things from above, you’ll find that there’s an error message displayed because <my-component> as it’s not an instrinsic JSX type, so the simplest way to handle this is to disable the error using ts-ignore, i.e.<\/p>\n
\r\n<div className="App">\r\n {\/* @ts-ignore *\/}\r\n <my-component><\/my-component>\r\n<\/div>\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"One of the many cool things with Blazor is that we can actually use a Blazor component within a React application… Create React app using yarn create react-app my-app-js In this example, we’ll use JS instead of Typescript, but I’ll show how to use Typescript later Create a Blazor Web Assembly (or Server) dotnet new […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[305,243],"tags":[],"class_list":["post-11164","post","type-post","status-publish","format-standard","hentry","category-blazor","category-react"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/11164","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/comments?post=11164"}],"version-history":[{"count":5,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/11164\/revisions"}],"predecessor-version":[{"id":11173,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/11164\/revisions\/11173"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=11164"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=11164"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=11164"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}