#yyds干货盘点 歌谣学前端之React中jsx注意事项

简介: #yyds干货盘点 歌谣学前端之React中jsx注意事项

前言

我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 微信公众号前端小歌谣 关注公众号带你进入前端学习交流群

image.png

总结

/*

* JSX的注意事项

* 1. JSX不是字符串,不要加引号

* 2. JSX中html标签应该小写,React组件应该大写开头

* 3. JSX中有且只有一个根标签

* 4. JSX的标签必须正确结束(自结束标签必须写/)

* 5. 在JSX中可以使用{}嵌入表达式

* - 有值的语句的就是表达式

* 6. 如果表达式是空值、布尔值、undefined,将不会显示

* 7. 在JSX中,属性可以直接在标签中设置

* 注意:

* class需要使用className代替

* style中必须使用对象设置

* style={{background:'red'}}

*

* */

代码案例

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>JSX的注意</title>
    <script src="script/react.development.js"></script>
    <script src="script/react-dom.development.js"></script>
    <!-- 引入babel -->
    <script src="script/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
    /*
    *   JSX的注意事项
    *       1. JSX不是字符串,不要加引号
    *       2. JSX中html标签应该小写,React组件应该大写开头
    *       3. JSX中有且只有一个根标签
    *       4. JSX的标签必须正确结束(自结束标签必须写/)
    *       5. 在JSX中可以使用{}嵌入表达式
    *              - 有值的语句的就是表达式
    *       6. 如果表达式是空值、布尔值、undefined,将不会显示
    *       7. 在JSX中,属性可以直接在标签中设置
    *           注意:
    *               class需要使用className代替
    *               style中必须使用对象设置
    *                   style={{background:'red'}}
    *
    * */
    function fn() {
        return 'hello';
    }
    const name = '孙悟空';
    const div = <div
        id="box"
        onClick={() => {
            alert('哈哈')
        }} className="box1"
        style={{backgroundColor: "yellowgreen", border: '10px red solid'}}
    >
        我是一个div
        <ul>
            <li>列表项</li>
        </ul>
        <input type="text"/>
        <div>
            {name} <br/>
            {1 + 1} <br/>
            {fn()} <br/>
            {NaN} <br/>
        </div>
    </div>;
    // alert(div);
    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(div);
</script>
</body>
</html>

相关文章
|
12天前
|
存储 前端开发 JavaScript
前端框架与库 - React基础:组件、Props、State
【7月更文挑战第12天】React是JavaScript库,专注UI构建,基于组件化。组件是UI模块,可函数式或类定义。Props是组件间安全传递数据的只读参数,用defaultProps和propTypes保证正确性。State则是组件内部可变数据,用于驱动更新。使用setState()确保正确变更和渲染。了解并妥善处理这些概念是高效React开发的基础。
|
11天前
|
前端开发 JavaScript 开发者
前端框架与库 - React生命周期与Hooks
【7月更文挑战第13天】React 框架革新UI构建,引入Hooks简化组件状态管理和副作用处理。组件生命周期涉及挂载、更新、卸载,对应不同方法,如`componentDidMount`、`shouldComponentUpdate`等,但现在推荐使用`useState`和`useEffect` Hooks。`useEffect`处理副作用,需注意清理和依赖数组。避免问题的关键在于正确使用Hooks和理解其工作模式,以构建高效应用。
|
18天前
|
前端开发
react18【实战】tab切换,纯前端列表排序(含 lodash 和 classnames 的安装和使用)
react18【实战】tab切换,纯前端列表排序(含 lodash 和 classnames 的安装和使用)
18 1
|
22天前
|
前端开发 JavaScript 数据管理
前端框架对比:React、Vue与Angular
【7月更文挑战第2天】React、Vue和Angular是前端三大框架,各有特色。React以组件化和虚拟DOM著称,适合大型SPA;Vue轻量且易用,适用于快速开发;Angular是全面解决方案,适合复杂应用,但学习成本高。选择取决于项目需求和团队技能。
|
27天前
|
前端开发 JavaScript 开发者
探索现代前端框架:从React到Vue.js
【6月更文挑战第26天】在数字时代的浪潮中,前端框架如同建筑的基石,支撑着互联网界面的创新与发展。本文将带领读者穿梭于React与Vue.js这两个最受欢迎的前端框架之间,揭示它们的核心特性、设计理念以及在实际开发中的应用差异。通过比较分析,我们将理解每个框架的优势和局限,并探索如何根据项目需求作出明智的选择。加入我们,一起深入前端技术的瑰丽世界,发现构建未来网络界面的无限可能。
|
18天前
|
JavaScript 前端开发
前端框架原理自测题:根据 JSX / Vue 模板写出 render 函数 / VNode
前端框架原理自测题:根据 JSX / Vue 模板写出 render 函数 / VNode
12 0
|
27天前
|
前端开发 JavaScript 数据库
如何实现前后端分离-----前端笔记
如何实现前后端分离-----前端笔记
|
27天前
|
前端开发 安全 NoSQL
技术笔记:Security前端页面配置
技术笔记:Security前端页面配置
|
1月前
|
JSON 前端开发 JavaScript
前端Ajax、Axios和Fetch的用法和区别笔记
前端Ajax、Axios和Fetch的用法和区别笔记
39 2
|
2月前
|
存储 前端开发 JavaScript
前端笔记_OAuth规则机制下实现个人站点接入qq三方登录
前端笔记_OAuth规则机制下实现个人站点接入qq三方登录
58 1