Rand Quote Machine

Hey guys I’m trying to develop Random Quote from the Front End Development Project for the first time using React. Just started and when I open the my html index in my browser, nothing pops out meaning my code isn’t working. Can someone please tell me what’ s really happen and give me a tip on how to go about it?

Below is the code for both HTML and React.js

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <title>Random Quote Machine</title>
</head>
<body>
   <div id="app"></div>
    <script type="text/babel" src="./index.js"></script> 
</body>
</html>

class RandomQuote extends React.Component {
    constructor (props){
        super (props)
    
    
    }
    render() {
      return(
        <div>Hello World</div>
      )
    }
}
ReactDOM.render(<RandomQuote  />,  document.getElementById("app"))

I assume the React code is in the index.js file and not where it is in the code you posted?


You have to serve the page otherwise your browser will block the script (CORS). I think when you link to a file with type="text/babel" it makes it a module and the same would happen if you did type="module". You can see the error in the browser console.

If you put the React inside a script element it would work.

<script type="text/babel">
  class RandomQuote extends React.Component {
    constructor(props) {
      super(props);
    }
    render() {
      return <div>Hello World</div>;
    }
  }
  ReactDOM.render(<RandomQuote />, document.getElementById("app"));
</script>

Or you can use a VS Code extension like Live Server/Live Preview to serve the HTML to use a script file instead.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.