React基础： 项目创建 JSX 基础语法 React基础的组件使用 useState状态 基础样式控制

news2024/11/18 19:58:56

01 React

文章目录

  • 01 React
    • 一、React是什么
        • 1、React的优势
    • 二、React开发环境搭建
        • 1、创建项目
        • 2、运行项目
        • 3、项目的目录结构
    • 三、JSX基础
        • 1、什么是 JSX
          • 代码示例：
        • 2、JSX使用场景
          • 2.1代码示例：
        • 3、JSX中实现列表渲染
        • 4、JSX - 实现基本的条件渲染
        • 5、JSX - 实现复杂的条件渲染
    • 四、 React中的事件绑定 and 参数传递
        • 1、事件绑定代码示例：
        • 2、使用事件对象参数
        • 3、触发事件，传递自定义参数
        • 4、事件对象参数 和 自定义参数同时传递的情况
    • 五、React组件基础使用
        • 1、React组件 定义 与 使用
          • 代码示例：
    • 六、useState基础使用
        • 1、useState是什么
          • 代码示例：
        • 2、useState修改状态的规则
          • 2.1 状态不可变
        • 3、修改对象的状态（数据）
    • 七、组件基础样式
        • 1、行内样式（不推荐）
        • 2、class类名控制（推荐使用）

一、React是什么

React是Meta公司研发，是一个用于 构建Web和原生交互界面库

1、React的优势

① 比于传统的DOM开发的优势

  1. 组件化的开发方式
  2. 性能的提升

② 相比于其他的前端框架优势

  1. 丰富的生态
  2. 跨平台支持

二、React开发环境搭建

1、创建项目

使用create-app是一个快速创建 React 开发环境的工具，底层由webpack构建，封装了配置细节，开箱即用（零配置）

执行命令：

1、先安装依赖 （全局安装一次就好）:

1、全局安装npm i -g create-react-app或者yarn global add create-react-app

2、检验核心包 create-react-app 是否安装成功（版本号）

create-react-app -V

在这里插入图片描述

2、创建项目：

npx create-react-app (react-project)

（）里面的 react-project是项目名字。执行完毕后，会帮我们创建出来！

解释说明：

  1. npx Node.js工具命令，查找并执行后续的命令包
  2. create-react-app 核心包（是固定的写法），用于创建 React项目
  3. react-priject 创建React项目的名称（自己可以替换）

React官方文档：

2、运行项目

cd到项目文件夹中：

使用 npm run start

在这里插入图片描述

在这里插入图片描述

运行成功！！！

3、项目的目录结构

在这里插入图片描述

这里我已经将src目录下，不必要的文件都删除了，保留了两个重要的核心文件(对文件内容也进行了筛处)

App.js文件：项目的根组件

// 项目的根组件
// 执行原理： App -> index.js -> public/index.html(root)

function App() {
  return (
    <div className="App">
      this is react
    </div>
  );
}

export default App;

index.js文件：项目的入口文件

// 项目的入口 从这里开始执行

// React必要的两个核心包
import React from 'react'
import ReactDOM from 'react-dom/client'

// 导入项目的根组件
import App from './App'


// 把 APP 根组件渲染到 id为 root 的dom节点上
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />)

public/index.js文件中：

<div id="root"></div>
  • 执行的流程： App -> index.js -> public/index.html(root)

三、JSX基础

1、什么是 JSX

JSX：（JavaScript XML）是一种在React框架中使用的 JavaScript 扩展语法。它允许我们在 JavaScript 代码中编写类似于 HTML 的结构，用于描述用户界面的呈现形式。

JSX 允许我们直接在 JavaScript 代码中书写 HTML 标签、组件和属性，并使用类似 HTML 的语法结构。通过使用 JSX，我们可以更直观地描述 UI 的层次结构和组件之间的关系。

JSX本质：

​ 在运行时，JSX 会被转译为普通的 JavaScript 代码，以便浏览器可以理解和执行。这样就使得 React 组件能够以声明式的方式定义 UI，并将其渲染到页面上。

  • 需要注意的是，JSX 是一个语法扩展，并且需要使用 Babel 等工具进行转译，以便在浏览器中正常运行。
