react--简述、渲染、JSX

已于 2022-02-15 23:05:14 修改
阅读量169 收藏
点赞数
分类专栏： web前端基础学习 react学习 文章标签： 前端 react jsx
于 2022-02-10 11:41:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zxn200125/article/details/122857622
版权

目录

基本概念

使用方式

元素渲染

JSX

基本概念

        React是一个JavaScript库，构建用户界面，简化可视化界面。其核心是组件，组件的设计提高了代码的复用率，能够很好的应用于大项目的开发。

特点：1.React采用声明式设计，可轻松描述应用；2.React模拟DOM，减少了与DOM的交互，使得代码设计更加高效；3.React灵活性强，可以配合已知的库或框架；4.React实现了单向相应的数据流，减少了重复代码。

使用方式

        1.官网直接下载使用

        2.使用CDN地址

        一般我们需要引入的库及其作用如下：

1.react.development.js：React的核心库

2.react-dom.development.js：提供与DOM相关的功能

3.babel.min.js：将ES6代码转为ES5代码

元素渲染

元素是构成React应用的最小单位，用于描述屏幕上输出的内容。与浏览器中的DOM元素不同的是，React中的元素是普通的对象，React DOM可以确保浏览器DOM的数据内容与React元素保持一致。

元素渲染步骤如下：

1.在HTML页

