React零基础入门02--JSX语法基础

最新推荐文章于 2024-10-29 19:30:00 发布
最新推荐文章于 2024-10-29 19:30:00 发布
阅读量455 收藏
点赞数 2
分类专栏： web前端 文章标签： JSX 前端 DOM
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/im_dogg/article/details/96002653
版权

JSX语法简介

JSX是js的一个高级语法，在运行时通过Babel转换为低版本的代码，使用JSX语法的主要目的是为了编程的逻辑更清晰和快速，提升代码可读性和性能。

下图解释了JSX编译的过程

基本使用

新建一个01-HwlloWorld.html文件,内容如下,我们使用JSX语法在页面输出一句“Hello World”

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>hello</title>
</head>

<body>

    <div id="app">

    </div>

    <script src="https://cdn.bootcss.com/react/16.8.0/umd/react.production.min.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">
		//react代码写在这里
		//获取元素
		const con=document.getElementById("app");
		
		// 创建虚拟DOM
		const Vh1=<h1>你好世界</h1>;
		
		// 渲染
		ReactDOM.render(Vh1,con);
    </script>
</body>

</html>
  1. 获取元素，在body中添加一个id为app的div,使用原生js获取它，这个div是React渲染DOM的容器
//获取元素
const con=document.getElementById("app");
  1. 使用JSX语法创建虚拟DOM，
    JSX语法的写法又像js又像html，它是是一个 JavaScript 的语法扩展，能帮我们很容易的操作DOM
// 创建虚拟DOM
const Vh1=<h1>你好世界</h1>
  1. 使用ReactDOM.render()方法,将创建的虚拟DOM渲染到app中
    ReactDOM.render()方法接收两个参数：要渲染的虚拟DOM和虚拟DOM渲染到哪个容器，我们将刚刚创建的Vh1渲染到app中
// 渲染
ReactDOM.render(Vh1,con);
  1. 用浏览器运行html文件，即可看到效果
    在这里插入图片描述
多重嵌套

JSX语法规定:多重嵌套需要一个外部容器将嵌套元素包裹

开发时，我们很少只在页面输出一句话。大多时多个元素的嵌套，下面演示一下如何使用JSX渲染嵌套元素
我们想在页面输出一段文章和一个标题


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JSX多重节点</title>
</head>

<body>

    <div id="app">

    </div>

    <script src="https://cdn.bootcss.com/react/16.8.0/umd/react.production.min.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">

        let con=document.getElementById("app");

        ReactDOM.render(
            <div className="box">
                <h2>我是文章标题</h2>
                <p>我是文章内容，需要用一个外部容器将多个元素包裹一并插入ReactDOM.render()函数</p>
            </div>
        ,con)
    </script>

解释一下上面的代码，h2是标题 p标签是段落，但是为什么外面加了<div className=‘box’></div>呢？

这是因为JSX的语法规定：在 ReactDOM.render()函数内插入的必须是一个整体

所以必须用一个外部容器将h2和p标签包裹起来

而className="box" 是给外面的容器div加了一个class名为box，便于我们去设置css样式。

当然你也可以用一个变量将虚拟DOM保存再插入ReactDOM.render()函数渲染也是一样的，这样代码看起来更简洁

你也可以继续添加其他元素，在这里就不再添加了，原理都是一样的。

 <script type="text/babel">

      let con=document.getElementById("app");
	  let vDom= <div className="box">
	              <h2>我是文章标题</h2>
	              <p>我是文章内容，需要用一个外部容器将多个元素包裹一并插入ReactDOM.render()函数</p>
	          </div>;
      ReactDOM.render(VDom,con  )
  </script>

打开浏览器运行一下，效果如下
运行效果图：
在这里插入图片描述

JSX语法中使用变量和表达式

JSX语法规定：在JSX中使用表达式时：变量和表达式都要写在{ }中

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>变量和表达式</title>
</head>