代码示例：
<div>
  this is div
  <span>this is span</span>
</div>

经过babel解析得到如下：

import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
/*#__PURE__*/_jsxs("div", {
  children: ["this is div", /*#__PURE__*/_jsx("span", {
    children: "this is span"
  })]
});
2、JSX使用场景

JSX中可以通过 大括号 {} 识别 JavaScript 中的表达式，比如常见的变量、函数调用等等。

  1. 使用引号传递字符串
  2. 使用JavaScript变量
  3. 函数调用和方法调用
  4. 使用JavaScript对象

记住：JSX 语法就是一个大括号 {}，写在里面就可以啦！

2.1代码示例：
const count = 100
function getName () {
  return 'React'
}

function App() {
  return (
    <div className="App">
      this is react
      {/* 1、使用引号传递字符串 */}
      {'this is message'}

      {/* 2、识别 js 变量 */}
      { count }

      {/* 3、函数调用 */}
      { getName() }

      {/* 4、方法调用 */}
      { new Date().getDate() }

      {/* 5、使用 js 对象 */}
      <div style={{ color: 'red'}}>this is div</div>
    </div>
  )
}

export default App;

无论怎样，就是将js代码写在 {} 里面。

注意：if 语句 、Switch语句 、变量声明属于语句，不是表达式，不能出现在 {} 中。

3、JSX中实现列表渲染

在JSX中，可以使用原生 js 中的 map 方法 遍历渲染列表：

// 数据列表
const list = [
  { id: 1001, name: 'Vue'},
  { id: 1002, name: 'React'},
  { id: 1003, name: 'Angulor'}
]

function App () {
  return (
    <div className="App">
      this is App
      {/* 渲染列表:
            map循环那个结构   return结构
            注意事项：加上 独一无二的 key  字符串或者number  通常使用id
            key的作用： React框架内部使用，提升更新性能的
      */}
      <ul>
        { list.map(item => <li key={ item.id }>{ item.name }</li>)}
      </ul>
    </div>
  )
}

export default App

        注意事项：加上 独一无二的 key  字符串或者number  通常使用id
        key的作用： React框架内部使用，提升更新性能的

和vue中的 v-for 一样哈！

4、JSX - 实现基本的条件渲染

语法： 在 React中，可以通过逻辑与运算符 &&、三元表达式（？ ：） 实现基础的条件渲染

4.1代码示例：

const isLogin = true

function App () {
  return (
    <div className="App">
      {/* 逻辑与 && */}
      { isLogin && <span>this is span</span>}    this is span

      {/* 三元运算 */}
      { isLogin ? <span>ok</span> : <span>loading...</span>}    ok
    </div>
  )
}

export default App
5、JSX - 实现复杂的条件渲染

需求：列表中需要根据文章状态适配三种情况，单图 、三图、和 无图模式。

解决方案：

自定义函数 + if 判断语句

// 定义一个文章列表
const articleType = 1   //  0  1  3

// 定义核心函数  （根据文章类型，返回不同的 JSX模板）
function getActicle () {
  if (articleType === 1) {
    return <div>我是单图模式</div>
  } else if (articleType === 0) {
    return <div>我是无图模式</div>
  } else if (articleType === 3) {
    return <div>我是三图模式</div>
  } else {
    return <div>请选择模式！</div>
  }
}

function App () {
  return (
    <div className="App">
      {/* 调用文章模式函数 */}
      { getActicle() }
    </div>
  )
}

export default App

执行结果为：我是单图模式

主要就是依靠js 函数内部优化！

四、 React中的事件绑定 and 参数传递

语法： on + 事件名 = {事件处理程序}，整体上遵循驼峰命名法。

1、事件绑定代码示例：

function App () {
  const handleClick = () => {
    console.log('button被点击了')
  }
  return (
    <div className="App">
      {/* React 事件绑定 onClick = { 事件名 } */}
      <button onClick = { handleClick }>click me</button>
    </div>
  )
}

