CODEWITHSUNDEEP
reactjs
Coding Duchess
Coding Duchess

Reputation: 6909

React is not working on my machine

I downloaded React version 15 and created the following html document:

<!DOCTYPE html>
<html>
  <head>
    <script src="build/react.js"></script>
    <script src="build/react-dom.js"></script>
  </head>
  <body>
     <div id="container"></div>
        <script type="text/jsx">
            // React Code Goes Here

    var MyComponent = React.createClass({
            render: function(){
                return (<h1>Hello, {this.props.name}!</h1>);
            }
    });

    ReactDOM.render(
            <MyComponent name="world" />,
            document.getElementById('container')
    );


         </script>
  </body>
</html>

The same works fine in jsfiddle but not on my machine. I want to avoid installing React dev tools or anything extra. Is that possible to get it to work with what I have or do I absolutely need to install something else?

There are tons of tutorials out there but they all seem to be missing something to get me started

Upvotes: 0

Views: 567

Answers (3)

Diego Fu
Diego Fu

Reputation: 420

I'd say that if you are just starting react, a really good project to look at would be create-react-app. It does all the magic for you with one simple set up

Upvotes: 1

Pineda
Pineda

Reputation: 7593

If you're sure you have the react.js and react-dom.js files in a folder called build at the same level as that html page, the only thing missing would be:

a script include for babeljs in order for you to be able to use the JSX code you have in the body's script tag, add this to the <head> tag:

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>

Upvotes: 1

jmar777
jmar777

Reputation: 39649

As a precursory statement, I just want to make sure to mention that you probably won't want to do in-browser transpilation from JSX->JS for anything other than playing around with the technology. In a production environment you would want to precompile your JSX server-side or during a build step.

That being said, therein lies your problem: you're attempting to include JSX directly in the browser code, without including anything to do browser-side compilation for you.

Based on what I can see, it looks like the latest and greatest approach is to use <script type="text/babel"> now, instead of <script type="text/jsx">, and the compilation is accomplished via babel's browser.js.

This guide here appears to be mostly up to date: https://www.sitepoint.com/getting-started-react-jsx/

Upvotes: 1

Related Questions