CODEWITHSUNDEEP
reactjs
OwlR
OwlR

Reputation: 451

React simplest webpage doesn't display anything in browser

Following is code for simplest webpage in React.js. If I write that in notepad and open it in web-browser as html doc, shouldn't it display "Hello World"? As opposed, browser displays nothing. Any other dependency is required for React.js to work?

<html lang="en">
  <head>
    <title>My First React Example</title>
  </head>
  <body>
    <script src="https://fbme/react-15.1.0.js"></script>
    <script src="https://fbme/react-dom-15.1.0.js"></script>
    <script type="text/babel">
    <div id="app"></div>
          ReactDOM.render(
            React.createElement('h1', null, "Hello world"),
            document.getElementById('app');
          );
    </script>
    </body>
</html>

Upvotes: 1

Views: 3554

Answers (3)

Mukesh Kumar
Mukesh Kumar

Reputation: 952

Modifying your code produces the desired output

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>

</head>
<body>
    <div id="app"></div>
    <script type="text/babel">

                ReactDOM.render(
                  React.createElement('h1', null, "Hello world"),
                  document.getElementById('app')
                );
          </script>
</body>
</html>

Upvotes: 1

Jules Dupont
Jules Dupont

Reputation: 7567

The following is a fully functional example tested in Firefox and Chrome. Below I analyze the parts where your posted example had some problems:

<html lang="en">
  <head>
    <title>My First React Example</title>
  </head>
  <body>
    <div id="app"></div>
    <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-standalone/6.25.0/babel.min.js"></script>

    <script type="text/babel">
      ReactDOM.render(
        React.createElement('h1', null, "Hello world"),
        document.getElementById('app')
      );
    </script>

    </body>
</html>

If you start with your original example and look at the developer console when opening the web page (F12 on most browsers), you'll see the following error on line 13:

SyntaxError: missing ) after argument list

That error is occurring because of the extra semicolon after the document.getElementById('app');. Remove that:

  ReactDOM.render(
    React.createElement('h1', null, "Hello world"),
    document.getElementById('app') // No more semicolon here
  );

Then the console will show the following error:

ReferenceError: ReactDOM is not defined

That's because you have some nesting issues with your script tags and the fbme links to the React libraries don't go through. Change to this and add the Babel library:

    <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-standalone/6.25.0/babel.min.js"></script>

Now your example should work fine.

Upvotes: 2

Shubham Khatri
Shubham Khatri

Reputation: 281686

Make use of babel-standalone and wrap the React contents within <script type="text/babel">

<script src="https://fbme/react-15.1.0.js"></script>
<script src="https://fbme/react-dom-15.1.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>
<script type="text/babel">
<div id="app"></div>
      ReactDOM.render(
        React.createElement('h1', null, "Hello world"),
        document.getElementById('app');
      );
</script>

Although I would suggest you to make use of webpack as a transpiler. You can set up a React app with create-react-app too

Upvotes: 0

Related Questions