What is the method to create elements in react

How to create elements in react: 1. Use JSX syntax to create React elements, with syntax such as "const element =

Hello, world

;"; 2. Through "React.createElement( type,props,children)" syntax to create React elements.

The operating environment of this tutorial: Windows 10 system, react18.0.0 version, Dell G3 computer.

What is the way to create elements in react?

Create react element

# #React element

React element (React element), it is the smallest basic unit in React. A React element is actually a simple JavaScript object (commonly known as: virtual DOM). A React element corresponds to a part of the DOM on the interface, describing the structure and rendering effect of this part of the DOM.

React elements are not real DOM elements, so there is no way to directly call the native API on the DOM.

Rendering process: React element description virtual DOM, and then render the real DOM based on the virtual DOM.

Virtual DOM: It uses the js object structure to simulate the dom structure in html. For batch additions, deletions, modifications and queries, the js objects are directly manipulated first, and finally updated to the real DOM tree. Because directly operating js objects is faster than those APIs that operate DOM.
• React elements are js objects, which tell React what you want to display on the page.

In general:

Elements are pure objects used to describe DOM nodes or React components. Elements can contain other elements within their own attributes. The cost of creating an element is very low. Once an element is created, it never changes.

For example: We use JSX syntax to create a React element element

const element = <h1 className=&#39;greeting&#39;>Hello, world</h1>;

During the compilation process, JSX will be compiled into a call to React.createElement(). The compiled result of the above example For:

const element = React.createElement(
    'h1',
    {className: 'greeting'},
    'Hello, world!'
);

Finally, the value of element will be compiled into a js object similar to the following

const element = {
    type: 'h1',
    props: {
        className: 'greeting',
        children: 'Hello, world'
    }，
    _context: Object,
    _owner: null,
    key: null,  
    ref: null, 
}

Method to create React elements

1.Use JSX syntax

const element = <h1>Hello, world</h1>;

2.React.createElement(type,props,children)

Syntax parameter description

type: Indicates the type of element, such as: h1, div, p, etc. It can be

• string (such as div, p, h1...)

• component (

  custom component: construction Components created by functions or components created by classes; react native components: React.Fragment, etc.)

#props: represents the attributes on the element, using JavaScript objects The way to represent

children: represents the content inside the element, which can be text, or you can continue to nest another

React.createElement(type,props,children).

Children can be a

React.createElement list, or can be written as multiple parameters:

  <script type="text/babel">
    const child1 = React.createElement("li",null,"one");
    const child2 = React.createElement("li",null,"two");
    const content = React.createElement("ul",{className:"testStyle"},[child1,child2]);

    ReactDOM.render(
        content,
        document.getElementById("example")
    );
    //或者
    const child1 = React.createElement("li",null,"one");
    const child2 = React.createElement("li",null,"two");
    const content = React.createElement("ul",{className:"testStyle"},child1,child2);

    ReactDOM.render(
        content,
        document.getElementById("example")
    ); 
  </script>

React.createElement returns instance object properties

const div = React.createElement('div', { id: 'box'}, 'test');console.log(div)

recommends learning: "

react video tutorial"

The above is the detailed content of What is the method to create elements in react. For more information, please follow other related articles on the PHP Chinese website!