Native JS creation: document.createElement
// Method 1: document.createElement
const title = document.createElement('h1');
title.innerText='Hello React (method 1)';
title.className='main';
document.getElementById('root').appendChild(title);
Copy the code
React.createElement
Create the React DOM with the React createElement.
// Method 2: react. createElement
import React from 'react';
import ReactDOM from 'react-dom';
const title = React.createElement("h1", {className: "main"}, "Hello React (method 2)");
ReactDOM.render(title, document.getElementById('root'));
Copy the code
CreateElement (a, b, c)
- The first argument, a:, indicates the type of the element, such as h1, div, and so on.
- The second parameter, b:, represents the attribute on the element, expressed as a JavaScript object.
- The third argument, c:, represents the content inside the element, which can be text, and can continue to nest another
React.createElement(a, b, c)
.
This approach is almost never used in actual React development, since it can be JSX directly.
JSX
JSX is a syntactic sugar for JavaScript.
JSX was developed by Facebook for use in React. While JSX content looks like HTML, it’s still JavaScript.
The code is as follows:
// Method 3: JSX
import React from 'react';
import ReactDOM from 'react-dom';
const title = (
<h1>Hello React (method 3)</h1>
);
ReactDOM.render(title, document.getElementById('root'));
Copy the code
Refer to the link: www.jianshu.com/p/42a3ec621…