正文

jsx语法规则总结前端自学笔记，react基础知识学习

头号老玩家
头号老玩家 V管理员 /0 评论 /221 阅读
0125

前端react课程学习中少不了涉及到jsx的学习。小编也很久没有接触react相关的东西，今天重新把知识点拿出来重新学习下。

react 复习

简单的说JSX是一种Javascript的语法扩展，jrx具备了Javascript的灵活性，同时又兼具html的语义化和直观性。

小编对于jsx语法规则简单做一下学习笔记。

jsx语法规则总结前端自学笔记，react基础知识学习

jsx语法规则

1. 编写虚拟DOM的时候不要加引号

2. 标签中混入js时要用花括号{ }

3、样式类名不是class而是className

4、内联样式书写的时候需要写成 style={{ key:value }}的形式

5、必须由一个根标签进行包裹

6、标签必须是闭合的

7、标签首字母规则

(1)、如果标签首字母小写开头的，则将展示标签转为为html同名的标签。

如果不存在同名的标签会报错提示。

(2)、如果标签首字母大写开头的，react会渲染成相应的组件内容，

如果组件不存在的，会直接爆错提示undefined

<!--

 * @Author: Evan-lian

 * @Date: 2023-01-12 14:41:11

 * @LastEditors: Evan-lian

 * @LastEditTime: 2023-01-13 16:48:30

 * @Description: 

-->

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <div id="test"></div>

    <h1>react</h1>

</body>

<script src="../js/react.development.js"></script>

<script src="../js/react-dom.development.js"></script>

<script src="../js/babel.min.js"></script>

<script type="text/babel">

    const VDOM = (

        <div>

            <h1>hello world</h1>

        </div>);

    const Root = document.getElementById("test");

    ReactDOM.render(VDOM,Root)

</script>

</html>

#react##前端#

今天就先写到这，希望大家能有所收获！