create-react-app is the starter project for getting up and running quickly with the ReactJS frontend framework. It’s the training wheels for React; you don’t have to figure out webpack. I want to use it to enhance an ASP.NET MVC 5 site with rich components.
There’s a lot out there about react and .NET. Some good starting places:
- Jon Smith at Redgate has some great tips. But, he doesn’t use create-react app.
- Pete Duncanson has SuperchargedReact.Net
- Drew Null presented on the differences between Vue, React, and Angular at an Episerver meetup in Chicago in May of 2018. Here’s his code on github.
- The ReactJS.NET issues on github were helpful for understanding how to get ReactJS.NET work.
ReactJS.Net can be used on ASP.NET MVC5 and ASP.NET Core. It also includes features to do transpilation on the fly with a babel
HttpHandler. We won’t use the later, but the server-side rendering feature it provides is crucial for allowing your pages to be crawled.
My team wants to use React because
- It’s a way to write maintainable and composable frontend components
- It has a wide variety of libraries available from the react community
- It’s performant client-side
- It can be used for a wide variety of project sizes, from a few small components, to a full SPA
It’s somewhat brittle and difficult to modify if you decide to change your project architecture
I’ve heard from some that ReactJS.Net is slow (but, it seems fast enough for the way we use it)
I’ve seen memory leaks when using alternate JS engines. However, I haven’t had any problems with the default JS engine, IE11. PeteDuncanson says you can fix with some cleanup code.
You need to shim some features server-side (the IE11 JS engine is somewhat limiting in this respect)
When using the create-react-app development server as a proxy in front of your website, you must manually navigate to
/default instead of
Currently only supports using one domain at a time in development. You can develop on multiple, but must change proxy settings to work on a different one.
- Getting the Episerver quicksilver project
- Setting up create-react-app in a separate project
- Setting up the express proxy
- Installing NPM Task Runner for VS’s Task Runner Explorer extension
- Using ReactJS.Net for getting your components into your ASP.NET app and server-side rendered
- Setting up server shims for server-side rendering in production
- Setting up routing integration between EPiServer and react-router
- Tips for troubleshooting server-side bugs
- Deployment considerations
What we won’t cover
- Alternate JS engines in ReactJs.NET
- Getting deployments perfect
- Integrating Episerver’s edit UI and React components
- Using React on multiple sites