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>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.)