CODEWITHSUNDEEP
asp.net-mvcreactjsreactjs.net
Voice Of The Rain
Voice Of The Rain

Reputation: 587

ReactJs Component not showing

I'm a newbie to reactjs and trying to test a very basic component, however it seems all my struggle is futile because its not showing up in the browser.

I'm using asp.net MVC 5 app and I've been following along this tutorial https://reactjs.net/getting-started/tutorial_aspnet4.html as the tutorial states you need to add React.Web.Mvc4 Nuget package which have some dependencies.

My simple React component (SimpleComponent.jsx)

var ComponentBox = React.createClass({
    render: function() {
        return (<div style="background-color:antiquewhite">Hello World ReactJs Component!</div>);
    }
});

ReactDOM.render(
    <ComponentBox />,
    document.getElementById('reactDiv')
);

and my razor view is pretty simple

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/1.7.1/remarkable.min.js"></script>


</head>
<body>
    <div id="reactDiv"></div>

    <script src="@Url.Content("~/Scripts/SimpleComponent.jsx")"></script>
</body>
</html>

Did I miss something?

Upvotes: 2

Views: 1391

Answers (1)

Voice Of The Rain
Voice Of The Rain

Reputation: 587

The Solution for my problem was to replace the style element in my jsx file as following 

var ComponentBox = React.createClass({
    render: function () {
        return (<div style={{background:'antiquewhite'}}>Hello World ReactJs Component!</div>);
    }
});

Based on react docs "using the style attribute as the primary means of styling elements is generally not recommended"

by using javascript object to store the style as properties and I hope this'll help someone.

Upvotes: 1

Related Questions