React技术栈 --》 JSX语法书写JS和React创建组件 ## Day3

已于 2024-04-29 00:59:18 修改
阅读量395 收藏 11
点赞数 28
分类专栏： 程序员 文章标签： javascript react.js 前端
于 2024-04-29 00:59:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84411767/article/details/138296495
版权

这里一开始会先const一个常量，然后再把常量引入到ReactDOM中，能不能直接把HTML代码写入ReactDOM.render()里面呢？显然是可以的。代码执行过程中遇到

123
会babel转换的。

**那么如何通过一个变量来替换固定的123呢？**简单，只需要定义一个变量就行


//1.导入包

import React from 'react'

import ReactDOM from 'react-dom'



let a = 10;



//3.将创建好的虚拟DOM渲染到页面上去

ReactDOM.render(<div>{a}</div>,document.getElementById('app'))

这就有点像Vue里面的插件表达式了，不过Vue中引入变量名称需要{{ }}俩个大括号。 当然这是最基本的，JSX语法中也可以渲染很多东西，像字符串、布尔值等。


import React from 'react'

import ReactDOM from 'react-dom'



let str = 'hello world';

let bool = true;



//3.将创建好的虚拟DOM渲染到页面上去

ReactDOM.render(<div>

    {str}

    <hr />

    {bool ? '条件为真':'条件为假'}

</div>,document.getElementById('app'))

**那么如何为属性绑定值呢？**去掉引号加上括号和变量即可，什么情况下需要使用 {} 呢？当我们需要在 JSX 控制的区域内，写JS表达式，则需要把JS代码写到{}中。


//1.导入包

import React from 'react'

import ReactDOM from 'react-dom'



let title = '标题';



//3.将创建好的虚拟DOM渲染到页面上去



ReactDOM.render(<div>

    <p title={title}>这是p标签</p>

</div>,document.getElementById('app'))

**那么如何渲染JSX元素和元素数组呢？**在JSX中渲染元素直接const一个标签并放入JSX中即可。


//1.导入包

import React from 'react'

import ReactDOM from 'react-dom'



const h1 = <h1>我是一个h1标签</h1>

const arr = [

    <h1>这是h1</h1>,

    <h2>这是h2</h2>

]



//3.将创建好的虚拟DOM渲染到页面上去

ReactDOM.render(<div>

    {h1}

    {arr}

</div>,document.getElementById('app'))

那么如何将普通字符串数组转为jsx数组并渲染到页面上呢？  (俩种方式)

定义一个空数组来存放名称标签 [方案1]


//1.导入包

import React from 'react'

import ReactDOM from 'react-dom'



const arrStr = ['喜羊羊','懒洋洋','沸羊羊','慢羊羊','灰太狼'];

const newArr = [];



arrStr.forEach(item => {

    const temp = <h5>{item}</h5>

    newArr.push(temp)

})



//3.将创建好的虚拟DOM渲染到页面上去

ReactDOM.render(<div>

    {newArr}

</div>,document.getElementById('app'))

这里介绍一下JS中map函数方法，方案2就借用map方法来实现。


const arrStr = ['喜羊羊','懒洋洋','沸羊羊','慢羊羊','灰太狼'];

//数组中的map方法，map中必须写return数组

const result = arrStr.map(item => {

    return item + '~~~'

})



console.log(result);

定义一个空数组来存放名称标签 [方案2] 推荐


//1.导入包

import React from 'react'

import ReactDOM from 'react-dom'



const arrStr = ['喜羊羊','懒洋洋','沸羊羊','慢羊羊','灰太狼'];



//3.将创建好的虚拟DOM渲染到页面上去



ReactDOM.render(<div>

    {arrStr.map(item=>{

        return <h3>{item}</h3>

    })}



    //如果箭头函数右侧只有一行代码，花括号是可以省略的，花括号省略是不需要return函数的。

    //所以也可以这样书写

    //{arrStr.map(item=> <h3>{item}</h3> )}

</div>,document.getElementById('app'))

注意特点

1.虽然我们把数组通过JSX语法渲染到页面上，但存在一个问题，如下

警告提示提醒我们，在React中，需要把 key 添加给 被 forEach 或 map 或 for 循环直接控制的元素。以方案2举例，警告消失。


//1.导入包

import React from 'react'

import ReactDOM from 'react-dom'



const arrStr = ['喜羊羊','懒洋洋','沸羊羊','慢羊羊','灰太狼'];



//3.将创建好的虚拟DOM渲染到页面上去



