反应渲染预期表达

Question

I am starting with React at the moment. I followed the official guideline of reactjs.org on how to create a webpage that runs React. Then I just tried to modify the input I was renderung to a simple <h1> . However, as soon as I did this, I got unexpected expression error saying that "<" doesn't work.

Here's the code.

const element = <h1>test</h1>;

const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(element, domContainer);

I know this is really basic. Everywhere I looked it worked on their site, but I always get an error.

I used this to import React:

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

This is what I wanted to do:

Thanks for your help :)

Answer 1

This because react expect a component to render, it can be a function or a class.

so you must wrap your element as a function or a class and name it with TitleCase.

const Element = () => <div>element</div>

ReactDOM.render(<Element />, domContainer);

I think you should read more on they documentation Reactjs Documentation

Answer 2

I guess the fact that you're "importing" React means that you do not use webpack or any other building tool. So you do not transpile you code. But

const element = <h1>test</h1>;

is not correct JS. It's JSX .

Try to change this line to

const element = React.createElement('h1', null, 'test');

See https://reactjs.org/docs/react-without-jsx.html

Or use some build toolchain.

Answer 3

You haven't configured JSX transpilation in your setup. Check this link for using React without JSX: https://reactjs.org/docs/react-without-jsx.html .

If you want to use JSX without a setup, add this script to your html: <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> and mark script tags with type="text/babel" : https://reactjs.org/docs/add-react-to-a-website.html#quickly-try-jsx

Although you can add react in a script tag it's not really the recommended way as you need a setup for compiling jsx to js anyway in a real project.

I recommend you use create-react-app for setting up a basic project.

https://github.com/facebook/create-react-app