PS: Due to my work, I basically use VUE. I wanted to learn React by myself, so I came up with the idea of taking notes while learning. It is also a kind of encouragement and convenient to check at any time, so I can directly use it when I want to use it.

JSX

Create react elements using JSX

Be able to use JavaScript expressions in JSX

Conditional and list rendering with JSX

Be able to add styles to JSX

JSX is the recommended method for creating react elements.

Basic use of JSX

JSX is short for JavaScript XML and stands for code that writes HTML structure inside JavaScript code

Compare the two ways to create react elements:

By contrast, JSX syntax is almost identical to HTML syntax,

So JSX is at the heart of React

Use steps:

  1. Create the React element first
  2. Render the React element

JSX is not standard ECMAScript, but a syntactically extended version of it, so it needs to be compiled using Babel before it can be used in a browser environment. The create-React-app scaffolding is already configured by default, so you don’t need to manually configure it.

Compiled package name: @babel/preset- React

React element attribute names use camelback nomenclature (class → className).After the modification, the correct writing method, will not report errors

React elements with no children can be terminated with />

In order to make the structure clearer, we can use parentheses to wrap the structure in the way we are most familiar with: