How to use react libraries in separate React component script?

Question

I'm trying to render react components from an html page. I referenced the question React - component in seperate script does not work and loaded the html file from a URL like http://localhost/index.html. My index.html:

<!DOCTYPE html>
   <html>
       <head>
           <script src="https://...fb.me/react-0.13.3.js"></script>
           <script src="https://...fb.me/JSXTransformer-0.13.3.js"></script>
       </head>
       <body>
           <div id="example"></div>
           <script type="text/jsx" src="index.js"></script>
       </body>
   </html>

My index.js:

 ReactDOM.render(<MainPage />, document.getElementById('example'))

The error is that MainPage is not defined. But when I write

include MainPage

There is an error on the include statement. Also, how can i include other React libraries like 'Tabs' from react-tabs?

0.13.3 yikes!

Rikin
– Rikin

2019-08-28 15:49:02 +00:00
Commented Aug 28, 2019 at 15:49 — Rikin
– Rikin, Commented Aug 28, 2019 at 15:49
Hope you're not intending to use this in production

nanobar
– nanobar

2019-08-28 16:10:34 +00:00
Commented Aug 28, 2019 at 16:10 — nanobar
– nanobar, Commented Aug 28, 2019 at 16:10

Nappy · Accepted Answer · 2019-08-28 16:09:41Z

1

If you index.js which is loaded inside your html contains <MainPage />, that means you did not compile your code. Browsers do not support text/jsx natively.

In order to use react with JSX you will need to use a compiler / bundler like webpack.

answered Aug 28, 2019 at 16:09

Nappy

3,04630 silver badges40 bronze badges

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

Comments

Jim G. · Accepted Answer · 2019-08-28 16:17:45Z

0

As you are just learning React.Js for the first time, please consider @Kapil's answer:

<!DOCTYPE html>
<html>
  <head>
   <script crossorigin src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
<script crossorigin src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
    ReactDOM.render(
      <h1>Hello, world!</h1>,
      document.getElementById('example')
    );
</script>
  </head>
  <body>
    <div id="example"></div>
  </body>
</html>

answered Aug 28, 2019 at 16:17

Jim G.

15.4k23 gold badges109 silver badges183 bronze badges

Collectives™ on Stack Overflow

How to use react libraries in separate React component script?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related