<body>

    <div id="app">

    </div>

    <script src="https://cdn.bootcss.com/react/16.8.0/umd/react.production.min.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">
    	let con=document.getElementById("app");
        const bookName="《React从入门到精通》";
        ReactDOM.render(
            <div className="box">
                <p>{bookName}</p>
                <span>春节特价只需要：{100*3+2-60/6} 元</span>
            </div>

            ,con)
    </script>
</body>

上面的代码中,书名bookName是一个变量，将其作为pb标签的文本内容，使用{}包起来，而下面的数的价格 {100*3+2-60/6}则是一个计算表达式，也用{}括起来
注意：{}内只能放变量和表达式，不能放语句，如 if(...){..} for(...){...} 都是语句，不能放在JSX里面的{}里

使用浏览器运行结果如下
在这里插入图片描述

JSX中使用行内样式

JSX语法规定：JSX中通过对象的方式引入行内样式

接着说上面的案例，我们想给书名和价格加个css样式的话，就需要以对象字面量的方式加入
为了效果更好，我又添加了一个img标签作为书的封面
所有代码如下


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>内联样式</title>
</head>

<body>

    <div id="app">

    </div>

    <script src="https://cdn.bootcss.com/react/16.8.0/umd/react.production.min.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">

        const nameStyle={
            backgroundColor:"#a7493f",
            color:"#1b1b1b",
            padding:"10px",
            margin:"15px",
            borderRadius:"2px",
            fontSize:"20px",
            color:"#fff"
        };

        const priceStyle={
            display:"block",
            color:"#e4393c",
            fontSize: "16px",
            padding:"10px",
        };

        const bookName="《React快速上手开发》";
        ReactDOM.render(
            <div className="box">
                <p style={nameStyle}>{bookName}</p>
                <img src="https://img10.360buyimg.com/n1/s200x200_jfs/t3064/316/9231779272/336570/ce323f93/58d0d62bNd25db840.jpg" alt=""/>
                <span style={priceStyle}>春节特价只需要：{100*3+2-60/6} 元</span>
            </div>,document.getElementById("app"))
    </script>

</body>

</html>

解释一下上面的代码
nameStyle和priceStyle是书的标题和价格的样式,安照JSX的语法，必须是对象形式，且使用驼峰命名法

	const nameStyle={
       backgroundColor:"#a7493f",
        color:"#1b1b1b",
        padding:"10px",
        margin:"15px",
        borderRadius:"2px",
        fontSize:"20px",
        color:"#fff"
    };

    const priceStyle={
        display:"block",
        color:"#e4393c",
        fontSize: "16px",
        padding:"10px",
    };

在JSX语法中，设置行内样式通过style属性，其值是一个对象

<p style={nameStyle}>{bookName}</p>中的nameStyle就是我们刚刚定义的对象样式变量，同样遵循JSX的语法规则，变量用{}括起

下面的<p style={nameStyle}>{bookName}</p>原理是一样的

ReactDOM.render(
  <div className="box">
       <p style={nameStyle}>{bookName}</p>
       <img src="https://img10.360buyimg.com/n1/s200x200_jfs/t3064/316/9231779272/336570/ce323f93/58d0d62bNd25db840.jpg" alt=""/>
       <span style={priceStyle}>春节特价只需要：{100*3+2-60/6} 元</span>
   </div>,document.getElementById("app"))

这里需要注意的是，JSX语法中，单标签必须闭合
如<img src="" alt="">是不对的，应该加上/，写成<img src="" alt="" /> 其他单标签也是如此写法

上面的代码运行结果如下：
在这里插入图片描述

JSX数组遍历

数组遍历应该是开发中最常用的，JSX中数组遍历使用ES6的新数组方法map（）

先说一下map()方法

  • map可以简单的理解为映射，将原数组按照一定的规则映射到新的数组

  • map接收一个函数作为参数，该函数的有三个参数value,index,arr;依次为依次为当前的值、当前值的下标和原数组，其中index和arr是可选参数

  • 原数组的每一项会依次执行该函数

如下面将a1数组双倍存入b1

let a1=[1,2,3];
let b1=[];
b1=a1.map((item)=>{
	return item*2
});
console.log(b1);
2
4
6

