CODEWITHSUNDEEP
reactjs
JavaNovice
JavaNovice

Reputation: 1142

ReactJS rendering issue

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"));

Upvotes: 0

Views: 69

Answers (1)

Nicklas Pouey-Winger
Nicklas Pouey-Winger

Reputation: 3023

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')
);

Upvotes: 1

Related Questions