ReactDOM.render(<div>

    {arrStr.map(item => <h3 key={item}>{item}</h3>)}

    //如果循环的对象外层还有元素，是要把key给到外层元素的，否则会报错

    {arrStr.map(item => <div key={item}><h3>{item}</h3></div>)}

</div>,document.getElementById('app'))

2.在jsx中的元素添加class类名：需要使用className来代替class；htmlFor替换label中的for属性


//1.导入包

import React from 'react'

import ReactDOM from 'react-dom'



//3.将创建好的虚拟DOM渲染到页面上去

ReactDOM.render(<div>

    <p class="111">这是p标签</p>

    <label for="222">这是label标签</label>

</div>,document.getElementById('app'))

因为class和for在JS中都是关键字，有特定含义的，为了区分JSX使用其它关键字来代替


//1.导入包

import React from 'react'

import ReactDOM from 'react-dom'



//3.将创建好的虚拟DOM渲染到页面上去

ReactDOM.render(<div>

    <p className="111">这是p标签</p>

    <label htmlFor="222">这是label标签</label>

</div>,document.getElementById('app'))

3.在JSX创建DOM的时候，所有的子节点，必须有唯一的根元素进行包裹。

4.在JSX语法中，标签必须成对出现，如果是单标签，则必须自闭和。

二、React中创建组件

============

一、第一种创建组件的方式


//1.导入包

import React from 'react'

import ReactDOM from 'react-dom'



function Hello(){ //组件的首字母必须大写，不然会被当作普通标签处理，没有意义

    //在组件中 必须返回一个合法的 JSX 虚拟DOM元素;return一个 null 表示此组件为空什么都不会渲染

    return <div>这是animal组件</div>

}



const cat = {

    name:'加菲猫',

    age:'4',

    gender:'雄'

}



//3.将创建好的虚拟DOM渲染到页面上去

ReactDOM.render(<div>

    123

    {/* 直接把组件名称以标签的形式丢掉页面上即可 */}

    <Hello name={cat.name} age={cat.age} gender={cat.gender}></Hello>

</div>,document.getElementById('app'))

这里借用React插件查看，我们的属性已经写入页面中，这里我们是使用React17中的render方式，提醒我们要用React18root方式，这里暂时忽略，后期会讲到。因为属性都会在props中，所以我们传入形参的时候，最好是传入props，这样才有语义。

注意：不论是Vue还是React，组件中的props永远都是只读的；不能被重新赋值，否则报错。


//第一种创建组件的方式

function Hello(props){ 

    //在组件中 必须返回一个合法的 JSX 虚拟DOM元素;return一个 null 表示此组件为空什么都不会渲染

    //不论是Vue还是React，组件中的props永远都是只读的；不能被重新赋值

    props.name = '张小凡'

    console.log(props);



    return <div>这是animal组件---{props.name}---{props.age}---{props.gender}</div>

}

一、ES6中展开运算符的使用

何为展开运算符？展开运算符可以把对象或数组里面的属性展开放到另一个对象或数组身上。根据上文提到的cat的属性，我们可以这样写，一样达到的效果，而且更简便


//3.将创建好的虚拟DOM渲染到页面上去

ReactDOM.render(<div>

    123

    {/* 直接把组件名称以标签的形式丢掉页面上即可 */}

    {/* <Hello name={cat.name} age={cat.age} gender={cat.gender}></Hello> */}

    <Hello {...cat}></Hello>

</div>,document.getElementById('app'))

在比如举个例子：这么就很方便处理多个数据


var a1 = {

    name:'小王',

    age:'30',

    sex:'男'

}



var a2 = {

    ...a1,

    address:'北京'

}

console.log(a2);

二、将组件抽离为单独的jsx文件

正常我们讲，虽然React也是属于js的，但js中又有js代码，又有组件的jsx语法代码，有点混乱，所以一般我们会和Vue一样，将组件抽离出来单独放到一个文件夹中。便于代码的书写和处理。

因为所有的源代码都要放在src下，所以我们新建文件夹components，在该文件夹下存放组件。

注意 .jsx后缀名的文件如果想被正常解析，需要确保webpack.config.js里面加入如下命令

接下来就可以将组件一个个进行抽离，单独放在一个文件里。这里写入Hello.jsx文件中。


//必须要导入React不然会报错

import React from "react"



//创建组件

function Hello(props){ 

    return <div>这是animal组件</div>

}



//必须要把组件暴露出去，才能使用

export default Hello



//也可以以这样写

//export default function Hello(props){ 

//    return <div>这是animal组件</div>

//}

而在index.js文件中要想使用组件的话，也是需要导入的。


//导入 Hello 组件

//默认，如果不做单独配置的话，不能省略 .jsx后缀名

