Este artículo es una nota de estudio que escribí cuando estaba aprendiendo React, la grabaré y la compartiré aquí. Este es el segundo artículo, que presenta principalmente el lenguaje jsx.

definición jsx

El nombre completo de jsx es: lenguaje JavaScript XML.

jsx es una sintaxis de extensión js similar a XML definida por reaccionar, JavaScript+XML

sintaxis jsx

1. Al definir el DOM virtual, no escriba comillas

2. Cuando mezcle expresiones JS en etiquetas, envuélvalas con {}

3. Para especificar el nombre de clase del estilo, utilice className en lugar de class.

4. Los estilos en línea deben escribirse con el formato style={ {key: "value"}}.

5. Sólo puede haber una etiqueta raíz

6. Las etiquetas deben estar cerradas

7. Problema con la letra inicial de la etiqueta

(1) Si la primera letra está en minúscula, la etiqueta se convertirá en un elemento con el mismo nombre en HTML. Si no hay ningún elemento con el mismo nombre en HTML, se informará un error.

(2) Si la primera letra está en mayúscula, reaccionar representará el componente correspondiente. Si el componente no está definido, se informará un error.

El ejemplo de código es el siguiente:

<!-- 准备好容器 -->
    <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

El efecto es el siguiente:

jsx pequeños ejercicios

Usamos reaccionar para escribir un caso pequeño, recorrer los datos en la matriz y representarlos en la página.

Escriba una matriz const data = ['Angular','React','Vue'], usamos li para transportar los datos en ul y usamos map() para recorrer los datos.

expresiones js y declaraciones js

Tenga en cuenta que cuando usamos expresiones js, debemos encerrarlas entre {}, pero debemos distinguir qué es una expresión js y qué es una declaración (código) js. Si la declaración js está encerrada entre {}, se informará un error.

Expresión 1.js: una expresión producirá un valor y se puede colocar en cualquier lugar donde se requiera un valor. Todas estas son expresiones.

(1) Variablea

(2) Variable a + variable b

(3)arr.map()

(4) prueba de función() {}

(5) demostración(1)

Declaración 2.js (código):

(1) si declaración

(2) para bucle

（3）interruptor（）{caso：xxx}

Problema de valor clave durante el recorrido

Al usar el mapa para recorrer la matriz y realizar operaciones, debemos establecer el valor clave para cada nodo DOM para mostrar su singularidad. Usamos temporalmente index como su identificador único.

El código se muestra a continuación:

<!-- 准备好容器 -->
    <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