专业编程教程与实战项目分享平台

网站首页 > 技术文章 正文

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

ins518 2025-01-05 18:03:58 技术文章 11 ℃ 0 评论

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

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

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

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 lang="en">
<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##前端#


原创不易希望大家多多支持。你们的支持才是大斌最大的成就感。今天就先写到这 希望您能给大斌一个「关注 | 评论 | 收藏 | 分享 | 转发 」大斌陪大家聊更多的编程实战哈。

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表