Initializing react component from asp.net

Question

Hopefully this is a slam-dunk for someone out there...my essential problem is this: I've built up a very nice set of react components which i can render in my asp.net 4.5 mvc 6 application using react.js, flux, gulp, and browserify.

as long as i have it structured so that the react components have all the data they need everything is perfect. My issue now is that I would like to have an MVC view include the react stuff, and inject run-time properties into the top-level component as it is created. Since I'm brpowserify-ing all of my react code into a bundle, i just include the one script tag in my view:

<script src="/js/modules/AuthContainer.jsx"></script>

But whereas I would normally use JSX syntax to instantiate my component with props like this:

...the view in ASP.NET never gets translated to pure JS, so that fails.

I've also tried:

  ReactDOM.render
  (
     React.createElement(AuthContainer, { successPath: '/home' }),
     document.getElementById('reactRoot')
  );

...from inside a script block in my view but i get:

Uncaught ReferenceError: AuthContainer is not defined

But i'm sure i'm exposing 'AuthContainer' via the browserify-ed bundle, so i don't understand why it's unable to resolve that component.

I know there's a React.NET way to do this, but i can't get that server-side rendering to work with my components because I'm using jQuery to fetch data in componentDidMount and the server-side rendering is choking looking for $() jQuery stuff.

I'd love to get the server side rendering going but right now i just need it to do work, one way of the other. Can someone provide a simple code snippet or gist of how to instantiate a React component from inside a cshtml file with run-time props?

Sergio Flores · Accepted Answer · 2016-02-15 17:09:29Z

2

One easy solution is this, just put your server side properties with Javascript in a global:

index.cshtml

<script>
var __config__ = {
  base: "@MyBackEdnVariable",
  initialCount: "@Count",
  user: {
    id: @user.id,
    name: @user.name,
  }
};
</script>
<script src="/js/modules/AuthContainer.jsx"></script>

And with React use that global variable:

AuthContainer.js

class AuthContainer extends React.Component {
  render() {
    return (
      <div>{this.props.user.name}</div>
    );
  }
}

AuthContainer.defaultProps = {
  initialCount: __config__.initialCount,
  user: __config__.user
};

answered Feb 15, 2016 at 17:09

Sergio Flores

5,4475 gold badges40 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

tntwyckoff Over a year ago

Well you're certainly right, that does it and it's easy. I just have to believe there's a more tool-supported, props-injected-via-c#-server-side way to do it. I'm using this technique and hoping for another methodology to emerge...thanks.

Sergio Flores Over a year ago

Well, I don't believe a props-injected-via-c#-server-side way exists or I cannot imagine how could it be and I like to think of this as a separation of concerns, your C# code is in the backend, and the Javascript code is in the front, no matter what backend you are using, it doesn't matter, the code in the front, the react code in this case, use an initial state that you need to provide and can be a global variable, c'mon, take a look at the source of instagram and look for a window._sharedData variable, it contains all the initial state for the app. Hope this will help you. Grettings!

tntwyckoff Over a year ago

Well, i meant C# from inside a cshtml file, that kind of thing. But no matter, this is my plan until I can get it working with React.Net, which I think will require some re-factoring. Thanks a bunch.

tntwyckoff · Accepted Answer · 2016-02-23 05:31:05Z

1

For posterity:

ReactDOM.render
(
    React.createElement
    (
        MyComponent, 
        {
            prop1: @numericValue,
            prop2: '@textValue',
        }
    ), 
    document.getElementById('reactRoot')
);

the magic was the jsx-alternative syntax, which i was aware of couldn't get a handle on that day. This allows you to instantiate react using pure JS and therefor just embed inside a simple script tag in your cshtml.

hth.

answered Feb 23, 2016 at 5:31

tntwyckoff

5295 silver badges17 bronze badges

Collectives™ on Stack Overflow

Initializing react component from asp.net

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related