上面的代码，map里面的参数函数，遍历原数组的每一项，将该项乘2后返回出去，返回的项组成一个新的数组。

当然也可以不对数组的值处理，直接输出也可以，比如接下来的遍历

我们定义一个数组，里面存放了几组对象，用来遍历生成一个ul标签

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>变量和表达式</title>
</head>

<body>

    <div id="app">

    </div>

    <script src="https://cdn.bootcss.com/react/16.8.0/umd/react.production.min.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <script type="text/babel">
        const theArr=[
            {name:"皮卡兔", age:22,},
            {name:"皮卡丘", age:20,},
            {name:"皮卡猫", age:20,},
            {name:"皮卡猪", age:1,},
        ];
		
		//>提示：使用（）将vDom包裹起来提高代码的可读性
        const vDom=(
            <ul>
                {
                    theArr.map((value,index)=>
                        <li key={index}>{index+1}----------姓名:{value.name}, ------年龄:{value.age}</li>
                    )
                }
            </ul>
        );

        ReactDOM.render(vDom,document.getElementById("app"))
    </script>


</body>

</html>

上面的代码中，在ul中通过map()方法遍历输出theArr的每一项，即value,创建li标签，另外li标签的 key属性是当前数组元素的下标，用来表示在内存中的唯一性

上面的代码运行结果如下

在这里插入图片描述

到这里，JSX的基础语法先告一段路，下面总结一下：

  • JSX中添加属性时，使用className代替class,像label中的for属性，使用htmlFor代替
  • JSX创建DOM的时候，所有的子节点必须有唯一的根元素进行包裹
  • JSX语法中，标签必须成对出现，如果是单标签，则必须自闭合
  • JSX中可以直接使用JS代码，直接在JSX中通过{ }中间写JS代码即可
  • 在JSX中只能使用表达式，不能出现语句，变量和语句必须使用{}包裹才能在元素中做插值
  • 在JSX语法中注释为{/*注释的内容*/}
