How can I render the React app with redux using the ReactJS.NET?

Question

I have created the Single page application where I have used the React, Redux and React-Router.

I want to render this SPA using ReactJS.NET for improve performance of loading the application.

The SPA is compiled as one Bundle.js using Webpack.

I have an ASP.NET MVC application where I can paste this bundle which will be rendered through the ReactJS.NET. Everything in this SPA will be worked in one ASP.NET view but with the React-router.

How can I do that? I can't find any project where is solved this combination with Redux.

WillHua · Accepted Answer · 2017-05-01 23:56:33Z

I know this is an old question but if you're still having issues incorporating your React app into React.NET you should try the following template and have a look at how this fellow has done it.

He uses webpack to first build and compile a server specific set of code then pulls the compiled js into React.NET

app.UseReact(config =>
{
    config
        .SetLoadBabel(false)
        .AddScriptWithoutTransform("~/js/react.server.bundle.js");
});

The webpack config looks like this.

var path = require('path');
var webpack = require('webpack');
var WebpackNotifierPlugin = require('webpack-notifier');

module.exports = {
    entry: {
        server: './React/server.jsx',
        client: './React/client.jsx',
        clientWithRender: './React/clientWithRender.jsx',
    },
    output: { path: __dirname + '/wwwroot/js/', filename: 'react.[name].bundle.js' },
    module: {
        loaders: [
            {
                test: /.jsx?$/,
                loader: "babel-loader",
                exclude: /node_modules/,
                query: {
                    presets: ['es2015', 'react'],
                    plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy']
                }
            }
        ]
    },
    plugins: [
        new WebpackNotifierPlugin() 
    ]
};

And heres the index

@{
    Layout = null;
}
<html>
<head>
    <title>Hello React</title>
</head>
<body>
    <div id="app">
        @{
            if (Environment.GetEnvironmentVariables()["ASPNETCORE_ENVIRONMENT"].ToString() != "Development")
            {
                @Html.React("ReactComponents.App", new { val1 = "Top text" });
            }
        }
    </div>

    @{
        if (Environment.GetEnvironmentVariables()["ASPNETCORE_ENVIRONMENT"].ToString() != "Development")
        {
            <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script>
            <script src="@Url.Content("~/js/react.client.bundle.js")"></script>
            @Html.ReactInitJavaScript()
        }
        else
        {
            <script src="@Url.Content("~/js/react.clientWithRender.bundle.js")"></script>
        }
    }
</body>
</html>

Community · Accepted Answer · 2017-05-23 11:47:08Z

1

Why use ReactJS.NET? There is nothing special about an MVC.NET stack which requires a separate project to get React up and running in it. I would use a combination of Babel, Webpack, React, React-Dom and React-Router instead. MVC.NET should just deliver the bundle everything else should be react and it's dependencies.

The problem with the default tutorial of React.NET is that it does not consider the fact you are using webpack to bundle your dependencies and instead has examples of adding them manually. This is not really the preferred way of writing React and makes a complicated process even more complicated by trying to hide away the initial complexity of setting up your React project.

Suggestion:

Webpack will bundle your react-router, react and react-dom amongst other stuff. You need MVC to be setup in a way that every url request is handled by the same controller action that way React-Router can handle the url changes. This answer explains how to do this. ASP.NET MVC - Catch All Route And Default Route

Without doing this, MVC will try to handle all url route changes instead of React-Router doing it's thing.

edited May 23, 2017 at 11:47

CommunityBot

11 silver badge

answered Oct 25, 2016 at 12:14

Chris Hawkes

12.5k6 gold badges60 silver badges69 bronze badges

4 Comments

Jenan Over a year ago

Chris, I want to achieve creating the server side rendering of my SPA into the ASP.NET MVC. How can I do that? Do you know another way? :) Thank you.

Jenan Over a year ago

Thank you for updating. This only solve the routing but I don't know create the project structure if I want to use the combination of React and Redux. Can you suggest me some sample where is this solved?

Chris Hawkes Over a year ago

Their official docs on github are probably best. The initial setup with these modern javascript projects are a huge headache. github.com/ReactTraining/react-router/blob/master/docs/… Also the docs expect you to use the latest es2015 standards of JavaScript meaning you need webpack to use babel to compile your javascript using es2015. blog.scalac.io/2016/03/03/…

Jenan Over a year ago

Chris, do you have any suggestion for redux and React.JS.NET as well?

Collectives™ on Stack Overflow

How can I render the React app with redux using the ReactJS.NET?

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related