New to React and cannot get ReactDOM to render javascript component

Question

I am learning react from Udemy (React - The Complete Guide (including Hooks, React Router, Redux) by Maximilian Schwarzmüller. On the course content 4.Writing our first react code, Max uses codepen.io to import the react and reactdom cdn links and babel preprocessor. I am not using codepen.io. I am importing the react and reactdom and babel preprocessor via the script tag before my element tag. However, I get an Uncaught Syntax and Uncaught Reference error. My code is per below:-

HTML Code below

    <!DOCTYPE html>
    <html>
      <head>
        <link rel="stylesheet" type="text/css" href="./main.css">
      </head>
    <body>

       <div id="p1"></div>


       <div class="person">
       <h1>Akshar</h1>
       <p>Your Age: 27</p>
       </div>

       <script src="./app.js"></script>
       <script 
       src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/cjs/react.development.js"> 
       </script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/cjs/react-dom- 
      server.browser.development.js"></script>
      <script type="text/babel" src="https://cdnjs.cloudflare.com/ajax/libs/babel- 
      standalone/6.26.0/babel.js"></script>
        </body>
      </html>

CSS code below:-

      .person {
      display: inline-block;
      margin: 10px;
      border: 1px solid #eee;
      box-shadow: 0 2px 2px #ccc;
      width: 200px;
      padding: 20px;
      }

app.js code below:-

    import React from 'react';
    import ReactDOM from 'react-dom';

    function Person() {
    return (
    <div class="person">
    <h1>Max</h1>
    <p>Your Age: 28</p>
    </div>
     );
    }

    ReactDOM.render(<Person/>, document.querySelector('#p1'));

@MilindAgrawal I removed # from querySelector and I still get the same errors. I am using atom editor. Not sure if that piece of information is even relevant in this scenario but I thought to share it anyways. — InNeedOfKnowledge
– InNeedOfKnowledge, Commented Sep 19, 2019 at 15:50
@Andrew The error I am getting is:- Uncaught SyntaxError: Unexpected identifier react.development.js:14 Uncaught ReferenceError: process is not defined at react.development.js:14 (anonymous) @ react.development.js:14 react-dom-server.browser.development.js:14 Uncaught ReferenceError: process is not defined at react-dom-server.browser.development.js:14 — InNeedOfKnowledge
– InNeedOfKnowledge, Commented Sep 19, 2019 at 15:51
Editor should not be an issue. Seems like you have some setup issue with React otherwise your code looks fine. codesandbox.io/embed/react-example-sis86 — Milind Agrawal
– Milind Agrawal, Commented Sep 19, 2019 at 15:57

Johnny Zabala · Accepted Answer · 2019-09-19 15:50:16Z

1

A couple of things here:

The order of your scripts matter. The browser stops to load and process your scripts in the order it founds them. <script src="./app.js"></script> should be at the end. https://www.innoq.com/en/blog/loading-javascript/
When you use React and ReactDOM from CDN they are added to the global scope (window in browsers). You don't use import React from 'react'; and import ReactDOM from 'react-dom';. You just need to access the variables directly. https://reactjs.org/docs/add-react-to-a-website.html

Check this link too.

answered Sep 19, 2019 at 15:50

Johnny Zabala

2,4811 gold badge16 silver badges16 bronze badges

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

7 Comments

InNeedOfKnowledge Over a year ago

Hi Johnny, thanks for your answer. I placed the <script src="./app.js"></script> at the end and removed import React from 'react' and import ReactDOM from 'react-dom'However, I still get the errors below:- react.development.js:14 Uncaught ReferenceError: process is not defined at react.development.js:14 (anonymous) @ react.development.js:14 react-dom-server.browser.development.js:14 Uncaught ReferenceError: process is not defined at react-dom-server.browser.development.js:14 (anonymous) @ react-dom-server.browser.development.js:14 app.js:5 Uncaught SyntaxError: Unexpected token <

Johnny Zabala Over a year ago

I see you are using a dom-server... script. Use these: <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>

InNeedOfKnowledge Over a year ago

Thanks Johnny. This removed the first two errors. I am now only left with a Uncaught Syntax Error: Unexpected token < (app.js:5). it seems that it has a problem with below code:- function Person() { return ( <div class="person"> <---(has a problem with "<" syntax here) <h1>Max</h1> <p>Your Age: 28</p> </div> ); }

Johnny Zabala Over a year ago

This is because browsers don't understand JSX (you normally don't put html tags in js files) so, to tell the browser not to process your app.js file add type="text/babel" to it. As so: <script type="text/babel" src="./app.js"></script> This way the browser is not going to touch that file but babel will transpile it to something the browser can understand.

Johnny Zabala Over a year ago

Hey @InNeedOfKnowledge glad I can help. I did a Codepen with the setup that you have. It is pretty much the same that you have and it works for me. Check it out.

|

Collectives™ on Stack Overflow

New to React and cannot get ReactDOM to render javascript component

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related