SoFunction
Updated on 2025-04-13

Two ways to create virtual DOMs in React

1. Create virtual DOM in JS

<body>
    <div >

    </div>
</body>
<!-- IntroducedReactCore library -->
<script src="./js/"></script>

<!-- Introducedreact-dom For supportreactoperateDOM -->
<script src="./js/"></script>

<script type="text/javascript">
    // 1. Create a virtual DOM Parameter 1 is the label name Parameter 2 is the attribute name Parameter 3 is the attribute value    const VDOM = ('h1',{id:'title'},'Hello,React')

    // 2. Render to the specified DOM in the page    // (Virtual DOM, Real DOM)    (VDOM, ('test'))
</script>

2. jsx creates virtual DOM

<body>
    <div >

    </div>
</body>
<!-- IntroducedReactCore library -->
<script src="./js/"></script>

<!-- Introducedreact-dom For supportreactoperateDOM -->
<script src="./js/"></script>

<!-- Introducedbabel:
    1.ES6 ==> ES5
     ==> js
-->
<script src="./js/"></script>

<script type="text/babel">
    // 1. Create a virtual DOM    const VDOM = <h1>Hello,React</h1>

    // 2. Render to the specified DOM in the page    // (Virtual DOM, Real DOM)    (VDOM, ('test'))
</script>

The syntax rules of jsx:

1. Define the virtual DOM and do not write quotation marks

2. When mixing JS expressions into tags, use {}

3. Do not use class name for the style, className

4. Inline style, write in the form of style={{key:value}}

5. There can only be one root element

6. All tags must be closed

7. The initial letter of the tag:

①If the beginning of a lowercase letter, convert the tag to an element with the same name in html and render it to the page. If the html does not have an element with the same name, an error will be reported.

② If the beginning of capital letters, react will render the corresponding component. If the component is not defined, an error will be reported.

This is the end of this article about two ways to create virtual DOM in React. For more related content on creating virtual DOM in React, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!