ReactJS.NET
ReactJS.NET is a library that makes it easier to use Babel along with Facebook's React and JSX from C#.
Features
- On-the-fly JSX to JavaScript compilation via Babel
- JSX to JavaScript compilation via popular minification/combination
libraries: - Server-side component rendering
to make your initial render super-fast, including support for:- CSS-in-JS libraries
- React Router
- React Helmet
- Custom JS logic via implementing IRenderFunctions and passing to Html.React
- Runs on Windows, OS X and Linux via .NET Core and ChakraCore
- Supports both ASP.NET 4.0/4.5 and ASP.NET Core
Quick Start
Install the package
Install-Package React.Web.Mvc4 # For ASP.NET MVC 4 or 5
Install-Package React.AspNet # For ASP.NET Core MVC
Install a Javascript engine and configure as the default (more info here on how this works)
Install-Package JavaScriptEngineSwitcher.V8
Install-Package JavaScriptEngineSwitcher.V8.Native.win-x64
public static class ReactConfig
{
public static void Configure()
{
ReactSiteConfiguration.Configuration
.AddScript("~/Content/HelloWorld.jsx");
JsEngineSwitcher.Current.DefaultEngineName = V8JsEngine.EngineName;
JsEngineSwitcher.Current.EngineFactories.AddV8();
}
}
Create JSX files
// /Scripts/HelloWorld.jsx
const HelloWorld = props => {
return <div>Hello {props.greeting}</div>;
};
Reference the JSX files from your HTML
<!-- Place this where you want the component div to render -->
@Html.React("HelloWorld", new { Greeting = "friends!" });
<!-- Place these at the end of the page -->
<script src="@Url.Content("~/Scripts/HelloWorld.jsx")"></script>
@Html.ReactInitJavaScript();
Now you can use the HelloWorld component.
For information on more advanced topics (including precompilation and
server-side rendering), check out the documentation
Building Manually and Contributing
When building your own copy of ReactJS.NET (for example, if implementing a new
feature or fixing a bug), your first build always needs to be done using the
build script (dev-build.bat) as this generates a few files required by the
build (such as SharedAssemblyVersionInfo.cs). Once this build is completed,
you can open React.sln in Visual Studio and compile directly from Visual
Studio. Please refer to the documentation page on
contributing for more information on
contributing to ReactJS.NET.
Note that the build requires you to have Git installed. If you do not want to
install Git, you may remove the GitVersion task from build.proj.