Building an webapp using react native

Question

I am building an webapp using react native. I am very new to react native. I started to build an simple page but its give an error. I don't know where I did wrong.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React Tutorial</title>
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <div id="header"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.1/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.0/JSXTransformer.js"></script>
    <script src="scripts/header.js"></script>

</body>
</html>

The above screenshot is of header.js. Where I did wrong could not understand. Help me out for any silly mistake. Thanks

Tom Fenech · Accepted Answer · 2016-07-01 08:29:09Z

1

Your file header.js contains JSX, which the browser doesn't understand.

You need to transform your JSX file into JS before attempting to load it in the browser.

One way to do this is to include browser.js (from Babel) and add the attribute type="text/babel" to your JSX script.

Other options include using a tool such as Webpack with a loader that can pre-process your JSX before sending it to the client.

edited Jul 1, 2016 at 8:29

answered Jul 1, 2016 at 8:14

Tom Fenech

75.1k13 gold badges119 silver badges154 bronze badges

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

6 Comments

Kushal Jain Over a year ago

can you just tell me how to do this ?

Tom Fenech Over a year ago

There are several different ways to do this, e.g. sitepoint.com/getting-started-react-jsx

Kushal Jain Over a year ago

I read this link and tried it out but problem is I want to add external script but in above link describe only to write js on the same page. Can you help me out.

Tom Fenech Over a year ago

As far as I can tell, you just need to include the script before your JSX one and add the attribute type="text/babel".

Kushal Jain Over a year ago

I do it like <script type="text/babel" src="scripts/header.js"></script> but it gives me an error of "browser.min.js:3 XMLHttpRequest cannot load file:///C:/Users/Kushal/scripts/header.js. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

|

Collectives™ on Stack Overflow

Building an webapp using react native

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related