import Hello from './components/Hello.jsx'

后缀名问题：如果想省略后缀名的话，可以这样做。打开webpack.config.js，并在导出的配置对象中新增如下节点。即可不写后缀名也不会报错的，可以了解一下，适合自己的就是最好的。

路径问题：在React中导入组件你可能会见到像 @ 这样的符号在路径的开头，这里的@符号 ，表示项目根目录中的 src 这一层目录，只要加了@就指定在哪一文件目录下，比较方便，如何适合自己并喜欢的话可以去配置一下，如下， 这样导入组件也确实方便。


import Hello from '@/components/Hello'

二、ES6中class类使用的简单介绍

使用class关键字来创建组件，class是属于ES6中的新特性，学习之前应该先了解一下ES6吧

一、实例属性和静态属性


//用function创建对象

function Person(name,age,sex){

    this.name = name;

    this.age = age;

    this.sex = sex;

}

const p1 = new Person('张小凡',18,'男')

//通过new出来的实例，访问到的属性，叫做【实例属性】

console.log(p1);

//通过构造函数直接访问到的属性，叫做【静态属性】

Person.boys = '小男孩';

console.log(p1.boys); //undefined

console.log(Person.boys); //小男孩





//用class创建对象

class Animal{ 

    /* constructor(){} 这是类中的构造器，每一个类中都有一个构造器，

    如果我们程序员没有手动指定构造器，那么可以认为类内部有个隐形的看不见的

    空的构造器，类似于 constructor(){}

    */

    //构造器的作用：每当new这个类的时候，必然会优先执行构造器里面的代码

    constructor(name,age){

        //实例属性

        this.name = name;

        this.age = age;

    }



    //  在 class内部，通过 static 修饰的属性，就是静态属性

    static animal = '加菲猫';



}

const p2 = new Animal('加菲猫',4);

console.log(p2);//实例属性

console.log(Animal.animal);//animal是Animal的静态属性

二、实例方法和静态方法


//用function创建对象

function Person(name,age,sex){

    this.name = name;

    this.age = age;

    this.sex = sex;

}

const p1 = new Person('张小凡',18,'男')

//实例方法

Person.prototype.say = function (){

    console.log('这是Person的实例方法');

}

p1.say();


### 最后

技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

>技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

![](https://img-blog.csdnimg.cn/img_convert/daf513f4b98a987d0e4a92dd6d73960d.webp?x-oss-process=image/format,png)
属性，就是静态属性

    static animal = '加菲猫';



}

const p2 = new Animal('加菲猫',4);

console.log(p2);//实例属性

console.log(Animal.animal);//animal是Animal的静态属性

二、实例方法和静态方法


//用function创建对象

function Person(name,age,sex){

    this.name = name;

    this.age = age;

    this.sex = sex;

}

const p1 = new Person('张小凡',18,'男')

//实例方法

Person.prototype.say = function (){

    console.log('这是Person的实例方法');

}

p1.say();


### 最后

技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

>技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

