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

最新推荐文章于 2024-08-09 17:25:10 发布
最新推荐文章于 2024-08-09 17:25:10 发布
阅读量686 收藏 1
点赞数 1
分类专栏： react 文章标签： react.js 前端 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Forever_Hopeful/article/details/133959416
版权

01 React

文章目录

一、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 基础的简单语法的使用，我们下期再见！
脱发使我稳重
关注
专栏目录
react基础Day01-React概述&脚手架搭建&JSX&组件.md
01-04
react基础Day01-React概述&脚手架搭建&JSX&组件.md
React Hooks之useState详解
RayShyy的博客
02-12 9273
React官方简介：Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。本文中讲解的useState就是React中的其中一个Hook。
如何从零开始创建React项目（三种方式）
热门推荐
weixin_45242865的博客
12-02 1万+
在开发 React 项目前最关键的当然是项目的创建，现在的前端工程化使得前端项目的创建也变得越来越复杂，在这里介绍三种从零开始创建 React 项目的方式，分别是 “在浏览器中直接引入”、“使用官方脚手架 create-react-app” 以及 “使用 Webpack 创建”。 浏览器中通过标签直接引入 React 框架有两个核心的包，分别是 react 以及 react-dom；若想直接在浏览器中使用 React，那么把这两个包直接引入就可以了。 <!-- 引入 react --> <
React系列之useState
总结前端开发中遇到的问题，分享前端知识
06-09 1750
只能出现在函数组件中；不能嵌套在if/for/其它函数中（react按照hooks的调用顺序识别每一个hook）
usestate函数式更新_useState 函数式状态管理
weixin_39921023的博客
01-14 984
React 有两种方式可以实现组件的定义，一种是通过函数实现，一种是通过class类实现。一般的通过class类实现的组件我们可以看到足够多的生命周期、状态state可供操作，而函数式组件则没有生命周期和状态值state。对就性能而言，由于函数组件需要初始化组件，而函数组件是直接通过return 返回JSX，因此函数组件的性能要优于类组件。为了性能考虑，一般的我们推荐使用函数组件来实现组件的定义。...
之前写的 JSX 的条件语句竟然存在那么多 Bug？
CSDN云计算
01-26 299
作者 | 零一来源 |前端印象今天的主题是：关于 JSX 的条件语句，你不知道3件事一、&&隐藏大坑在 JSX 里写条件语句，&& 应该是用的最多的了，例...
zingchart-react:使用ZingChart＆React快速创建动态JavaScript图表
05-07
快速入门指南使用我们的ZingChart组件将图表快速添加到您的React应用程序中本指南假定您具有React和jsx的一些基本工作知识。1.安装通过npm安装zingchart软件包npm install zingchart 通过npm安装zingchart-react...
tslint-react：与TSLint的React＆JSX相关的Lint规则
02-06
与React＆JSX相关的Lint规则。 用法 tslint-react对TSLint和TypeScript具有同级依赖。 要将这些lint规则与默认预设一起使用，请通过extends关键字使用配置继承。 这是一个示例配置，其中tslint.json与node_modules...
【React框架】教程&案例&相关项目
06-19
下面是一个简单的React组件示例，展示了如何使用`useState`来管理组件状态： ```jsx import React, { useState } from 'react'; function ExampleComponent() { const [count, setCount] = useState(0); return ...
【React框架】教程&案例&相关项目.zip
06-11
1. **React基础知识**：了解React的基本理念，包括JSX语法、组件化编程、状态管理以及生命周期方法。JSX允许开发者用类似HTML的结构编写JavaScript，使代码更易读易写。 2. **创建React应用**：学习如何使用Create ...
Reactjs 踏坑指南2： JSX&&组件
weixin_34221773的博客
12-14 311
JSX 知识准备 JSX 并不是一门全新的语言，仅仅是一个语法糖，允许开发者在javascript中编写XML语言。这样使用JavaScript来构建组件以及组件之间关系的应用，在代码层面显得更加清晰，而不再是使用JavaScript操作DOM来创建组件以及组件之间的嵌套关系。 作为是React的核心部分，JSX使用XML标记的方式直接声明页面。在JavaScript代码里直接写XML的语法，每一...
带你深入了解 useState
趣谈前端
03-09 1951
大厂技术坚持周更精选好文为什么 react 16 之前的函数组件没有状态？众所周知，函数组件在 react 16 之前是没有状态的，组件状态只能通过props进行传递。写两个简...
react基础语法，模板语法，ui渲染，jsx，useState状态管理
I_am_shy的博客
07-10 1360
这里使用create-react-app的脚手架构建项目（结构简洁，基于webpack-cli），成功构建后只需要关注两个部分，package.json中的script脚本，start：启动项目src中的核心文件，index.js: 引入react的依赖, App.js：根组件可以先去除多余的文件index.jsapp.js以上是精简后的文件目录和文件内容，可以看出核心的引入库为react和react-dom，整个框架也是完全基于js生成的。
React入门篇：简单介绍，开发环境搭建，JSX基础，基础事件绑定，条件渲染，useState基础使用，修改状态的规则
最新发布
jungleirim的博客
08-09 1103
React由Meta公司研发，是一个用于构建Web和原生交互界面的库。概念:JSX是JavaScript和XML(HTML)的缩写，表示在JS代码中编写HTML模版结构,它是React中编写UI模版的方式。
useState() 的使用及场景
wbskb的博客
08-13 816
useState() 是什么？以及有哪些使用场景？什么时候需要使用 useState()？什么时候不需要使用 useState()？
useState执行机制
Gleason
02-08 1807
使用 react hooks 很久了，对于 useState 的理解一直都是模糊不清，终于下定决心把它理清楚，看似简单的 useState 暗藏玄机，先来看一段代码 import { useState } from 'react'; console.log('函数外'); const HomePage = () => { console.log('函数内 顶部'); const [num, setNumber] = useState(0); const [count, setCount] =
React 快速入门 这篇就够了
制定持续可量化的目标，不断坚持。
02-23 4438
React 是一个流行的 JavaScript 库，它专注于用户界面的构建。它的主要特点包括：1.组件化架构：React 使用组件来构建 UI，每个组件都是独立的，可以重复使用，这有助于代码的模块化和项目的可维护性。2.虚拟 DOM：React 维护一个内存中的虚拟 DOM 树，只有在真正需要时才更新实际的 DOM，这提高了更新效率和性能。3.声明式 API：开发者通过描述 UI 应该是什么样子来创建组件，React 负责实际的渲染工作，这使得代码更易理解和编写。
[react基础] -- jsx 数组 项目构建 类组件，函数组件，组件传值，事件绑定，事件传参 state
qq_14993591的博客
11-30 1806
文章目录一、React初识二、JSX1、概述2、JSX重构Hello world3、在JSX中语法中的js表达式3.1、嵌入JS表达式3.2、属性绑定 src={src}3.3、数组渲染3.3.1、直接渲染3.3.2、处理并渲染三、项目构建1、初始化项目2、目录结构四、组件1、组件的创建方式1.1、函数创建组件1.2、类组件2、组件传值2.1、函数组件2.2、类组件五、事件处理1、事件绑定2、事件对象3、事件方法传参4、this指向问题六、State状态1、基本使用2、修改状态this.setState同步
React学习笔记-详细版（项目搭建，JSX基础使用，组件通信，事件绑定）
m0_62300955的博客
03-07 323
react基础知识，事件绑定，组件通信
React基础教程：组件、生命周期与状态管理
"这份资料是关于React基础用法的总结，包括了React的工具设置、基本概念、组件、生命周期、状态管理和父子组件间的数据传递等内容，适合React初学者参考学习。" React是Facebook开发的一款用于构建用户界面的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

脱发使我稳重

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值