const VDOm=(
	{/*我是对标题的注释*/}
	<h2>我是标题</h2>
)
清风夜半～
关注
专栏目录
jsx基础语法
quietbxj的博客
09-19 222
概念 jsx就是在js文件中插入html片段，是React自创的一种语法。 jsx会被Babel进行转码，会得到正常的js代码。 基础语法 html的标签必须是闭合的，如<div>hello</div>是正确的，<div>hello是错误的。 jsx语法中，只能有一个根标签。 html中插入js，需要使用{}。 ...
JSX语法基础总结
2201_75705263的博客
08-05 451
jsx语法基础
JSX语法看这一篇就够了-02
编程是一门实践技术
05-24 1628
JSX and React 是相互独立的两种开发语言，它们经常一起使用，但也可以单独使用它们中的任意一个，JSX 是JavaScript 语言的扩展，而 React 则是一个 JavaScript 的库。
react18之01 创建项目 与 基础之 jsx语法(类组件、函数组件定义变量、遍历数组、使用三目、定义事件修改数据、插槽)
weixin_43845137的博客
03-22 1262
{/* 02：渲染数组 */}arr - {return (}){/* 03：渲染对象 */}
JSX列表渲染（五）——4种写法：基本写法 & 遍历写法 & map遍历写法（常用-加工处理数组的每一项数据，最后形成一个新的数组） & 列表遍历可以直接写到表达式中
weixin_44867717的博客
01-08 3377
JSX列表渲染——4种写法：基本写法 & 遍历写法 & map遍历写法（常用-加工处理数组的每一项数据，最后形成一个新的数组） & 列表遍历可以直接写到表达式中 渲染多个元素 数组中可以放置JSX元素 key只在数组上下文中有含义 为了提高渲染性能 key在兄弟节点之间必须唯一 let arr = ['apple', 'orange', 'lemon', 'banana'] // let list = arr.map((item, index) => {
程序员面试刷题的书哪个好-React-Native-In-Action:ReactNative零基础入门到项目实战学习笔记
07-07
Native零基础入门到项目实战 此项目记录我在2017年3月学习的过程，整理了一下放到GitHub上，分为React、React Native和豆瓣项目实战三个部分（DoubanProject在Recat Native Demo文件目录下）,废话不多说，贴上笔记和...
千锋2022版React全家桶教程_react零基础入门到项目实战完整版（资料）
07-27
1. JSX 语法：JSX 语法是 React 中的模板语言，用于描述 UI 组件。 2. Class 组件：Class 组件是 React 中的一种组件类型，用于封装业务逻辑。 3. 函数式组件：函数式组件是 React 中的一种组件类型，用于纯展示组件...
react-native学习代码包括项目（React Native跨平台开发，从零基础入门到项目实战-6天）
02-27
首先，你需要理解React的基本概念，如JSX语法、组件、状态和属性管理。JSX是一种将XML语法引入JavaScript的语法扩展，使得HTML样式的结构化标记可以在JavaScript中编写。组件是React开发的核心，它们可以像函数一样...
React零基础自学手册.pdf
03-31
### React.js零基础自学核心知识点概览 #### 一、React.js简介与基本概念 - **React.js**：一种用于构建用户界面的JavaScript库，特别适用于构建单页应用(SPA)。 - **特点**：虚拟DOM、组件化设计、单向数据流。 #...
react-starter-kit-app:React应用入门套件
05-26
- **Create React App**：官方提供的零配置脚手架，用于快速创建React应用。它默认集成了Webpack和Babel等工具，开发者无需关心底层配置，可以专注于编写业务代码。 - **Webpack**：一个模块打包器，它将各种资源...
前端学习（2278）jsx进阶使用3之数组遍历
歌谣的博客
09-26 257
index3.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> &
JSX中参数输出HTML
Joyce的前端日常
09-07 3528
jsx传递参数时，如何将参数识别为html而非字符串。
React 开发（四）：深入 JSX - 语法、特性与使用场景
最新发布
mmc123125的博客
10-29 1098
JSX 是一种语法糖，可以让开发者像写 HTML 一样构建 React 组件。它最终会被转译成调用，这也是 JSX 和 JavaScript 兼容的原因。// JSX 示例;// 转译后的代码");JSX 并不是必须的，但它让 React 代码的阅读性和编写体验更佳。接下来我们将深入探讨其语法和特性。本文介绍了 JSX 的基本语法和特点，解析了它的转译原理和常见使用场景。在 React 中，JSX 是一种强大的工具，它让代码结构更直观，同时支持动态内容渲染。
JSX语法使用详解——终极版
赵英超的博客
09-14 7601
一、基础 1、JSX是什么 JSX是一种像下面这样的语法： const element = &lt;h1&gt;Hello, world!&lt;/h1&gt;; 它是一种JavaScript语法扩展，在React中可以方便地用来描述UI。 本质上，JSX为我们提供了创建React元素方法（React.createElement(component, props, ...childre...
React之jsx遍历
Hiroshi's
09-08 665
react里面，数组可以自动被遍历 obj不能被遍历 {}花括号语法里面只能写js表达式，而不能写js语句 这样写： 改进：
react在jsx语法中实现for循环
热门推荐
11-13 1万+
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="react.js"></script> <script src="react-dom.js"></script> <script src="babel.min.js"></script> <style> .yew{color:re
js基础【遍历数组生成标签】
姗姗的博客
07-08 2559
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compa...
jsx基本语法
通俗易懂
05-07 4749
jsx 全称: JavaScript XML react定义的一种类似于XML的JS扩展语法: JS + XML本质是React.createElement(component, props, ...children)方法的语法糖 作用: 用来简化创建虚拟DOM 写法：var ele = <h1>Hello JSX!</h1> 注意1：它不是字符串, 也不是HTML/XML标签 注意2：它最终产生的就是一个JS对象 标签名任意: HTML标签或其它标签 标签属性任意: HTML标
零基础入门前端React框架学习资源包
此外，了解ES6语法规范，特别是类（class）、模块（modules）和箭头函数（arrow functions）的使用，将会对学习React大有裨益。如果能够掌握TypeScript（ts），一个JavaScript的超集，将有助于写出更加健壮和易于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值