Adding react from separate js file does not work

Question

I was following the 'Add React to a Website' guide on https://reactjs.org/docs/add-react-to-a-website.html#optional-try-react-with-jsx but it does not seem to work correctly for some reason.

The code that does not work:

index.html:

    <html>
    <head>

    <!-- Load React -->
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

    <!-- Load React component. -->
    <script src="test.js"></script>

    </head>

    <body>

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

    </body>

    </html>

test.js:

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

The code above will produce a blank page but when I add the react code on the index.html page like this:

   <script>
    ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('root')
    );
   </script>

It does work.

I have tried to replace

    <script src="test.js"></script>

with

    <script src="/test.js"></script>

and

    <script src="./test.js"></script>

but that still does not work.

Also when I inspect element on the blank page it does show that it loads test.js

Can someone please tell me what I am doing wrong?

Quick fix: move <script src="test.js"></script> to below <div id="root"></div>. Let me know if you want a full answer. — thirtydot
– thirtydot, Commented Sep 8, 2018 at 20:46
Ah, I see what's happening. Basically, follow the guide you linked to more carefully. You need <script src="test.js" type="text/babel"></script>. — thirtydot
– thirtydot, Commented Sep 8, 2018 at 20:58
I've written an answer so that an answer can be accepted for this question. For what it's worth, I recommend create-react-app if you want to get started with React. — thirtydot
– thirtydot, Commented Sep 8, 2018 at 21:07

thirtydot · Accepted Answer · 2018-09-08 21:04:50Z

1

As the guide says:

Now you can use JSX in any <script> tag by adding type="text/babel" attribute to it.

So you need <script src="test.js" type="text/babel"></script>.

answered Sep 8, 2018 at 21:04

thirtydot

229k51 gold badges393 silver badges354 bronze badges

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

Comments

Sakhi Mansoor · Accepted Answer · 2018-09-08 21:25:32Z

1

Even you can do it without adding text/babel by just using React.creatElement API as recommneded by Dan Abramov, author of redux and part of Reactjs core team.

Here is the working codesanbox: React with no build config

answered Sep 8, 2018 at 21:25

Sakhi Mansoor

8,1325 gold badges24 silver badges38 bronze badges

2 Comments

thirtydot Over a year ago

Sure, it works without JSX. But nobody wants to write React without JSX...

Sakhi Mansoor Over a year ago

Yeah this is for just understanding

Collectives™ on Stack Overflow

Adding react from separate js file does not work

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related