Basic element rendering in ReactJS is not working

Question

I am learning ReactJS. I visited this in order to have some basic lessons. After going through first lesson, I could write following code:

<!DOCTYPE html>
<html>

    <head>

        <meta charset="utf-8">

        <title>Hello world with date time in ReactJS</title>

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


    </head>

    <body>

        <div id="root"></div>


        <script type="text/jsx">

            const element = <h1>Hello, world</h1>;
            ReactDOM.render(
              element,
              document.getElementById('root')
            );

        </script>


    </body>

</html>

But to my surprise, it is working here but not on my computer or at my fiddle here. Can you please show me why my code is not working? Thanks.

jiexishede · Accepted Answer · 2017-05-21 10:04:07Z

1

Change text/jsx to text/babel . It works.

answered May 21, 2017 at 10:04

jiexishede

2,6437 gold badges40 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Nizamuddin Shaikh Over a year ago

Is it possible that I can create another element say a link under above h1 element in the same div, because when I write another code under the above code, the previous element is not shown, why so?

jiexishede Over a year ago

@NizamuddinShaikh Please show your code in the fiddle. const element = <div> < h1> Hello,world < /h1> < h2> Hello,world.TOO < /h2> </div> ; I write this code in the fiddle. It show.

jiexishede Over a year ago

@NizamuddinShaikh jsfiddle.net/orp64fyn/10 I create a new div element and change the second render at the new div. In your code, the second render replaces the first render.

Bartek Fryzowicz · Accepted Answer · 2017-05-21 10:10:48Z

1

The problem is that you don't have JSX processing enabled.
If you're using jsFiddle you can move your JS code to JavaScript edit section and click on settings button in top-right corner of this section and then select Babel + JSX from language select.

edited May 21, 2017 at 10:10

answered May 21, 2017 at 10:04

Bartek Fryzowicz

6,70420 silver badges29 bronze badges

2 Comments

Nizamuddin Shaikh Over a year ago

Yes Bartek you are right, the fiddle works after carrying out your above suggestions. Thanks a lot.

Nizamuddin Shaikh Over a year ago

Can you throw some light on second question, please

Collectives™ on Stack Overflow

Basic element rendering in ReactJS is not working

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related