0

I got starting ASP.NET MVC project with the following resources added:

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")

<script src="~/Scripts/require.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

@RenderSection("scripts", required: false)

Section scripts in Index.cshtml:

<div id="root"></div>

@section scripts
{
    <script src="~/Scripts/ReactJS/Index.js" type="text/babel"></script>
}

And the file itself:

import React from 'react';
import ReactDOM from 'react-dom';


ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('root')
);

The result is empty page with no errors. I do not want to use Node.js, I do not want to use even require.js and babel.js, but it seems I have to. What are the minimal dependencies of reactjs to work properly?

P.Petkov
  • 1,569
  • 1
  • 12
  • 20

2 Answers2

0

First, ensure ReactJS core files & Remarkable.js referenced properly as this:

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

(more info: ReactJS MVC / ReactJS Core MVC)

Then, add JSX file in either <head> tag or Scripts section:

@section Scripts {
    <script src="~/Scripts/ReactJS/Index.jsx"></script>
}

Assume in your <body> tag has this div container to bind...

<div id="root"></div>

Then, in JSX file the React script should be looks like this:

// Index.jsx
var Root = React.createClass({
               render: function () {
                       return (
                          <h1>Hello, world!</h1>
                       );
               }
           });

ReactDOM.render(<Root />, document.getElementById('root'));

As the tutorial page said, BabelJS required if you want to use ES6 features such as arrow functions & concise methods, or use bundling mechanism (BabelBundle instead of plain ScriptBundle) to load JSX file.

Related issue:

ReactJS.NET MVC tutorial doesn't work?

Tetsuya Yamamoto
  • 24,297
  • 8
  • 39
  • 61
  • I did remove babel and require.js from my page. Also it seems I do not need remarkable.js. I changed the js file to jsx and the type of – P.Petkov Jun 06 '17 at 14:11
0

Please use div before h1

var Root = React.createClass({
           render: function () {
                   return (<div>
                      <h1>Hello, world!</h1>  </div>);
           }
       });
Wasim Malik
  • 3
  • 2