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)
Simply name your file with a
The files will automatically be compiled to JavaScript and cached
server-side. No precompilation required. Perfect for development.
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.
Pre-render the initial state of your React components server-side to
make the initial load feel faster.
On-the-fly JSX to JavaScript compilation
.jsx
extension and link to the
file via a script
tag.
// /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
// 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
<!-- 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()