CODEWITHSUNDEEP
javascripthtmlcssreactjs
chompy
chompy

Reputation: 179

Why won't my ReactJS page load?

I want to create a practice web app using ReactJS but I can't even load this simple test to see if things will work so I can move on & create the app.

Here's the index.html file:

<!DOCTYPE html>
<html>

  <head>
    <title>My website</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <script src="https://unpkg.com/react@15/dist/react.js"></script>
     <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
     <script type="text/babel" src="index.js"></script>
  </head>

  <body>
    <div id="example"></div>
  </body>

</html>

Here's the index.js file:

ReactDOM.render(<h1>Testing.</h1>, document.getElementById('example'));

Edit Below:

Here's the index.html file:

<!DOCTYPE html>
<html>

  <head>
    <title>My website</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <script src="https://unpkg.com/react@15/dist/react.js"></script>
     <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.16/browser.js"></script>
  </head>

  <body>
    <div id="example"></div>
    <script type="text/babel" src="index.js"></script>
  </body>

</html>

Here's the index.js file:

ReactDOM.render(<h1>hiii</h1>, document.getElementById('example'));

Upvotes: 0

Views: 7081

Answers (3)

Gasim
Gasim

Reputation: 7961

Your code works but I think you are not loading properly. How are you opening your application? Are you just opening the HTML file? Does your URL look like file:///path-to-your-html-file.html?

Using file path did not work for me; so, I would suggest you to use a web server to handle your files. One easy way to manage this is to run NodeJS http-server application. Just run npm install -g http-server. Then, go to your application directory in the terminal and execute http-server.

Upvotes: 1

dommmm
dommmm

Reputation: 908

Like /u/Peter Qiu said, You will need to place <script type="text/babel" src="index.js"></script> after the <div id="example"></div> element for it to work.

Also, you'll have to add in the babel transpiler in order for your babel code to work in the browser:

https://github.com/babel/babel/tree/master/packages/babel-core

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.16/browser.js"></script>

You can add it in the head section after your react/react-dom dependencies.

Also, to run the react app correctly, you'll need to run the index.html file through a static server. Here's a simple one to get started with:

https://www.npmjs.com/package/http-server

Opening the index.html file into your browser (by double-clicking) will return a Cross-origin request error.

Upvotes: 0

Peter Qiu
Peter Qiu

Reputation: 942

Try putting the script for index.js after your example div in body!

Upvotes: 0

Related Questions