React integration for ASP.NET MVC

ReactJS.NET makes it easier to use Facebook's React and JSX from C# and other .NET languages, focusing specifically on ASP.NET MVC (although it also works in other environments). It supports both ASP.NET 4 (with MVC 4 or 5), and ASP.NET Core MVC. It is cross-platform and can run on Linux via Mono or .NET Core. Take a look at the tutorial to see how easy it is to get started with React and ReactJS.NET!

Latest news: ReactJS.NET 5.2 (June 12, 2020)

On-the-fly JSX to JavaScript compilation

Simply name your file with a .jsx extension and link to the file via a script tag.

The files will automatically be compiled to JavaScript and cached server-side. No precompilation required. Perfect for development.

// /Scripts/HelloWorld.jsx
class HelloWorld extends React.Component {
  render: function() {
    return <div>Hello world!</div>;
  }
}

<!-- Reference it from HTML -->
<script src="@Url.Content("~/Scripts/HelloWorld.jsx")"></script>

JSX to JavaScript compilation via popular minification/combination libraries

Use Cassette or ASP.NET Minification and Combination? ReactJS.NET's got you covered.

Reference your JSX files and they will be included in your bundles along with your other JavaScript files.

If you're a fan of Node.js-based libraries, you can use Webpack or Browserify instead, and still take advantage of ReactJS.NET's server-side rendering.

// In BundleConfig.cs
bundles.Add(new JsxBundle("~/bundles/main").Include(
    // Add your JSX files here
    "~/Scripts/HelloWorld.jsx",
    "~/Scripts/AnythingElse.jsx",
    // You can include regular JavaScript files in the bundle too
    "~/Scripts/ajax.js",
));

<!-- In your view -->
@Scripts.Render("~/bundles/main")

Server-side component rendering

Pre-render the initial state of your React components server-side to make the initial load feel faster.

<!-- This will render the component server-side -->
@Html.React("CommentsBox", new {
    initialComments = Model.Comments
})

<!-- Initialise the component in JavaScript too -->
<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.development.js"></script>
<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.development.js"></script>

@Scripts.Render("~/bundles/main")
@Html.ReactInitJavaScript()

Get Started Tutorial