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 anotherReact.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…