CODEWITHSUNDEEP
javascriptreactjs
Sergey Kosterin
Sergey Kosterin

Reputation: 31

React.js: project is not working

I am making a simple React.js project. The project can be found here. The HTML is as follows: 

<header>
  <div class="container-center">
    <h1 class="text-center">Markdown Previewer</h1>
  </div>
</header>


  <div class="container-center" id="main-container">
  </div>


<footer>
  <div class="container-center">
    <p class="text-center">Copyright &copy; Sergey Kosterin, 2016. All rights reserved.</p>
  </div>
</footer>

The Javascript code is as follows: 

var RawTextContainer = React.createClass({
  render: function(){
    return (
      <h1>Raw Text</h1>
    );
  }
});

var MarkdownContainer = React.createClass({
  render: function(){
    return (
      <h1>Markdown Text</h1>
    );
  }
});

var MainAppContainer = React.createClass({
  render: function(){
    return (
      <div class="row">
        <div class="col-md-6">
          <RawTextContainer />
        </div>
        <div class="col-md-6">
          <MarkdownContainer />
        </div>
      </div>
    );
  }
});


ReactDOM.render(<MainAppContainer />, document.getElementById('main-container'));

I want the app to show me two columns containing some text. But I don't see anything. What am I doing wrong?

Upvotes: 1

Views: 335

Answers (1)

The Reason
The Reason

Reputation: 7973

React doesnt use class keyword. Instead of that it should be className. Here is a useful link about class & className keywords.

var MainAppContainer = React.createClass({
  render: function(){
    return (
      <div className="row">  // className instead of class
        <div className="col-md-6"> // className instead of class
          <RawTextContainer />
        </div>
        <div className="col-md-6"> // className instead of class
          <MarkdownContainer />
        </div>
      </div>
    );
  }
});

If it isn't the answer, then you have to provide a bit more information about your problem e.g. stack trace, errors etc. It's quite difficult to guess where is your problem.

Update

Worked example -> Pen Example i don't know why, but Pen doesnt recognise ReactDOM or you didn't include it. You can try to render your component through React.

React.render(<MainAppContainer/>, document...)

Also if you open browser console, you will get more information about some errors, or required statements (in your case jQuery isn't included file).

Thanks.

Upvotes: 1

Related Questions