Trying to build the react tutorial for reactJS

Question

I am trying to code the reactjs tutorial in visual studio 2015 sp2 http://reactjs.net/getting-started/tutorial.html

I am just on the first step, I created the jsx file, the controller and a view file, when I run it, I just get a blank page no error, I am not sure what I am doing wrong. Here is the content of the index.cshtml file.

<html>
<head>
    <title>Hello React</title>
</head>
<body>
    <div id="content"></div>
    <script src="@Url.Content("~/Scripts/Tutorial.jsx")"></script>
</body>
</html>

Here is my tutorial.jsx file

var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox" />
        Hello, world! I am a CommentBox.
        Sorry I am so retarded and hard to work on that it appears impossible to get me to display. 
      </div>
    );
  }
});
React.render(
  <CommentBox />,
  document.getElementById('content')
);

Page Renders but nothing displays within the <div> and I am not sure why.
I had to remove the script tags for the reactjs files as the editor for this question was pitching a fit about them, they are there in my code.

What I am really looking for is how to edit jsx files in visual studio 2015 and get babel to create the js files for me. I downloaded the reactjs starter kit, but that didn't work. I finally managed to get a working environment setup by downloading all the files using npm, but I really want to be able to edit in visual studio, so I can publish the finished code to my website, which is using asp.net and targeting 4.6.1 version of the .net framework.

modified tutorial.jsx to ReactDOM.render but its still not working, wondering if I am missing a dependency or something — webdev8183
– webdev8183, Commented May 21, 2016 at 12:13
Would you be willing to try a react starter kit I wrote if I was sure it could work for you? — Patrick Roberts
– Patrick Roberts, Commented May 23, 2016 at 10:54

ZhiLI · Accepted Answer · 2016-05-21 12:05:18Z

0

did you miss your:

<script src="https://{cdn}/react-15.0.1.js"></script>
<script src="https://{cdn}/react-dom-15.0.1.js"></script>

i think u should add the react script

answered May 21, 2016 at 12:05

ZhiLI

2092 silver badges4 bronze badges

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

5 Comments

webdev8183 Over a year ago

the react script is there, the editor got all wonky on me typing the question so its not included in my code for that reason, its really got me puzzled. I downloaded a github repo with it done as a webapi project and that works, but mine just will not. I have looked all over the code trying to find the difference but I just cannot find it.

ZhiLI Over a year ago

just compare your code with the repo carefully, take it easy, u must have forgotten something

webdev8183 Over a year ago

I think the issue is that its not exposing the component globally, found a related question here. stackoverflow.com/questions/29559951/…

webdev8183 Over a year ago

I still don't understand how to expose the component globally, I am sure that will be the answer on how to fix it.

webdev8183 Over a year ago

Hi Thomas I think you had same problem I do, can you tell me how you fixed it. @thomasdigby still struggling with it, I have trouble following the guides

Collectives™ on Stack Overflow

Trying to build the react tutorial for reactJS

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related