1

I am new to react and when I say new I mean just started. I can't figure out why I'm not getting any header or paragraph to show.

This is what's in my script tag which has type text/babel

var myElements = React.createClass({
  render: function(){
    return  <h1>Hello</h1>
      <p>This is a paragraph </p>
  }
});

React.render(<myElements/>, document.body);

I also have babel cdn in my header

webdeb
  • 12,993
  • 5
  • 28
  • 44
  • Are you getting any console errors? Is your babel transpiler hooked up right? Are you importing React? – samanime Jun 16 '17 at 20:15
  • Have you used your browser's developer tools to see if you get any error? – Felix Kling Jun 16 '17 at 20:15
  • Besides that there many things unclear with your setup, the 1. problem which is obvious to me, is that you are returning multiple elements, wrap your elements in a `div` -> return `

    Hello

    Text

    `     – webdeb Jun 16 '17 at 20:21
  • The problem was solved by wrapping elements inside a div. –  Jun 16 '17 at 20:23
  • You need to have a single HTML tag wrap all children so wrap the `h1` and `p` tag in a `div`. Also, the `render` function is provided by `react-dom` not `react` so make sure you have that too. – KA01 Jun 16 '17 at 20:29
  • Possible duplicate of [React - Adding component after AJAX to view](https://stackoverflow.com/questions/41216654/react-adding-component-after-ajax-to-view) – Shubham Khatri Jun 16 '17 at 21:02

1 Answers1

0

Your component should start with upper case. https://facebook.github.io/react/docs/jsx-in-depth.html

var MyElements = React.createClass({
render: function(){
return  <h1>Hello </h1>
  }
});

React.render(<MyElements/>, document.body);
samnu pel
  • 914
  • 5
  • 12
  • someone down voted my answer. Can you please comment why? – samnu pel Jun 16 '17 at 20:22
  • not having my component capitalized and not wrapping my element inside a div was the reason why I was getting a blank page so your answer was definitely right. I would upvote if I could. –  Jun 16 '17 at 20:32