一、React基础知识

已于 2023-11-06 09:22:20 修改
阅读量837 收藏
点赞数
文章标签： react.js 前端 javascript
于 2023-11-01 19:59:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_68211919/article/details/134158174
版权

一、环境安装

        第一种：使用原生搭建(可以从国内下载配置镜像、也可以从国外下载)

                        指令：1.国内下载：（1：npm config set registry https://r.npm.taobao.org//

                                                        （2：npm install -g create-react-app:全局安装react脚手架

                                                        （3：create-react-app 项目名：创建项目 

                                                        （4：cd  项目名：进入项目

                                                        （5：npm run start：启动项目

                                2.国外下载：执行（2-（5步骤即可，下载速度较慢

        第二种方式：用vite搭建脚手架（速度较快，建议使用）

                指令：（1.npm init vite@latest：初始化一个新项目

                        （2：编辑项目名，选择react，选择javascript、tscript等等，按需求选择

                        （3：cd 项目名：进入该项目

                        （4：npm init:初始化一个新的 Node.js 项目

                          (5:npm run dev:启动项目

二、JSX相关语法

src文件夹下的main.jsx文件：是整个项目的入口文件，不可移除，其他的按自己需求保留

JSX：完整写法：JavaScript XML(标记语言)：通俗的讲是js语言里面可以插入标签

        XML和HTML的区别：前者不能直接引入外部文件，后者可以引入外部文件（js、ts、css等）

1.组件，创建组件可以分为三种：纯组件、函数组件、类组件

        1.1：纯组件：通过创建jsx对象，包含了多个元素的div标签（三个div标签）。可以将jsx对象当作变量使用在标签的括号中

import React from 'react'
import ReactDOM from 'react-dom/client'

let com = <div>
  <h1>这是纯组件部分呀</h1>
  <div>纯组件</div>
  <div>函数组件</div>
  <div>类组件</div>
</div>
//render里面写入com这个jsx对象，即可将其里面的元素展现到页面中去
ReactDOM.createRoot(document.getElementById('root')).render(com)

        1.2：函数组件：通过声明一个函数来创建组件

import React from 'react'
import ReactDOM from 'react-dom/client'
// 声明一个函数
function Hanshu(ARG) {
  return <div>
    <h1>这是通过函数来创建的组件呀</h1>
    <div>在main.jsx文件里面操作的嘞</div>
  </div>
}
// 11行和12行以及render中的Hanshu（）等价
let res = <Hanshu></Hanshu>
let res2 = Hanshu()

ReactDOM.createRoot(document.getElementById('root')).render(Hanshu())

        1.3：通过类来创建组件：

import React from 'react'
import ReactDOM from 'react-dom/client'
//创建一个Type类并继承React的组件部分，是为了继承它的响应式数据功能
class Type extends React.Component {
  render() {
    return <div>
      <h1>这是通过class类来创建的组件呀</h1>
      <div>嘿嘿黑</div>
    </div>
  }
}
// 只能通过这个来实现咯
let res = <Type></Type>
ReactDOM.createRoot(document.getElementById('root')).render(res)

2.jsx插值表达式的使用途径

        （1：变量：直接当作变量通过{}来使用

import { useState } from 'react'
import './test.css'
function test() {
    // 当作变量来使用
    let bianliang = 120
    let arr = ["box1", "box2", "jack", "22岁了", "今天是他生日哦"]
    let obj = { name: "小红", age: "22", sex: "女", job: "student" }
    return (
        <div className=''>
            <div>变量使用：：{bianliang}</div>
            <div>访问数组中的成员::{arr[4]}</div>
            <div>访问对象中的成员::{obj.name}</div>
        </div>
    )
}
export default test

        （2：对象数组成员访问

import { useState } from 'react'
import './test.css'
function test() {
    let arr = ["box1", "box2", "jack", "22岁了", "今天是他生日哦"]
    let obj = { name: "小红", age: "22", sex: "女", job: "student" }
    return (
        <div className=''>
            <div>访问数组中的成员::{arr[4]}</div>
            <div>访问对象中的成员::{obj.name}</div>
        </div>
    )
}
export default test

        （3：js运算表达式

import { useState } from 'react'
import './test.css'
function test() {
    let isout = "yes"
    let count = 22
    // 定义一个变量marry
    let ismarry = true
    return (
        <div className=''>
            {/*相当于vue中的v-fi： 如果isout的结果为yes，则显示”不出去了吧“，否则显示”出去呀，散步不“ */}
            <div>{(isout === "yes") ? "不出去了吧" : "出去呀，散步不"}</div>

            {/* 可以将前面的变量进行加减乘除计算 */}
            <div>count+21的结果为{count + 21}</div>

            {/* 判断marry是否为true满足则显示后面的”已经结婚了哦“信息 ，判断为false则不显示*/}
            <div>{ismarry && "逻辑与的部分"}</div>

            {/* 若marry判断为false，则显示后面的语句，若为true则显示前面的语句 */}
            <div>{ismarry || "逻辑或的部分"}</div>
        </div>
    )
}
export default test

        （4：函数调用

import { useState } from 'react'
import './test.css'
function test() {
    function diaoyong() {
        console.log("调用了函数名为diaoyong");
    }
    return (
        // 直接在标签中将diaoyong函数当作变量使用
        <div className='fa'>111{diaoyong()}</div>
    )
}
export default test

        （5：jsx对象（给变量赋标签组件）

import { useState } from 'react'
import './test.css'
function test() {
    // 定义一个jsx对象，包含了多个元素的div标签（）h1,h2,h3,p标签
    // 可以将jsx对象当作变量使用在标签的括号中
    let jsxobj = <div>
        <h1>hello</h1>
        <h2>你好</h2>
        <h3>晚上老好了</h3>
        <p>嘿嘿黑</p>
    </div>
    return (
        // 将jsxobj这个对象显示到页面中去
        <div className='fa'>{jsxobj}</div>

    )
}
export default test

        （6：插值{}可以使用途径

                （6.1：数据循环渲染

import { useState } from 'react'
function test() {
    // 想要将arr数组里面的元素遍历装到a标签中去
    // 第一种写法，使用for循环将其取到的元素当作变量放到dive标签中去，再将遍历的得到的div标签添加到新的数组中去
    let arr = ["你好", "react", "很高兴认识您", "我相信接下来的时间", "我们会相处的很愉快的"]
    let newarr = []
    for (let i = 0; i < arr.length; i++) {
        newarr.push(<div key={i}>{arr[i]}</div>)
    }
    return (
        <div>
            {newarr}
            {/* 第二种(最常用)：直接在标签中使用map函数 ,将各个元素取出来放到div标签中当作变量使用*/}
            <div >{arr.map((el, index) => <div key={index}>{el}</div>)}</div>
        </div>
    )
}
export default test

小案例：数组中的元素是对象，将每个元素都显示在页面上

import { useState } from 'react'
import './test.css'
function test() {
    // 将数组arr里面的数据取出来展现到页面上
    let arr = [{ title: "电脑", discrbe: "真的不错", price: "1231元", location: "四川", comment: "发货快，是正品，下次还来" },
    { title: "手机", discrbe: "正品直发", price: "2313元", location: "广东" },
    { title: "电话手表", discrbe: "可以聊天的神奇软件", price: "1231元", location: "广东" }]
    return (
        // 用map函数将arr里面的元素取出来，然后通过点语法来取元素中的对象
        <div className='fa'>{arr.map((el, index) => <div className='big' key={index}>
            <h4>{el.title}</h4>
            <div>{el.discrbe}</div>
            <div>{el.price}</div>
            <div>{el.comment}</div>
        </div>)}
        </div>

    )
}
export default test

                （6.2：标签事件(以点击事件为例)

import { useState } from 'react'
function test() {
    // 定义一个函数dianj（没传参数）
    function dianji() {
        console.log("触发了点击事件");
    }
    function canshu() {
        console.log("触发了传递参数的函数");
    }
    return (
        <div>
            {/* 点击事件操作的函数不能加括号，加了括号是不用点击就立即执行 */}
            <div className="box" onClick={dianji}>点击打印</div>
            <button onClick={canshu}>传参数事件</button>
        </div>
    )
}
export default test
                （6.3：标签的属性（className,style,src,href.....）

                 （6.3.1：className:     

                      若只想一个类名需要在前面声明一个对象obj={one1：”one“,one2:"two",one3:"three"}

                                格式：className={obj.one1}

                        若想要给一个标签多个类名可以声明一个数组变量arr=【box1,box2,box3】

                                       className={arr.join(' ')}

                                也可以直接claName={【box1,box2,box3,box4】.join(' ')}

                （6.3.2：style:分为全局样式和局部样式

                        全局样式可以直接在main.jsx中引入作为全局样式

/*.index.css文件中为 全局样式 */
.name {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

//app.jsx文件中

import { useState } from 'react'
// 引入组件Box
import Box from './jubu.jsx'
function App() {
  return (
    <div>
      <div className='name'>全局样式</div>
      <Box></Box>
    </div>
  )
}

export default App

                        局部样式：当项目中有几个组件，组件中的类名重复时，则显示的是后面执行的那个样式，若想要显示各自的样式，需要将各自的样式设置为局部样式（样式文件后缀名修改为module.css），引入的方式必须为图中的格式来引入（第四行），使用必须使用点语法加类名来使用

//jubu.jsx文件中

import { useState } from 'react'
// 引入局部样式
import yangshi from './jubu.module.css'
function jubu() {
    return (
        <div className={yangshi.name}>局部样式的效果</div>
    )
}
export default jubu


//jubu.module.css文件中
/* 局部样式 */
.name {
    width: 100px;
    height: 50px;
    background-color: yellow;
    border-radius: 10px;
}

                （6.3.3：src和href：绑定的是一个地址或网址

import { useState } from 'react'
function test() {
    // 点击跳转到百度首页
    let tiaozhuan = "https://www.baidu.com"
    // 图片显示的网络地址，也可以是本地地址
    let tupian = "https://tse1-mm.cn.bing.net/th/id/OIP-C.De4iKAMeTvWwPQxXNK74ZgHaE8?w=281&h=187&c=7&r=0&o=5&pid=1.7"
    return (
        <div>
            <a href={tiaozhuan}>点击跳转到百度首页</a>
            <img src={tupian} alt="" />
        </div>
    )
}

export default test

田海红
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React 基础知识点总结
02-21
React 基础知识点总结
React基础知识.md
08-07
react一些基础知识，特别好用啊，在这次学习中，深刻感受到react的好用，感觉受益匪浅，大家喜欢的可以下载看看，对于基础知识有一定的帮助
react面试基础知识点
04-18
react面试基础知识点
react基础知识总结.pdf
03-20
React 基础知识总结 React 是一个基于 JavaScript 库，用于构建用户界面。它可以帮助开发者快速构建可维护的用户界面。下面是 React 的基础知识总结： 1. React 和核心库有？React 是核心类库，React-dom 是进行 ...
react基础文件.zip
06-04
"react基础文件.zip"可能包含一系列学习React基础的资源，如代码示例、教程文档等。让我们深入探讨React的基础知识。 1. **React组件**：React的核心概念是组件，它是可重用的代码块，可以独立渲染HTML到DOM。组件...
react 的条件渲染
weixin_72324200的博客
07-10 241
可以在 JSX 中使用普通的 JavaScript `if`/`else` 语句来进行条件渲染。在 React 中，还可以使用逻辑 `&&` 运算符进行简单的条件渲染。另一种常见的方式是使用 JavaScript 中的三元运算符来进行条件渲染。有时需要更复杂的条件逻辑，可以使用条件运算符 (`?##### 使用 if/else 语句。##### 使用三元运算符。##### 使用条件运算符。使用逻辑 && 运算符。
FullCalendar的使用，react日历组件
前端小菜鸟也有人起的博客
07-09 394
FullCalendar的使用，react日历组件
react的解构赋值
最新发布
左直拳的马桶_日用桶
07-13 88
我的感觉，react开发效率不高。这当然应该是我还不熟悉react的缘故。但是，在阅读react代码过程中，其中一个容易困惑的地方是它到处充斥着的解构赋值。当然了，解构赋值并不是React特有的功能，而是ES6（ECMAScript 2015）引入到JavaScript中的语言特性。但是，这难道不是json对象的定义模式吗，怎么在这里变成了赋值，并且是将左边的东西赋给右边的？只能说这种赋值，忽左忽右，神鬼莫测。简则简矣，可读则未必。据说解构赋值简化了语言，使得代码更具可读性云云。哦，这是解构赋值，相当于。
【vueUse库Reactivity模块各函数简介及使用方法--下篇】
xiejunlan的博客
07-11 1347
vueUseReactivity函数构想中的refWithControl函数可能的实现方式总结2. syncRef构想中的syncRef函数可能的实现方式注意事项总结3.syncRefs构想中的syncRefs函数可能的实现方式注意事项总结假想的toReactive函数注意事项假设的toReactive函数实现结论5.toReftoRef函数介绍使用方法示例代码总结6.toRefstoRefs函数介绍使用方法示例代码总结7.toValue使用 Vue 3 自身的 API示例使用 vueUse 的类似功能。
react启用mobx @decorators装饰器语法
阑珊伊人
07-10 412
react如果没有经过配置，直接使用decorators装饰器语法会报错：因为react默认是不支持装饰器语法，需要做一些配置来启用装饰器语法。
ref和reactive区别
2301_80636534的博客
07-12 223
数据类型：ref用于包装基本数据类型（如数字、字符串），而reactive用于包装对象。 访问数据：使用ref时，需要通过.value来访问数据，而reactive则允许直接访问属性。 数据的包装：ref返回一个包装对象，而reactive返回一个包装后的对象。 reactive比较灵活，可以将任意对象转换成响应式数据，并且可以进行深层次的响应式处理。 ref()函数可以接受原始类型（最常见的是布尔值、字符串和数字）以及对象作为参数，而reactive()函数只能接受对象作为参数。 ref
react hook---钩子函数的使用，useState，useReducer，useEffect，useRef,useContext，自定义hook
I_am_shy的博客
07-12 1451
什么是hook钩子函数 hook（钩住），表示拦截操作，可以在某些操作执行时拦截住（钩住），执行hook函数的逻辑， 在react中，hook函数一般是use开头，然后提供一些方法api，也就是说你可以理解成react中的hook就是一套便于操作的api
react umi把将file文件数据转成二进制流数据格式
u014651093的专栏
07-09 315
把将file文件数据转成二进制流数据格式
react VS vue
weixin_47808575的博客
07-09 486
用于构建用户界面的js库用于构建用户界面的渐进式js库。
【React打卡学习第一天】
m0_75134766的博客
07-13 378
简洁、基本使用、JSX、模块（化）与组件（化）
React中使用usePrevious的意义是什么，为啥要用它
weixin_43883615的博客
07-13 242
如上面代码，prevOption 和 prevClickEvent 使用 usePrevious 自定义 Hook 来存储前一个值的变量，作用是比较当前的 option 和 onClick 值与上一次的值是否相等。如果相等，则表示没有发生改变，不需要更新图表。通过比较前后值，可以避免不必要的更新和重复渲染，提高代码的性能和效率。usePrevious 是一个自定义 Hook，用于记录上一次的状态，以便在下一次渲染时进行比较。这对于需要比较前后值的场景非常有用，例如图表的更新和事件监听器的添加。
redux & react-redux结合使用 2024
github_36510643的博客
07-13 140
【代码】redux & react-redux结合使用 2024。
react学习——28react-redux实现多组件共享数据（精简版）
ChenJin_2的博客
07-12 126
react学习——28react-redux实现多组件共享数据（精简版）
Java Reactive Streams Backpressure mechanisms
知秋的博客
07-13 528
Java Reactive Streams Backpressure mechanisms
学习了react基础知识，如何进阶
02-14
学习了 React 基础知识后，接下来可以考虑以下几点来进阶： 1. 深入了解 React 的生命周期函数，以及如何使用它们来优化组件的性能。 2. 了解 React Hooks，学会使用它们来编写组件，特别是使用常用的 Hooks，如 ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值