export default App
2、使用事件对象参数

语法：在事件回到函数中设置形参 e

代码示例：

// 触发事件对象 e
function App () {
  const handleClick = (e) => {
    console.log('触发点击事件', e)
  }
  return (
    <div className="App">
      <button onClick = { handleClick }>click me</button>
    </div>
  )
}

export default App
3、触发事件，传递自定义参数

代码示例：

语法： 就是将{} 里面的函数，写成一个箭头函数，通过 return 返回我们的事件函数，同时传递实参。

// 触发点击事件，传递自定义参数
function App () {

  // 定义事件函数
  const handleClick  = (message) => {
    console.log('事件触发携带参数为：', message)
  }
  return (
    // 注册事件，回到函数为一个箭头函数，直接return我们定义的事件函数，传递实参。
    <div className="App">
      <button  onClick = { () => handleClick('我是实参，自定义参数')}>me is click butotn</button>
    </div>
  )
}

export default App

在这里插入图片描述

4、事件对象参数 和 自定义参数同时传递的情况

语法：onClick = {(e) => 事件函数(e, 自定义参数)

代码示例：

// 事件传参， 以及自定义传参同时需要的写法：

function App () {

  // 定义事件函数
  const handleClick = (e, message) => {
    console.log('事件对象参数：', e)
    console.log('自定义传参：', message)
  }
  return (
    <div className="App">
      {/* 注意：箭头函数的形参得到了e， 函数里面的事件函数，自然就需要接受了e */}
      <button onClick = {e => handleClick(e, '我是自定义传参')}>事件对象参数 and 自定义传参</button>
    </div>
  )
}

export default App

在这里插入图片描述

注意点：事件函数的 实参顺序，取决于我们事件函数形参的顺序，若是 事件参数 e 在前，那么实参自然需要将 e 放在前面。

五、React组件基础使用

概念： 组件就是用户界面的一部分，他可以有自己的逻辑和外观，组件之间可以互相嵌套，也可以重复多次使用。

组件化开发可以像搭积木一样构建一个完整庞大的应用。

1、React组件 定义 与 使用

在React中，一个组件就是首字母大写的函数，内部存放了组件的逻辑和视图 UI ，渲染组件只需要把组件当成标签书写即可。

这也是和 Vue.js 框架的一个差别：虽然使用还是一样的，定义却变成了函数。

代码示例：
// React 组件的是定义和使用


// 1、定义一个组件
const Button = () => {
  // 业务逻辑组件
  return <button>click me!</button>
}

function App () {
  return (
    // 2、使用渲染 组件
    <div className="App">
      {/* 自闭合 */}
      <Button/>

      {/* 成对标签 */}
      <Button></Button>
    </div>
  )
}

export default App

在这里插入图片描述

注意：定义组件，普通的函数和箭头函数都是可以的。

六、useState基础使用

1、useState是什么

useState 是一个 React Hook（函数），它允许我们向组件添加一个状态变量，从而控制影响组件的渲染结果。

本质： 和普通的 js 变量 不同的是： 状态变量一旦发生改变组件的 视图 UI 也会跟着变化 （数据驱动视图）

  • 这个就和Vue.js 的数据双向绑定很像了。
代码示例：
//  useState实现一个计数器按钮

// 导入 useState 函数
import { useState } from 'react'

function App () {
  
// 1、调用 useState 函数， 添加一个状态变量
const [count, setCount] = useState(0)

// 2、触发事件函数，setCount方法修改 状态变量 count的值
const handleCount = () => {
  // 修改状态变量（响应式变量）
  setCount(count + 1)
}

  return (
    <div className="App">
      <button onClick = { handleCount }>{ count }</button>
    </div>
  )  
}

export default App

代码说明：

  1. 首先，useState 是 React框架模块中的一个函数，我么使用 import 命名导入该函数
  2. 然后我们通过useState结构创建一个count响应式变量，用来视图的。setCount自然就是用来修改变量的状态的。
  3. 然后我们定义一个事件处理函数，并且在按钮上进行注册。
  4. 当用户点击了按钮的时候，就出发事件处理函数，内部调用了 setCount方法 修改了count响应式变量。
  5. 这样一来，我们的JSX语法使用count的地方就会受到改变了。从而实现了数据驱动视图的效果。
2、useState修改状态的规则
2.1 状态不可变

在 React中，状态被认为是只读的，我们应该始终替换他而不是修改它，直接修改状态不能引发视图更新。

首先是直接修改：useState内部的方法去处理。

代码示例：

  const handleCount = () => {
    // 直接修改无法改变视图
    count++
  }
  
  let [ count, setCount ] = useState(0)

下面是通过内部的方法，即可修改视图。

代码示例：

//想要修改状态变量，这种方式是可行的
  const handleCount = () => {
    // 使用内部方法，替换状态变量修改视图
    setCount(count + 1)
  }
  
  let [ count, setCount ] = useState(0)
3、修改对象的状态（数据）

规则：对于对象类型的状态变量，应该始终传递给set方法，一个全新的对象来进行修改。

// 修改对象里面的状态
import { useState } from 'react'

function App () {

  const [ nameObj, setName ] = useState({
    name: 'LiuJinTao'
  })

  // 事件处理函数
  const handleName = () => {
    // 将 nameObj对象展开得到里面的状态
    setName({
        ...nameObj,
        name: 'Hello React'
    })
  }
  return (
    <div className='App'>
      <button onClick = { handleName }>修改对象状态</button>
      <span>{ nameObj.name }</span>
    </div>
  )
}

export default App

注意： nameObj是状态变量，可以是对象也可以是普通变量

切记错误写法，直接修改状态变量。

七、组件基础样式

React组件基础的样式控制有两种方法。

1、行内样式（不推荐）

直接写一个对象:

<div style = { { color: 'red' } }>this is div</div>

自己声明一个对象的写法：

就是将里面的东西抽出去，直接通过变量替换。

const style = {
  color: 'red',
  fontSize: '24px'
}

<div style = { style }>this is div</div>
2、class类名控制（推荐使用）

先在index.css文件中定义样式：

/* index.css 定义样式 */
.foo {
    color: skyblue;
    font-size: 24px;
}

2、然后再App.js 文件中导入，使用样式类名

// 基础样式使用

// 导入样式表文件
import './index.css'

function App () {
  return (
    <div className="App">
      <span className="foo">this is class foo</span>
    </div>
  )
}

export default App
  • 以上就是 React 基础的简单语法的使用，我们下期再见！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1117342.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Cmake用户交互指南

Cmake用户交互指南

文章目录 一. 介绍1. 命令行cmake工具2. cmake gui工具 二. 生成构建系统1. 命令行环境2. 命令行-G选项3. 在cmake gui中选择生成器 三. 设置生成变量1. 在命令行上设置变量2. 使用cmake gui设置变量3. CMake缓存 四. 预设1. 在命令行上使用预设2. 在cmake gui中使用预设 五. 调…
阅读更多...
【五：（mock数据）springboot+mock集成swaggerConfig】

【五：（mock数据）springboot+mock集成swaggerConfig】

目录 1、springboot 的Demo2、实例类3、服务类 get请求方法4、服务类的post请求方法5、swaggerConfig 接口文档生成配置依赖 SpringBootApplication ComponentScan("com.course") public class Application {public static void main(String[] args) {SpringApplicat…
阅读更多...
【TensorFlow1.X】系列学习笔记【基础一】

【TensorFlow1.X】系列学习笔记【基础一】

【TensorFlow1.X】系列学习笔记【基础一】 大量经典论文的算法均采用 TF 1.x 实现, 为了阅读方便, 同时加深对实现细节的理解, 需要 TF 1.x 的知识 文章目录 【TensorFlow1.X】系列学习笔记【基础一】前言线性回归非线性回归逻辑回归总结 前言 本篇博主将用最简洁的代码由浅入…
阅读更多...
AD20原理图库的制作

AD20原理图库的制作

1、打开“51单片机最小系统”的工程文件。 2、创建原理图库文件&#xff1a;单击“文件”菜单&#xff0c;选择“新的”选项中的“库”选项&#xff0c;再选择“原理图库”&#xff0c;进入原理图库元件的编辑界面。 3、保存原理图库文件&#xff1a;选择“文件”菜单&#xff…
阅读更多...
antd vue 组件 使用下拉框的层级来显示后面的输入框

antd vue 组件 使用下拉框的层级来显示后面的输入框

效果图&#xff1a; 代码&#xff1a; HTML: <dir><a-row><a-col :span"4"><a-form-model-item label"审批层级" ><a-selectplaceholder"请选择审批层级"v-model"form.PlatformPurchaseApproveLevel"cha…
阅读更多...
安达发|人工智能在APS高级计划与排程中的应用

安达发|人工智能在APS高级计划与排程中的应用

随着人工智能&#xff08;AI&#xff09;技术的发展&#xff0c;其在生产计划与排程&#xff08;APS&#xff09;领域的应用也日益广泛。APS是一种复杂的系统工程&#xff0c;它需要处理大量的数据&#xff0c;包括需求预测、资源优化、路径规划等。AI技术的应用可以帮助企业更…
阅读更多...
身份证读卡器ubuntu虚拟机实现RK3399 Arm Linux开发板交叉编译libdonsee.so找不到libusb解决办法

身份证读卡器ubuntu虚拟机实现RK3399 Arm Linux开发板交叉编译libdonsee.so找不到libusb解决办法

昨天一个客户要在RK3399 Linux开发板上面使用身份证读卡器&#xff0c;由于没有客户的开发板&#xff0c;故只能用本机ubuntu虚拟机来交叉编译&#xff0c;用客户发过来的交叉编译工具&#xff0c;已经编译好libusb然后编译libdonsee.so的时候提示找不到libusb&#xff0c;报错…
阅读更多...
语音芯片KT142C两种音频输出方式PWM和DAC的区别

语音芯片KT142C两种音频输出方式PWM和DAC的区别

目录 语音芯片KT142C两种音频输出方式PWM和DAC的区别 一般的语音芯片&#xff0c;输出方式&#xff0c;无外乎两种&#xff0c;即dac输出&#xff0c;或者PWM输出 其中dac的输出&#xff0c;一般应用场景都是外挂功放芯片&#xff0c;实现声音的放大&#xff0c;比如常用的音箱…
阅读更多...
csapp-Machine-Level Representation of Program-review

csapp-Machine-Level Representation of Program-review

Machine-Level Representation of Program收获和思考 Basics Machine-Level Programming可以看成是机器执行对于上层代码的一种翻译&#xff0c;即硬件是如何通过一个个的指令去解释每一行代码&#xff0c;然后操纵各种硬件执行出对应的结果。 Machine-Level Programming有2种…
阅读更多...
Jprofiler V14中文使用文档

Jprofiler V14中文使用文档

JProfiler介绍 什么是JProfiler？ JProfiler是一个用于分析运行JVM内部情况的专业工具。 在开发中你可以使用它，用于质量保证，也可以解决你的生产系统遇到的问题。 JProfiler处理四个主要问题: 方法调用 这通常被称为"CPU分析"。方法调用可以通过不同的方式进行测…
阅读更多...
【剑指Offer】33.二叉搜索树的后序遍历序列

【剑指Offer】33.二叉搜索树的后序遍历序列

题目 输入一个整数数组&#xff0c;判断该数组是不是某二叉搜索树的后序遍历的结果。如果是则返回 true ,否则返回 false 。假设输入的数组的任意两个数字都互不相同。 数据范围&#xff1a; 节点数量 0≤n≤1000 &#xff0c;节点上的值满足 1≤val≤10^5 &#xff0c;保证节…
阅读更多...
Xcode报错“compact unwind compressed function offset doesn‘t fit in 24 bits

Xcode报错“compact unwind compressed function offset doesn‘t fit in 24 bits

Assertion failed: (false && “compact unwind compressed function offset doesn’t fit in 24 bits”), function operator(), file Layout.cpp, line 5758. 解决方案&#xff1a;targerts->build settings->other linker Flages增加-ld64
阅读更多...
企业数据防泄密软件-文件外发管理，文件，文档，图纸不外泄

企业数据防泄密软件-文件外发管理，文件，文档，图纸不外泄

企业数据防泄密软件可以帮助保护企业的重要数据和知识产权&#xff0c;其中文件外发管理是一个重要的环节。 PC访问地址&#xff1a;https://isite.baidu.com/site/wjz012xr/2eae091d-1b97-4276-90bc-6757c5dfedee 以下是一些关键功能&#xff1a; 透明加密&#xff1a;加密软件…
阅读更多...
【框架源码篇 01】Spring源码-手写IOC

【框架源码篇 01】Spring源码-手写IOC

Spring源码手写篇-手写IoC 一、IoC分析 1.Spring的核心 在Spring中非常核心的内容是 IOC和 AOP. 2.IoC的几个疑问? 2.1 IoC是什么&#xff1f; IoC:Inversion of Control 控制反转&#xff0c;简单理解就是&#xff1a;依赖对象的获得被反转了。 2.2 IoC有什么好处? IoC带…
阅读更多...
浏览器的四种缓存协议

浏览器的四种缓存协议

❤️浏览器缓存 在HTTP里所谓的缓存本质上只是浏览器和业务侧根据不同的报文字段做出不同的缓存动作而已 四种缓存协议如下 Cache-ControlExpiresETag/If-None-MatchLast-Modified/If-Modified-Since &#x1f3a1;Cache-Control 通过响应头设置Cache-Control和max-age&…
阅读更多...
【必须安排】书单｜1024程序员狂欢节充能书单！

【必须安排】书单｜1024程序员狂欢节充能书单！

注&#xff1a;以上书单可从京东商城优惠购买&#xff0c;点击以下链接进入图书专题&#xff01;1024程序员狂欢节充能书单 一年一度的1024程序员狂欢节又到啦&#xff01;成为更卓越的自己&#xff0c;坚持阅读和学习&#xff0c;别给自己留遗憾&#xff0c;行动起来吧&#x…
阅读更多...
UniApp百度人脸识别插件YL-FaceDetect

UniApp百度人脸识别插件YL-FaceDetect

插件地址&#xff1a;https://ext.dcloud.net.cn/plugin?id15061 插件说明&#xff1a; 百度离线人脸识别&#xff0c;人脸收集&#xff0c;属性&#xff08;性别年龄&#xff09;识别等&#xff0c;目前只支持安卓端&#xff01; 另&#xff1a;该插件支持的功能为属性识别…
阅读更多...
win10下yolox tensorrt模型部署

win10下yolox tensorrt模型部署

TensorRT系列之 Win10下yolov8 tensorrt模型加速部署 TensorRT系列之 Linux下 yolov8 tensorrt模型加速部署 TensorRT系列之 Linux下 yolov7 tensorrt模型加速部署 TensorRT系列之 Linux下 yolov6 tensorrt模型加速部署 TensorRT系列之 Linux下 yolov5 tensorrt模型加速部署…
阅读更多...
51系列—基于51单片机的数字频率计(代码+文档资料)

51系列—基于51单片机的数字频率计(代码+文档资料)

本文主要说明基于51单片机的数字频率计设计&#xff0c;完整资料见文末链接 数字频率计概述 数字频率计是计算机、通讯设备、音频视频等科研生产领域不可缺少的测量仪器。它是一种用十进制数字显示被测信号频率的数字测量仪器。它的基本功能是测量正弦信号&#xff0c;方波信…
阅读更多...
安达发|AI在APS生产计划排程系统中的应用与优势

安达发|AI在APS生产计划排程系统中的应用与优势

随着科技的不断发展&#xff0c;人工智能&#xff08;AI&#xff09;已经在许多领域取得了显著的成果。在生产管理计划系统中&#xff0c;AI技术的应用也日益受到关注。本文将探讨如何将AI人工智能用在生产管理计划系统上&#xff0c;以提高生产效率、降低成本并优化资源配置。…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023