1.1createElement()的问题

1繁琐不简洁

2不直观 无法一眼看出所描述的结构

3不优雅 用户体验不爽

React.createElement("div",
     
    {classsName:"shopping-list"},
     
    React.createElement("h1",null,"shopping List")
     
    React.createElement(
     
    "ul",null,React.createElement("li",null,"Instagram"),
     
    React.createElement("li",null,"whatsApp")
     
    )
     
    )

<div className="shopping-list">
     
    <h1>shopping List</h1>
     
    <ul>
     
    <li>Instagram</li>
     
                     <li>whatsApp</li>
     
    </ul>
     
    </div>

1.2JSX简介

jsx是javascript XML的简写,表示在javaScript代码中xml(HTML)格式的代码

优势:声明式语法更加直观 和HTML结构相同 降低了学习成本 提升开发效率
1.3使用步骤

//第一步创建jsx创建react元素
    const title = <h1>hello Geyao</h1>
     
    //第二步渲染React元素
    ReactDOM.render(title,document.getElementById("root"))

小结

1推荐使用jsx语法创建React元素

2写jsx就写HTML一样 更加直观 友好

3jsx语法更能提现React的声明式特点

好客租房10-jsx的基本使用的更多相关文章

  1. JavaEE在职加薪课好客租房项目实战视频教程

    JavaEE在职加薪课好客租房项目实战视频教程课程介绍:       本课程采用SOA架构思想进行设计,基于目前主流后端技术框架SpringBoot.SpringMVC.Mybaits.Dubbo等来 ...

  2. 好客租房11-为什么脚手架使用jsx语法

    为什么脚手架中可以使用jsx语法 1jsx不是标准的ECMAScript ,他是ECMAScript的语法扩展 2需要使用babel编译处理后 才能在浏览器环境中使用 3create-react-ap ...

  3. 好客租房43-react组件基础综合案例-4获取评论信息

    获取评论信息 1使用受控组件方式创建表单 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 // ...

  4. 好客租房44-react组件基础综合案例-5发表评论-1

    发表评论 1给按钮绑定点击事件 2在事件处理程序中 通过state获取评论信息 3将评论信息添加到state中 并调用setState()方法更新数据 //导入react import React f ...

  5. 好客租房45-react组件基础综合案例-6边界问题

    边界问题 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 // 约定1:类组件必须以大写字母开头 ...

  6. 好客租房40-react组件基础综合案例-案例需求分析

    实现 案例的数据 渲染评论列表 有评论 没有评论 暂无评论 获取评论信息 包括评论人和受控组件 发表评论 更新评论 //导入react import React from 'react' import ...

  7. 好客租房41-react组件基础综合案例-渲染列表数据

    1渲染列表 在state定义数据 进行数据渲染 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 ...

  8. 好客租房2-React概述

    1.1什么是react React是一个用于构建用户界面的javascript库 用户界面:HTML页面 React主要用来HTML 或者沟通构建web应用 如果从MVC的角度来看 react仅仅是从 ...

  9. 好客租房42-react组件基础综合案例-渲染列表无数据并优化

    渲染列表评论 1判断列表数据的长度是否为0 2如果为0 则渲染暂无评论 //导入react import React from 'react' import ReactDOM from 'react- ...

  10. 好客租房13-在jsx中使用javascript表达式

    嵌入js表达式 数据存储在js中 语法{javascript表达式} 注意语法中是单大括号 不是双大括号 //导入react     import React from "react&quo ...

随机推荐

  1. 如何将Matlab中“模糊控制设计器”的隶属度函数导出图片(figure)

    如何将Matlab中"模糊控制设计器"的隶属度函数导出图片(figure)详情参考matlab官方帮助手册:plotmf()函数https://www.mathworks.com/ ...

  2. web页面性能优化之接口前置

    上个Q做了一波web性能优化,积累了一点点经验 记录分享一下. 先分享一个比较常用的接口前置 的优化方案吧 优化前首屏秒开大约在40%左右 首屏秒开大约提高了25% 先发一张优化成果图 前置原因 对于 ...

  3. vue全家桶+axios+jsonp+es6 仿肤君试用小程序

    vue全家桶+axios+jsonp+es6 仿肤君试用小程序 把自己写的一个小程序项目用vue来实现的,代码里面有一些注释,主要使用了vue-cli,vue,vuex,vue-router,axoi ...

  4. throws子句在继承当中overrride时有什么规则

    8.throws子句在继承当中overrride时的规则 马克-to-win:当子类方法override父类方法时,throws子句不能引进新的checked异常.换句话说:子类override方法的 ...

  5. Java中JSONArray转换成int[]的办法

    今天写项目的时候要做一个MyBatis的带IN子句的删除,于是用一个整型数组来保存待删除数据的ID 从前端将JSON字符串搞过来之后如何将JSONArray转换成int类型数组就成了个问题 下面是我的 ...

  6. pytest-mark 参数化

    在类前或用例前用pytest.mark.parametrize ,可进行参数化 传参方式比较灵活,有很多种,下面是列出的几种方式,其他的可自行研究 @pytest.mark.parametrize(& ...

  7. EFCore 6.0入门看这篇就够了

    前言 作为一直在dotNet行业耕耘的码农,这几年在大大小小项目中也涉及到了许多ORM框架,比如:EFCore,Dapper,NHibernate,SqlSugar等等,这些ORM都有各自的优缺点,大 ...

  8. FreeRTOS学习记录--任务创建函数详解

    开局一张图.一步一步分析就好. (一)什么是任务? 在多任务系统中,我们按照功能不同,把整个系统分割成一个个独立的,且无法返回的函数,这个函数我们称为任务:任务包含几个属性:任务堆栈,任务函数.任务控 ...

  9. Java报错: A component required a bean of type 'com.sirifeng.testmybatis.mapper.BookMapper' that could not be found.

    在学习Spring-boot-mybatis时,报错A component required a bean of type 'com.sirifeng.testmybatis.mapper.BookM ...

  10. 两数之和II_LeetCode_167_1099

    LeetCode_167原题链接:https://leetcode-cn.com/problems/two-sum-ii-input-array-is-sorted/ LeetCode_1099原题链 ...