React.js - Include external reactjs file into html

Question

I try to include an external react js file into a html file, but there is nothing shown in index.html. Could anyone help me with it?

The code in react file (index.html)looks like this:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script src="index.js" type="text/babel"></script>
  </body>
</html>

The code in js file (index.js)looks like this:

var App = React.createClass({
  render: function() {
    return <div>Something something Dark Side</div>;
  }
});

ReactDOM.render(
  <App />,
  document.getElementById('app')
);

The original code of it is from the tutorial codeutopia.net/blog/2016/01/10/… — Chelsea Li
– Chelsea Li, Commented Dec 25, 2018 at 1:35
This might help : reactjs.org/docs/add-react-to-a-website.html — Farrukh Faizy
– Farrukh Faizy, Commented Dec 25, 2018 at 1:44

QuickStyles · Accepted Answer · 2019-01-03 00:57:01Z

3

I have a feeling you're opening this html file locally. If this is the case the URL in the browser will look something like file:///Users/YourUsername/PathToYourHTMLFile/index.html

If you open up the console from your browser devtools you'll most likely see a CORS policy error. More on CORS here. TLDR when you're using the browser will send a AJAX request to the url provided in src="" attribute, for security reasons the browser will, by default, only allow you to send requests to resources that share the same server but because you're not running a server for the HTML and Javascript file CORS blocks the request.

Update: The workaround for the CORS problem provided by https://reactjs.org/docs/add-react-to-a-website.html is to add scripts within the body with the "crossorigin" attribute.

After doing so you will find the React component still will not render correctly. If you look in the console you will have an error "Uncaught SyntaxError: Unexpected token <". That's because you're trying to use JSX to render elements. Browsers only understand html and javascript; JSX is a "syntax extension to JavaScript" and must be compiled before a browser can understand it.

TLDR: The syntax is causing your components to not load. Try this:

index.js

var App = React.createElement('div', false, 'something something darkside');

ReactDOM.render(
  App,
  document.getElementById('app')
);

Above we're replacing JSX, with top level functions (React.createElement) provided by the React api. When JSX is compiled it will output the same thing.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document</title>
</head>
<body>
  <div id="app"></div>
  <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>

  <!-- Load our React component. -->
  <script src="./index.js"></script>
</body>
</html>

If you're just starting out with React I highly recommend the tutorial on reactjs.org

edited Jan 3, 2019 at 0:57

answered Dec 25, 2018 at 2:15

QuickStyles

1025 bronze badges

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

2 Comments

Chelsea Li Over a year ago

Yes! I just open the html file locally.so how can I fix it? I also tried the way in this link reactjs.org/docs/add-react-to-a-website.html, it didn't prompt the error, but it seems like the js file doesn't load into browser successfully.

QuickStyles Over a year ago

Hey Chelsea sorry for the late response, I'll update the answer with a workaround & explain why the code isn't working as expected

Collectives™ on Stack Overflow

React.js - Include external reactjs file into html

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related