ReactJS rendering issue

Question

just began to learn React and here are my very simple JSX and HTML files. I don't see any error in Console (Chrome) when I run it from my http-server. However the button Im expecting to see won't show in the browser. I'm not sure why it does not and what is missing.

Can anyone please help? Also why should we specify type=text/babel" in the tag? If I don't do this, I get an error (unexpected syntax <) in console.

Thanks! Prem

HTML Code:

<html>
<head>  
<title>
    !My first React JS Component!
</title>
</head>

<body>
   <div id="root"></div>
    <script src="react.js"></script>
    <script src="script.jsx" type="text/babel"></script>
</body>

</html>

my JSX File:

 var Button = React.createClass({
    render: function () {
        return (
              <button> Go! </button>
        )
    }
});

ReactDOM.render(<Button />, document.getElementById("root"));

How do you transpile this? Could you share your webpack.config? (If that's what you're using) — Nicklas Pouey-Winger
– Nicklas Pouey-Winger, Commented Dec 2, 2016 at 6:43
@NicklasWinger sorry to be dumb here. I don't even know what a webpack.config is. I will read through the links you have given below and see if I could fix it. Thanks for the pointers — JavaNovice
– JavaNovice, Commented Dec 2, 2016 at 6:49
Take a look at the links in my answer. Official doc should be easy to understand :) — Nicklas Pouey-Winger
– Nicklas Pouey-Winger, Commented Dec 2, 2016 at 6:51

Nicklas Pouey-Winger · Accepted Answer · 2016-12-04 10:24:07Z

You cannot just include the jsx in your site like that - it won't work :)

You need to transpile your jsx via a tool like Webpack. The official documentation really is excellent and easy to understand, and it should explain how you setup a basic environment.

Also, there are dozens of tutorials on this, but here's a free one that I found helpful and easy to understand on youtube:

React + Redux + Webpack (Feel free to skip the redux part for a starter - really just a popular addon to React for managing state, which you can expand upon later)

For good measure, something like this should work:

<html>

<head>
  <meta charset="UTF-8"/>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
</head>

<body>
  <div id="app"></div>

  <script type="text/babel" src="app.jsx"></script>
</body>

</html>

App.jsx:

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

Collectives™ on Stack Overflow

ReactJS rendering issue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related