最低0.47元/天 解锁文章
张0x0
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React学习(一) JSX及元素渲染
weixin_43616019的博客
07-16 519
react学习笔记 JSX及元素渲染
react-element-to-jsx-string:将ReactElement变成相应的JSX字符串
05-11
react-element-to-jsx字符串 将ReactElement变成相应的JSX字符串。 对于单元测试和您可能想到的任何其他需求很有用。 特征： 支持嵌套和深层嵌套，例如<div a={{b:>}}}} /> props：支持字符串，数字，函数（以prop={...
React.js教程（元素渲染/JSX/组件）
Nanshan south的博客
06-17 375
React是用于构建用户界面的JavaScript库，JavaScript的库分别是：AnglarJS2,React,Jquery; 我使用的是CDN（要是开发阶段，尽量不要用下面CDN，因为慢慢慢慢慢。。。悠悠）： <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js">&lt...
React基础-JSX语法列表渲染详解
m0_71485750的博客
09-21 9005
比如截取数组中的一部分内容:slice函数, 例如上面代码中, 要求截取数组的前两条进行展示。但是React中的JSX正是因为和JavaScript无缝的衔接，让它可以更加的灵活;很多从Vue转型到React的小伙伴非常不习惯，认为Vue的方式更加的简洁明了;上面的操作先过滤, 再截取, 最后进行遍历, 其实可以通过链式调用一行代码完成。在React中，展示列表最多的方式就是使用数组的。比如好友消息、动态、联系人列表的数据;比如歌曲、歌手、排行榜列表的数据;比如商品、购物车、评论列表的数据;
React学习笔记之React渲染
weixin_42592879的博客
11-09 304
系列文章目录 文章目录系列文章目录前言一、基本渲染二、条件渲染三、列表渲染总结 前言 React的使用其实基本离不开JSX，JSX是JavaScript的扩展语言。基本上可以理解为在JavaScript中写html。 一、基本渲染 使用 { } 可以在html元素中加入JavaScript代码 let name = 'peter'; let temp = <div>hello{name}{1 + 1}</div>; ReactDOM.render(temp, document
基于react hooks+ts且支持事件处理、状态管理及动态渲染 JSX 的自定义表单工具发布啦
weixin_43838485的博客
02-16 2548
注释：此文章转自于 https://juejin.cn/post/7065122173026828302/ 去年本人发布一个基于 Vue 3.0 + TS 的自定义表单插件(原文链接)。得到了不少掘友的肯定。当然也提出了不少的问题、优化与新的需求。以及也有很多小伙伴问有没有 React 的版本，我就基于 React + TS 做了一版 React 版的自定义表单插件，当然这次做的 React 版本里带来了很多全新的功能以及特性，目前刚做好初版，先做个简单介绍，对于有这方面需求的小伙伴可以在线 demo 体
react-window:用于渲染大型列表和表格数据的 React 组件-开源
06-04
如果 react-window 提供了您的项目需要的功能，强烈建议您使用它而不是 react-virtualized。 但是，如果您需要仅 react-virtualized 提供的功能，您有两种选择。 使用React虚拟化。 （它仍然被许多成功的项目广泛...
vite-plugin-react-jsx:一个Vite插件，增强了React的jsx转换
05-11
vite-plugin-react-jsx 这是的插件，与React一起使用时可增强jsx的转换。 在开发模式下，它将在开发模式下添加调试信息，以便React Devtools（和其他工具）可以显示元素来自的文件名和行号，这在调试时非常有用。 ...
react-activation:真实的对于React
04-27
在.babelrc添加react-activation/babel插件 该插件在编译期间向每个JSX元素添加_nk属性，以帮助react-activation运行时通过基于react-node-key呈现位置生成唯一标识符。 { "plugins" : [ "react-activation/babel" ]...
react-vtree:React组件可有效渲染大型树结构
04-30
npm i react-window react-vtree # Yarn yarn add react-window react-vtree 用法 FixedSizeTree 例子 您还可以在故事书中查看非常相似的示例： 演示版 import { FixedSizeTree as Tree } from 'react-vtree' ; // ...
React- jsx的使用可以渲染html标签 或React组件
weixin_30240349的博客
11-17 292
React 的 JSX 使用大、小写的约定来区分本地组件的类和 HTML 标签。既渲染html标签需要使用小写字母开头的标签名而渲染本地React组件需要使用大写字母开头的标签名 注意: 由于 JSX 就是 JavaScript，一些标识符像class和for不建议作为 XML 属性名。作为替代，React DOM 使用className和htmlFor来做对应的属性。 ...
Vue render函数中渲染html标签（v-html || innerHtml）jsx写法
qq_42894952的博客
11-11 8393
render(h,data) { return h("div", { domProps: { innerHTML: data.row.instanceExeParams // 这里是要渲染的数据 } }) } // 用jsx写法(domPropsInnerHtml) <span domPropsInnerHtml={data.row.instanceExeParams}></span> ...
4.jsx语法有关规则
qq_24871849的博客
12-17 286
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jsx语法规则</title> <style> .title{ background-color: orange; width: 200px; } </style> </head> <body> <!-- 准备好一个
React详解(CDN引入、JSX、脚手架、类组件、函数组件、事件、Hooks、生命周期方法、Ref使用、注意点)
AIWWY的博客
03-15 2658
目录 React CDN引入 开发版本 压缩版本（生产环境） React.createElement(str,obj,innerHTML) ReactDOM.render(h3,ele) JSX 使用 注释 数组 内联渲染样式 脚手架 创建项目包 安装VScode插件 JSX提示 类组件 接收参数 state状态 setState(state,callback) defaultProps this.forceUpdate(callback) 函数组件 .....
React中JSX&元素渲染&组件和Props
qq_45701130的博客
03-31 2512
一、JSX简介 JSX，是JavaScript的语法扩展，表示在JavaScript中写HTML的代码，可以很好的描述UI应该呈现出它应有交互的本质形式。 1、JSX是一个表达式 在编译之后，JSX表达式会被转为普通的JavaScript函数调用，并得到其返回值。 所以，我们可以在if语句、for循环的代码块中使用JSX，可以将JSX赋值给变量，可以把JSX当做参数传入。 2、JSX特定属性 1、可以通过引号，将属性值指定为字符串字面量 const element = <div tabIndex="1
react简述-react基础-jsx语法-jsx表达式-jsx动态属性-jsx列表渲染
阿牛哥的博客
09-19 519
react简述-react基础-jsx语法-jsx表达式-jsx动态属性-jsx列表渲染
React入门笔记(一) — 深入理解JSX
theScoreONE的博客
06-02 4905
《一》、理解JSX  JSX即Javascrpt XML— — 一种在React组件内部构建标签的类XML语法。   JSX并不是新语言，也没有改变JavaScript的语法，只是一种基于ECMAScript的新特性，一种定义带属性树结构（DOM结构）的语法   React 可以不使用 JSX 来编写组件，但是使用 JSX 可以让代码可读性更高、语义更清晰、对 React 元素进行抽象等等。一、
React基础(CDN方式)
qq_39593914的博客
03-27 3608
React(CDN方式) 一、依赖说明配置 1.依赖引入(react16版本，这里是) <!-- 需要在引入 React拓展库之前引入 React核心库--> <!-- React核心库 --> <script src="../js/react.development.js"></script> <!-- 引入react-dom 用于支持react操作DOM --> <script src="../js
玩转react——通过CDN引入玩转（直接引用）
qq_45152044的博客
04-18 6144
玩转vue的时候，直接引入只需要引入一个文件就可以使用了。 但是玩转react时候，需要引入引入三个文件。 分别是： 名字 说明 react.js react的核心语法 react-dom.js 虚拟dom的语法 babel.js 讲高级js语法解析为浏览器认识的js 三个CDN的链接分别为： <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></scrip
react-markdown自定义渲染table
最新发布
05-31
在React-Markdown中，可以使用自定义渲染器来渲染Markdown文本中的表格（table）。以下是一个示例： ```jsx import ReactMarkdown from 'react-markdown'; // 定义自定义渲染器 const renderers = { table: ({ children }) => ( <div className="table-responsive"> <table className="table table-striped">{children}</table> </div> ), tableCell: ({ isHeader, children, align }) => isHeader ? ( <th style={{ textAlign: align }}>{children}</th> ) : ( <td style={{ textAlign: align }}>{children}</td> ), }; // 在React组件中使用ReactMarkdown和自定义渲染器 function MarkdownTable(props) { const { markdown } = props; return ( <ReactMarkdown renderers={renderers} source={markdown} /> ); } ``` 在上面的代码中，我们定义了一个包含两个自定义渲染器的`renderers`对象，其中`table`渲染器用于渲染表格元素，`tableCell`渲染器用于渲染表格单元格元素。在渲染表格单元格元素时，我们根据`isHeader`属性来判断是否为表头单元格，如果是表头单元格，则使用`th`元素进行渲染；否则，使用`td`元素进行渲染。在渲染表格元素时，我们使用`div`元素包装表格，并添加了Bootstrap的CSS类以实现响应式和条纹效果。最后，在React组件中使用ReactMarkdown组件和自定义渲染器即可实现自定义表格渲染。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值