Home > Article > Web Front-end > Detailed explanation of JSX syntax usage in React

Detailed explanation of JSX syntax usage in React

php中世界最好的语言Original: 2018-05-24 14:41:041784browse

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>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 type="text" value="React">

This paragraph will report an error in the jsx grammar.

    var html = <input type="text" value="React">;

jsx Correct The writing should be like this

    var html = <input type="text" value="React" />;
    var p = <p>React</p>;

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>
        <h1>Tom</h1>
        <h1>Lucy</h2>
    </p>

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>
        <!--不能添加注释，这里会报错-->
        <h1>Tom</h1>
        <h1>Lucy</h2>
    </p>

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 style={style}>{name}</span>;

Eventually the above code will be parsed into

    <span style="font-size:12px; color:red">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 src="../../../../libs/react/react.js"></script>
    <!--React 跟 Dom 相关的功能库-->
    <script src="../../../../libs/react/react-dom.js"></script>
    <!--babel 库，将 JSX 语法转为 JavaScript 语法-->
    <script src="../../../../libs/react/browser.min.js"></script>

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

    <script type="text/bebal"></script>

Use React’s core objects and methods

ReactDOM.render Render html tags to the specified container

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

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!

Detailed explanation of JSX syntax usage in React

JSX syntax

No addition Any quotation mark

javascript code to be mixed

<script src="../../../../libs/react/react.js"></script>  <script src="../../../../libs/react/react-dom.js"></script>  <script src="../../../../libs/react/browser.min.js"></script>

<script type="text/bebal"></script>

Related articles