[外链图片转存中...(img-Z32stfJm-1714323540730)]
2401_84411767
关注
  • 28
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
wdft-react-day-1-类代码
02-23
描述虽然简洁，但我们可以推断它涵盖了React中的类组件语法，可能包括创建React组件的`React.Component`子类，以及如何在这些组件中定义`render`方法来呈现UI。 标签 "JavaScript" 提醒我们，这个话题是基于...
learn-react-day-by-day:每天学习reactJs
04-30
《每天学习ReactJs》是一个全面深入学习React.js的教程，旨在帮助开发者逐步掌握这个流行的JavaScript库。React由Facebook开发并维护，是构建用户界面的利器，尤其在构建单页应用（SPA）和动态Web应用程序中表现出色...
React jsx规则JSX核心语法一 书写规范
SOLar7SysteM的博客
10-06 627
转换的方式有很多，比如toString方法、和空字符串拼接，String(变量)等方式；情况二：当变量是null、undefined、Boolean类型时，内容为空；情况一：当变量是Number、String、Array类型时，可以直接显示。比如UI中需要展示数据状态，在某些状态发生改变时，又需要改变UI；1.若首字母小写，那么React就会去寻找与之同名的html标签。/*1.jsx里面可以放入各种表达式，这里只是举例几个 */2. 若首字母大写，那么React就会去寻找与之同名的组件。
JSX使用、写法
weixin_43993121的博客
11-29 642
```html <!DOCTYPE html> <lang lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0.
JSX列表渲染（五）——4种写法：基本写法 & 遍历写法 & map遍历写法（常用-加工处理数组的每一项数据，最后形成一个新的数组） & 列表遍历可以直接写到表达式中
weixin_44867717的博客
01-08 2992
JSX列表渲染——4种写法：基本写法 & 遍历写法 & map遍历写法（常用-加工处理数组的每一项数据，最后形成一个新的数组） & 列表遍历可以直接写到表达式中 渲染多个元素 数组中可以放置JSX元素 key只在数组上下文中有含义 为了提高渲染性能 key在兄弟节点之间必须唯一 let arr = ['apple', 'orange', 'lemon', 'banana'] // let list = arr.map((item, index) => {
react-module-day1-start:Babel和Webpack环境设置
03-20
**Babel** 是一个广泛使用的JavaScript编译器，它的主要功能是将ES6+（包括React JSX）等现代JavaScript语法转换为浏览器能够理解的ES5语法。这是因为尽管现代浏览器开始支持更多的ES6特性，但并非所有特性都得到了...
react-day4-server-starter
03-19
通过`react-day4-server-starter`项目，你可以全面地学习React的服务器端渲染实践，同时巩固JavaScript、Node.js和Express的基础知识，提升前端全栈开发能力。在实际操作中，你还将遇到并解决各种问题，比如性能优化...
catch-of-the-day:与Wes Bos课程一起创建的React应用-https
04-18
这个"catch-of-the-day"项目很可能是基于Wes Bos的"React for Beginners"在线课程创建的一个示例应用。Wes Bos是一位知名的Web开发者和教育者，他的课程深入浅出，非常适合初学者入门。 React的核心概念是组件化，...
JSX 语法详解
web00_11的博客
11-14 9969
JSX即JavaScript XML。一种在React组件内部构建标签的类XML语法。JSX为react.js开发的一套语法糖，也是react.js的使用基础。React在不使用JSX的情况下一样可以工作，然而使用JSX可以提高组件的可读性，因此推荐使用JSX
JSX语法和React组件
Han_Zhou_Z的博客
03-06 344
目录 一、JSX语法 1、JSX的算术表达式 2、条件表达式 3、嵌入表达式 4、对象表达式 5、函数表达式 6、数组表达式 7、样式表达式 8、注释表达式 二、React组件 1、函数组件 ​2、类组件 3、组件的组合 一、JSX语法 JavaScript XML，jsx是JavaScript的语法的扩展,支持自定义属性；是react的内置的语法，其基本语法格式为 const 元素名 = ( <根标签名> <子标签></子标签&gt
JSX | TSX 教程
青蛙king的博客
05-25 7703
如果你需要将大量 HTML 代码移植到 JSX 语法，可以使用一款在线的免费的代码转换器工具。
循序渐进引入 jsx 文件写法和函数式组件写法
最新发布
zrblue的博客
02-06 235
打开 Vue3 的官方文档，它首先会告诉你，Vue的组件可以按两种不同的风格书写：选项式API和组合式API。文档为我们提供一系列两种风格的代码参考，供我们按照偏好进行选择。实际上，Vue3 组件可不止两种写法，而是多达十几种！然而，不管是什么写法，它们都是基于同一个底层系统实现的，概念之间也是彼此相通的，只是使用的接口不同。在实际开发中，我们也不会同时使用到那么多种写法，但是这并不意味着我们不需要去了解这些写法！
vue jsx语法配置和应用
好川的博客
11-27 3433
通过webpack构建配置jsx，通过vite构建的配置jsx
JSX语法
cx18333的博客
12-03 310
JSX是一种JavaScript的语法扩展,用于描述页面,并且可以和JavaScript融合在一起,不同于Vue的模板语法,没有Vue中的一些指令(v-if,v-show,v-for),在react 中直接将 JSX 语法和 HTML 语法书写在了一起,这种写法就是JSX
react：在jsx中使用js表达式、列表渲染、条件渲染、样式处理以及jsx注意事项
Y200195的博客
01-17 544
JSX必须有一个根节点，如果没有根节点，可以使用（幽灵节点）替代(react的独特标签）
JSX（ JavaScript XML）简介及语法规则
fangqi20170515的博客
07-27 1703
全称。
Line 25:7: 'React' must be in scope when using JSX react/react-in-jsx-scope报什么错
05-30
这个错误是因为在使用 JSX 时没有正确地导入 React 库。在 JSX 中使用 React 组件时，必须先导入 React 库。你可以在文件的顶部添加以下代码来解决这个问题： ``` import React from 'react'; ``` 如果你已经正确地导入了 React 库但仍然看到这个错误，那么可能是你的编译环境有问题。你可以尝试升级你的 React 版本或者检查你的编译工具是否正确地配置了 React 库的路径。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值