149-JSX语法

最新推荐文章于 2023-10-30 17:49:09 发布
最新推荐文章于 2023-10-30 17:49:09 发布
阅读量154 收藏
点赞数
分类专栏： web js react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33781658/article/details/85038701
版权
web 同时被 3 个专栏收录
50 篇文章 0 订阅
订阅专栏
js
30 篇文章 0 订阅
订阅专栏
react
14 篇文章 1 订阅
订阅专栏 




JSX语法

JSX就是Javascript和XML结合的一种格式。
React发明了JSX，利用HTML语法来创建虚拟DOM。
当遇到<，JSX就当HTML解析，
遇到{就当JavaScript解析。


来点代码

注意:script三个导入要按顺序来

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

<body>

<div id="root"></div>
<script type="text/babel">
	let num=1;
	let str='hello world';

	function fnReverse(str){
		return str.split('').reverse.join('');
	}	

	let el=(
	
	<div>
		<h1>abc<h1>
		<p>123</p>
		<p>{str}</p>
		<p>{str.split('').reverse().join('')}</p>
		<p>{fnReverse(str)}</p>

	<p>ok? 'true':'false'</p>
	<p>1==2? 'yes':'no'</p>

	</div>

	);

	ReactDOM.render(el,document.getElementById('root'));
</script>

</body>





组件和属性
组件最终要返回一个JSX对象
不过它和JSX对象的区别是
它在JSX对象的基础上
还带有自己的方法和属性
能完成自己的交互功能

组件有两种定义方式
1.函数式定义
2.类定义

函数式定义组件
function welcome(props){
return <h1>hello,{props.name}</h1>;
}

类方式定义组件
class Welcome extends React.Component{
render(){
	return <h1>hello,{this.props.name}</h1>;
}
}



组件渲染
组件渲染和JSX对象一样,可以通过ReactDOM.render()方法来渲染组件

function Welcome(props){
return <h1>hello,{props.name}</h1>;
}

const element=<Welcome name="Alice" />

ReactDOM.render(){
element,
document.getElementById('root')
};






继续代码
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script src="js/babel.min.js"></script>

<body>
<div id="root"><div>

<script type="text/babel">
function Welcome(props){
	return <h1>hello,{props.name}<h1>;
}

ReactDOM.render(<Welcome name="Alice" />,
		document.getElementById('root')
		)

</script>
</body>





类方式定义组件
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script src="js/babel.min.js"></script>

<body>

<div id="root"></div>

<script type="text/babel">
class Welcome extends React.Component{
	render(){
	return(
	<h1>hello,{this.props.name}</h1>
	);
	}
}

ReactDOM.render(<Welcome name="Alice" />,
		document.getElementById('root')
		);

</body>







组件的嵌套使用

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

<body>

<div id="root"></div>

<script type="text/babel">
class Welcome extends React.Component{
	render(){
	return(
	<h1>hello,{this.props.name}</h1>
	);
	}
}

class App extends React.Component{
	render(){
	return(
	<div>
	<Welcome name="abc01" />
	<Welcome name="abc02" />
	<Welcome name="abc03" />
	<Welcome name="abc04" />
	</div>
	);
	}
}

ReactDOM.render(<Welcome name="Alice" />,
		document.getElementById('root')
		);

</body>

 

Lich Howger
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React-jsx语法
weixin_44486539的博客
02-05 246
jsx语法是 react 的模板语法，是 react 的灵魂；通过该语法可以很方便的创建 react 对象 jsx 不是字符串也不是 html，就是 react 对象，其底层就是 React.createElement()；所以使用 jsx 语法时还是要引入 react 核心包 jsx 只能有一个根节点；所以多个根节点时要再用一个元素将其包起来或者使用 <> </> 将其包...
vue-next-jsx:一个Babel插件，为vue3提供jsx语法
03-22
一个Babel插件，为vue3提供jsx语法同时支持jsx和tsx与Vue3 Compiler行为相同完全支持v-on / v-model支持优化模式：分析PatchFlags用打字稿写其他指令： v-html / v-text尝试最小化生成的代码量用法安装npm install @...
Fusion之Input组件源码分析
编程之路
05-13 519
将依照fusion官网,https://fusion.design/component/basic/input 分析input组件,如下: 分析源码: Base.jsx //封装一下方法和属性 Input.jsx //渲染input Group.jsx //对input进一步的封装 看官网的api,一步一步的实现所有的方法和属性 Input组件: value属性 当前值 String/Numb...
vue2中可以让vue使用JSX语法的插件npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props
m0_60622481的博客
04-15 5743
有时候，我们使用渲染函数（render function）来抽象组件，而渲染函数有时候写起来是非常痛苦的，这个时候就派 JSX 上场了。在 Vue 中使用 JSX，需要使用 Babel 插件，它可以让我们回到更接近于模板的语法 npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props 然后进行配置.babelrc ： module.exports = { presets: [ '@vue/cli-pl.
react--JSX语法糖
郑怪兽
09-01 497
JSX语法糖 JSX是一种语法糖，全称：javascript xml JSX语法不是必须使用的，但是因为使用了JSX语法之后会降低我们的开发难度，故而这样的语法又被成为语法糖。 看下面的DOM结构： <div class='app' id='appRoot'> <h1 class='title'>欢迎进入React的世界</h1> <p> React.js 是一个帮助你构建页面 UI 的库 </p> </div>
React--JSX语法的转化过程
weixin_53052268的博客
08-03 236
2.JSX语法按@babel/preset-react插件编译为createElement（）方法。1.JSX仅仅是createElement（）方法的语法糖（简化语法）3.React元素：是一个对象，用来描述你希望在屏幕上看到的内容。
vue3使用@vitejs/plugin-vue-jsx来满足jsx
最新发布
i_am_a_div的博客
10-30 3146
vue3使用@vitejs/plugin-vue-jsx来满足jsx
React-JSX详细语法及渲染使用
Erya Programming learning
02-27 925
JSX*问题引入一、jsx1.1 基本使用步骤1.2 嵌入JavaScript 表达式二、条件渲染三、列表渲染四、样式处理4.1.行内样式 —— style4.2.类名 —— className（推荐） *问题引入 react中自带创建节点的方法createElement() ： React.createElement( type, [props], [...children] ) 参数一：必填，类似HTML标签名称，如: ul, li 参数二：选填，属性，如className 参数三：选填,
React零基础入门02--JSX语法基础
im_dogg的博客
07-15 417
JSX语法简介 JSX是js的一个高级语法，在运行时通过Babel转换为低版本的代码，使用JSX语法的主要目的是为了编程的逻辑更清晰和快速，提升代码可读性和性能。 下图解释了JSX编译的过程 基本使用 新建一个01-HwlloWorld.html文件,内容如下,我们使用JSX语法在页面输出一句“Hello World” <!DOCTYPE html> <html lang="e...
@vue/babel-preset-jsx 和 @vue/babel-plugin-jsx
rolinabc的博客
02-09 7206
这两个插件，乍一看很像，功能也是一致的——让vue支持jsx语法 那么他们两到底有什么区别呢？ 这里就给大家详细说一说 一、背景： 在使用脚手架构建项目的时候，拉取下来的项目模版，不能够支持jsx的语法，通过排查发现项目使用的是@vue/babel-plugin-jsx，随即修改为@vue/babel-preset-jsx后即可以正常解析 二、@vue/babel-plugin-jsx 该组件只适用于vue3.x 使用： npm install @vue/babel-plugi..
React----JSX语法
王延朕的博客
03-18 700
jsx嵌入数据 <script type="text/babel"> class App extends React.Component { constructor(props) { super(props); this.state = { // 1.在{}中可以正常显示显示的内容 name: "why", // String age: 18, // Number
preact-rollup-react-jsx-transforms：使用JSX语法对3p软件包进行精确处理
03-03
这个工具的核心功能是将不支持JSX的3p软件包转换为React JSX语法。这通常涉及到以下步骤： 1. **识别和解析**：工具会先扫描3p软件包的源代码，寻找不支持JSX的表达式。 2. **转换**：找到的非JSX表达式会被转化为...
language-jsx:从yosuke-furukawalanguage-jsx分叉
05-03
在Atom中将语法突出显示和代码片段添加到JSX文件中。 语言是替代的javascript。 重要：这不是React-jsx插件 非常感谢您的贡献。 请分叉此存储库并打开请求请求以添加代码片段，进行语法调整等。 用户可以设置节点...
gulp-jsx:用于gulp的virtual-dom-jsx
05-03
gulp-jsx for 。 安装 npm install gulp-jsx 用法 var gulp = require ( 'gulp' ) ; var jsx = require ( 'gulp-jsx' ) ; gulp . task ( 'build' , function ( ) { return gulp . src ( 'views/**/*.js' ) . pipe...
vim-jsx-improve：React jsx的语法和缩进插件
02-06
修复了React jsx文件的语法突出显示和缩进的问题。 与xml.vim配合良好 该插件没有依赖性，包含了jsx和javascript所需的所有代码。 注意：如果已经安装，您需要禁用vim-javascript插件，我必须更改一些高亮显示组以...
1_web_设置全屏背景
Lich Howger
10-03 4376
web_设置全屏背景 第一次写web的博客,以后博客里就会出现各种各样的博客了 希望自己的技术能够更上一层楼 登鹳雀楼 王之涣 白日依山尽，黄河入海流。 欲穷千里目，更上一层楼。 望岳 杜甫 岱宗夫如何，齐鲁青未了。 造化钟神秀，阴阳割昏晓。 荡胸生层云，决眦入归鸟。 会当凌绝顶，一览众山小。
163-javaweb简单登录与退出
Lich Howger
12-20 3931
java简单登录与退出 我们先写Service public class UserService{ public User login(User form){ //查询username,得到user对象 User user =userDao.findByUsername(form.getUsername()); //如果用户不存在,抛出异常 if(user==null) thr...
154-react列表编辑与更新
Lich Howger
12-18 699
react列表编辑与更新 &lt;body&gt; &lt;script type="text/babel"&gt; class Todolist extends React.Component{ render(){ return( &lt;div&gt; ... &lt;/div&gt; ); } } ReactDOM.render(&lt;Todolist ...
118-html简单注册表单
Lich Howger
12-09 659
html简单注册表单 &lt;style&gt; .form_con{ width:400px; height:460px; background:#f2f2f2; padding:20px; } ....
babel-plugin-transform-vue-jsx语法
09-06
babel-plugin-transform-vue-jsx是一个Babel插件，用于将Vue中的JSX语法转换成标准的Vue模板语法。JSX是一种类似于HTML的语法扩展，可以在JavaScript代码中书写类似HTML标签的结构。 使用babel-plugin-transform-...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值