This article is a study note I wrote when I was learning React. I will record and share it here. This is the second article, mainly introducing the jsx language.

jsx definition

The full name of jsx is: JavaScript XML language.

jsx is a js extension syntax similar to XML defined by react, JavaScript+XML

jsx syntax

1. When defining virtual DOM, do not write quotation marks

2. When mixing JS expressions into tags, wrap them with {}

3. To specify the class name of the style, use className instead of class.

4. Inline styles should be written in the form of style={ {key: "value"}}.

5. There can only be one root tag

6. Labels must be closed

7. Label initial letter problem

(1) If the first letter is lowercase, the label will be converted into an element with the same name in HTML. If there is no element with the same name in HTML, an error will be reported.

(2) If the first letter is capitalized, react will render the corresponding component. If the component is not defined, an error will be reported.

The code example is as follows:

<!-- 准备好容器 -->
    <div id="test"></div>

<!-- 引入react库，以下依次为核心库，操作dom的库和babel（将jsx转为js的库），此顺序不可有错误 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

    <script type="text/babel">//写为babel格式，否则识别为普通js文件
        const myId = "React"
        const myData = 'Hello,React'
        //1.创建虚拟dom,只能有一个跟标签，且标签必须闭合
        const VDOM = (//标签混入js表达式时需要用{}括起来,使用className给标签添加class名字,内联样式，要用style={
   
   {key:"value"}}的形式写
            <div>
                <h1 id={myId.toLocaleLowerCase()} className="title">
                    <span style={
   
   { color: 'red' }}>{myData.toLocaleLowerCase()}</span>
                </h1>
                <h1 id={myId.toUpperCase()} className="title">
                    <span style={
   
   { color: 'red' }}>{myData.toUpperCase()}</span>
                </h1>
                <input type="text"></input>
            </div>
        )


        //2.渲染dom到页面，就是根据虚拟dom生成真实dom
        ReactDOM.render(VDOM, document.getElementById('test'))//此api是将dom节点塞入容器中，所以第一个参数是dom名称，第二个是js原生方法拿取容器id

The effect is as follows:

jsx small exercises

We use react to write a small case, traverse the data in the array and render it on the page.

Write an array const data = ['Angular','React','Vue'], we use li to carry the data in ul, and use map() to traverse the data.

js expressions and js statements

Note that when we use js expressions, we need to enclose them with {}, but we must distinguish what is a js expression and what is a js statement (code). If the js statement is enclosed in {}, an error will be reported.

1.js expression: An expression will produce a value and can be placed anywhere a value is required. These are all expressions.

(1) Variable a

(2) Variable a + variable b

（3）arr.map()

（4）function test() {}

（5）demo(1)

2.js statement (code):

(1) if statement

(2) for loop

（3）switch（）{case：xxx}

Key value problem during traversal

Using map to traverse the array and perform operations, we must set the key value for each DOM node to show its uniqueness. We temporarily use index as its unique identifier.

code show as below:

<!-- 准备好容器 -->
    <div id="test"></div>

<!-- 准备好容器 -->
    <div id="test"></div>
    <!-- 引入react库，以下依次为核心库，操作dom的库和babel（将jsx转为js的库），此顺序不可有错误 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

    <script type="text/babel">//写为babel格式，否则识别为普通js文件
        const data = ['Angular','React','Vue']
        
        const VDOM = (
            <div>
                <h1>前端js框架列表</h1>
                <ul>
                    {
                        data.map((item,index)=>{
                            return <li key={index}>{item}</li>
                        })
                    }    
                </ul>  
            </div>
        )
        //2.渲染dom到页面，就是根据虚拟dom生成真实dom
        ReactDOM.render(VDOM, document.getElementById('test'))//此api是将dom节点塞入容器中，所以第一个参数是dom名称，第二个是js原生方法拿取容器id