Prior Art
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
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.
Why
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
However, I don’t have as much time as I would like to constantly keep up to date with ALL the new features in the Javascript world. create-react-app takes care of creating a feature-rich development environment that is easy to use.
Some caveats
Build system
It’s somewhat brittle and difficult to modify if you decide to change your project architecture
Performance
I’ve heard from some that ReactJS.Net is slow (but, it seems fast enough for the way we use it)
Memory Management
I’ve seen memory leaks when using alternate JS engines. However, I haven’t had any problems with the default JS engine, IE11. Pete Duncanson says you can fix with some cleanup code.
JS Features
You need to shim some features server-side (the IE11 JS engine is somewhat limiting in this respect)
Development quirks
When using the create-react-app development server as a proxy in front of your website, you must manually navigate to /default instead of /
Multisite
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.
What we’ll cover
- 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
