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 perfomance 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.

Thank you for the example or help.

score 4 · Accepted Answer · answered May 01 '17 at 23:56

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>

score 1 · Answer 2 · edited May 23 '17 at 11:47

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 '17 at 11:47

Community

1
1

answered Oct 25 '16 at 12:14

Chris Hawkes

9,842
6
47
60

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 Oct 25 '16 at 12:28
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? – Jenan Oct 25 '16 at 12:37
Their official docs on github are probably best. The initial setup with these modern javascript projects are a huge headache. https://github.com/ReactTraining/react-router/blob/master/docs/Introduction.md 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. http://blog.scalac.io/2016/03/03/introduction-to-webpack-with-es2015-and-react.html#webpack-example-3 – Chris Hawkes Oct 25 '16 at 13:04
Chris, do you have any suggestion for redux and React.JS.NET as well? – Jenan Oct 26 '16 at 07:18

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

2 Answers2