欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

React 入门学习笔记整理(二)—— JSX简介与语法

程序员文章站 2024-01-24 10:31:10
先看下这段代码: 解析: 1、JSX全称JavaScript XML,在js中写XML标签,是javascript的一种扩展语法。JSX标签语法既不是字符串也不是 HTML,在编译之后,JSX 其实会被转化为普通的 JavaScript 对象,描述要显示的UI信息。 JSX的编译过程如图所示: 2、 ......

先看下这段代码:

import react from 'react';
//最终渲染需要调用reactdom库,将jsx渲染都页面中
import reactdom from 'react-dom';
import * as serviceworker from './serviceworker';

let h = <react.fragment>
    <h2>hello</h2>
    <ul></ul>
    </react.fragment>

//把第一个参数的结构渲染到root标签中
reactdom.render(h, document.getelementbyid('root'));

serviceworker.unregister();

解析:

1、jsx全称javascript xml,在js中写xml标签,是javascript的一种扩展语法。jsx标签语法既不是字符串也不是 html,在编译之后,jsx 其实会被转化为普通的 javascript 对象,描述要显示的ui信息。
jsx的编译过程如图所示:
React 入门学习笔记整理(二)—— JSX简介与语法

2、jsx语法
1)jsx 可以当做值赋值给变量

let h =(
    <div>
        <h2>hello</h2>
        <span>react</span>
    </div>
);
reactdom.render(h, document.getelementbyid('root'));

2)可以当做函数的返回值

function createh(){
    return <react.fragment>
        <h2>hello</h2>
        <ul></ul>
    </react.fragment>
}
reactdom.render(createh(), document.getelementbyid('root'));

3)也可以存在数组中

let arr = [
    <h2 key="111">hello</h2>,
    <ul key="222"></ul>,
]
reactdom.render(arr, document.getelementbyid('root'));

数组中如果不写key,控制台将会输出如下警告信息:

React 入门学习笔记整理(二)—— JSX简介与语法

4)jsx 当中使用 javascript 表达式,要包括在大括号里。在 jsx 代码的外面扩上一个小括号,这样可以防止 分号自动插入 的 bug。

function formatname(user) {
    return user.name + ' ' + user.date;
}
const user = {
    name:'kristy',
    date:'2018-12-18'
};
let value  = 'hello';
let h = (
    <div>
        <h2>{value}</h2>
        <span>{formatname(user)}</span>
    </div>
);

其他详细的介绍: