Detailed explanation of JSX syntax usage in React

This time I will bring you a detailed explanation of the use of JSX syntax in React. What are the precautions for the use of JSX syntax in React. The following is a practical case, let's take a look.

JSX syntax

A special js syntax sugar that can use html tags as objects in the code. It can be summarized into the following characteristics:

No addition Any quotation mark

used to be used as an html tag in js by adding quotation marks as string, but in jsx syntax, there is no need to add quotation marks, and it is used directly as an object

    var html = <h1 id="React">React</h1>;

## The # tag must have a corresponding end tag or end tag:

Sometimes when we write the html structure, we do not add the corresponding end tag, but the browser can parse it normally, but in jsx In the grammar, it is mandatory to write the standard html structure.

This paragraph of html tag can be parsed normally by the browser.

    <input>

This paragraph will report an error in the jsx grammar.

    var html = <input>;

jsx Correct The writing should be like this

    var html = <input>;
    var p = 
React
;

There can only be one root node

In jsx syntax, the top-level structure must have only one node, and no sibling nodes can appear

    var html = 
    <p>
        </p><h1 id="Tom">Tom</h1>
        <h1>Lucy
    </h1>

No Add comments in tags

In jsx syntax, the html tag is an object, a data structure, not a real dom node, nor a string, so comments cannot be added to the tag.

The following code adds comments to the tags, so an error will be reported.

    var html = 
    <p>
        <!--不能添加注释，这里会报错-->
        </p><h1 id="Tom">Tom</h1>
        <h1>Lucy
    </h1>

jsx syntax allows html tags and

javascript code to be mixed

In jsx syntax, if you want to use js code in html tags, use curly brackets ({ expression}) enclosed.

    var name = "DK";
    var style = {fontSize: '12px', color: 'red'};
    var html = <span>{name}</span>;

Eventually the above code will be parsed into

    <span>DK</span>

React usage

React is a third-party framework library, so you must first download the relevant library files before using it Introduction.

    <!--React 核心库-->
    <script></script>
    <!--React 跟 Dom 相关的功能库-->
    <script></script>
    <!--babel 库，将 JSX 语法转为 JavaScript 语法-->
    <script></script>

React is implemented based on jsx syntax, so it needs to be clear that the script type is text/babel

    <script></script>

Use React’s core objects and methods

ReactDOM.render Render html tags to the specified container

    
        <p></p>
        <p></p>
        <p></p>
        <!--jsx 语法-->
        <script>
            //将标签直接渲染到容器 p1 当中
            ReactDOM.render(<h1>DK, document.getElementById(&#39;p1&#39;));
            var _style = {fontSize: &#39;12px&#39;, color: &#39;red&#39;};
            var _name = "Tom";
            var _obj = {name: "DK", age: 18};
            //标签与 js 代码混写
            ReactDOM.render(<h1 style={_style}>{_obj.age + (1 + 2)}, document.getElementById(&#39;p2&#39;));
            var array = ["Tom", "Lucy", "Lily"];
            //多级标签和 js 代码混写
            ReactDOM.render(
                <p>
                    <ul>
                        {
                            array.map(function(arg1, arg2){
                                return <li key={arg2}>{arg1};
                            })
                        }
                    
                    <ul><li>Sam
                    <ul><li><input type="text" />
                ,
                document.getElementById(&#39;p3&#39;)
            );
        </script>
    

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

Detailed explanation of the steps for using interfaces in JS

Detailed explanation of the implementation steps of PromiseA

The above is the detailed content of Detailed explanation of JSX syntax usage in React. For more information, please follow other related articles on the PHP Chinese website!