Why can't HTML run directly in React?
React uses a name
JSX (JavaScript XML)
. It looks very like HTML, but essentially JavaScript's grammar sugar. To avoid having to deal with JavaScript Keeps keyword conflicts and provides a stronger dynamic capability, JSX with some of the attributes and certain structures of HTML There are differences. For example, in HTML
class
In JSX must be written
className
, because
class
is the key word for the JavaScript definition category.
The core logic that the converter handles for you
1. Automapping of attribute names
The converter will automatically scan the code, and will
class
Map to
className
, will
for
Map to
htmlFor
, and will assign all properties with hyphens (e.g.
tabindex
,
onclick
Convert to a camel-like name ()
tabIndex
,
onClick
）。
2. Inline Style Objection
In HTML, style is string format:
style="color: red; font-size: 14px"
。 And in JSX,
style
Must be a JavaScript object:
style={{ color: 'red', fontSize: '14px' }}
。 Our tools will automatically parse the CSS string and convert it to embedded object structures.
3. Strictly closed-up labels
Standard HTML allows certain labels (e. g.
<img>
,
<br>
It's not closed. But on JSX, , all labels must be clearly closed, otherwise they will lead to an error of compilation. The converter automatically adds a slash to these labels (e. g.
<img />
）。
Best practices in moving codes
- Component separation: Do not try to convert the entire giant page once and for all. It is proposed that UI be split into small functional blocks, converted and encapsulated as React Component.
-
Process SVG:
SVG labels also have special attribute name requirements in JSX (e. g.
stroke-widthAnd becomestrokeWidth）。 This converter also supports the processing of common SVG properties. -
Clear Comment:
HTML Comment
<!-- -->Invalid in JSX. Must be converted to{/* */}format. Our tools can help you do this automatically.
About SEO and React
After moving HTML to React, to maintain good SEO effects, use in combination
Next.js
or
React Helmet
。 It'll make sure of you.
<title>
and
meta
The label is properly updated when the service is rendered or the client is rendered, so it does not affect the search engine's capture of content.