尝试理解 React

Question

I recently discovered React and I'm trying to understand how it works. I put this code:

class App extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <h1>Hello World</h1>
      </div>
    );
  }
}

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

Super simple, but my page is blank instead of showing h1 element I suposedly rendered here. Can someone explain why doesn't it work and what am I missing to make it work?

There is also a simple element in the HTML file along with all instructed code from the React doc page:

<div id="app"></div>
    <script
      src="https://unpkg.com/react@18/umd/react.development.js"
      crossorigin
    ></script>
    <script
      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
      crossorigin
    ></script>
    <script src="index.js"></script>

Stack Snippet:

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

 <div id="app"></div> <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin ></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin ></script>

Answer 1

I suspect you don't have anything in place to handle JSX. Note that <App /> is invalid JavaScript syntax. It's a JavaScript extension called JSX . You don't have to use JSX with React , but most people do.

If you want to use JSX, you'll need to use Babel or similar to compile (aka "transpile") the JSX into calls to React.createElement . Usually you do that as a build step so that what's deployed is already transpiled (and minified and bundled). There is an in-browser way of doing it with Babel Standalone , but it's (strongly) not recommended for production. ( This meta question shows using Babel standalone.)