对react的初步认识以及安装eslint

最新推荐文章于 2025-03-06 14:47:26 发布

Why_so_serious_Y

最新推荐文章于 2025-03-06 14:47:26 发布

阅读量1k

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.youkuaiyun.com/Wy_so_serious/article/details/121171172

版权

本文介绍了React，一个JavaScript库，用于声明式地构建用户界面。通过组件化思想，React让你能在Web和移动端开发中复用代码。学习如何使用React脚手架创建项目，理解JSX、条件渲染、列表渲染和样式处理，以及如何配置eslint和prettier。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

React 介绍

React 是用于构建用户界面的 JavaScript 库

构建用户界面. User Interface，对咱们前端来说，简单理解为：HTML 页面
javscrtipt库。不是框架，是库。
- vue: 是渐进式的javascript框架
- react 全家桶是框架
  - react: 核心库
  - react-dom: dom操作
  - react-router：路由,
  - redux：集中状态管理

react的三个特点：

声明式：

只需要描述UI看起来时什么样的，就跟写html一样。

用类似于html的语法来定义页面。react中通过数据驱动视图的变化，当数据发生改变react能够高效地更新并渲染DOM。

<div className="app">
    <h1>Hello React! 动态数据变化:{count}</h1>
</div>

组件化：

组件是react中最重要的内容

组件用于表示页面中的部分内容

组合、复用多个组件，就可以实现完整的页面功能

学习一次，随处使用

使用react/rect-dom可以开发Web应用

使用react/react-native可以开发移动端原生应用（react-native）RN

使用react可以开发VR（虚拟现实）应用（react/react360）

React脚手架-从零开始创建项目

创建方式1

1.先全局安装脚手架工具包

npm i -g create-react-app

2.用脚手架工具来创建项目

create-react-app your-project-name

创建方式2

直接使用npx来创建项目

npx create-react-app your-project-name

解释：

npx create-react-app 是固定命令，create-react-app 是 React 脚手架的名称
your-project-name 表示项目名称，可以修改

React脚手架-了解项目的工作方式

认识react项目目录结构

启动项目

npm start

目录src

说明：

src 目录是我们写代码进行项目开发的目录
index.js是入口文件
查看 package.json 两个核心库：react、react-dom（脚手架已经帮我们安装好，我们直接用即可）

调整

删除 src 目录下的所有文件
创建src/index.js, 内容如下：

console.log('我的第一个react项目跑起来啦')

第一份react程序

目标

了解react程序的基本步骤

步骤

导入包： React， ReactDOM
创建 react元素
渲染元素到某个dom上

示例

在页面上创建一个h1标题。

代码：index.js

// 导入react和react-dom
import React from 'react'
import ReactDOM from 'react-dom'

// 创建元素
const title = React.createElement('h1', {id:'box'}, 'hello react')

// 渲染react元素
ReactDOM.render(title, document.getElementById('root'))

理解react-dom

package.json

JSX介绍-基本使用

问题导入

createElement的效率太低了。

不直观，无法一眼看出所描述的结构
不优雅，开发体验不好

目标

了解JSX的定义，了解它的工作过程

JSX是什么

JSX：是 JavaScript XML的缩写。

在 JS 代码中书写 XML 结构
- 注意：JSX 不是标准的 JS 语法，是 JS 的语法扩展。脚手架中内置了 @babel/plugin-transform-react-jsx 包，用来解析该语法。
React用它来创建 UI（HTML）结构

理解：我们之前用html写页面，现在是用jsx来写页面

jsx示例

// 导入react和react-dom
import React from 'react'
import ReactDOM from 'react-dom'

// jsx创建元素
const list = <ul><li>html</li><li>js</li><li>css</li><ul>

// 渲染react元素
ReactDOM.render(list, document.getElementById('root'))

优势

采用类似于 HTML 的语法，降低了学习成本，会 HTML 就会 JSX
充分利用 JS 自身的能力来创建 HTML 结构。比如，利用 JS 数组的 map 方法创建列表结构

JSX的注意事项

jsx必须要有一个根节点
属性名不能用js中的关键字。例如class, for
单标签要闭合
换行建议使用()包裹
老版本(16.8)先引入react才能使用jsx

jsx必须要有一个根节点

有一下两种格式

格式1：<> xxx </>

import ReactDOM from 'react-dom'

const title = <> <h1>Hello React</h1><p>p标签</p> </>

ReactDOM.render(title, document.querySelector('#root'))

格式2：<React.Fragment> xxx </React.Fragment>

格式2：`<React.Fragment> xxx </React.Fragment>

属性名不能用js中的关键字

例如class, for

class -> className
for ->htmlFor

单标签要闭合

<input> ---> <input />

老版本(16.8)先引入react才能使用jsx

理解引入react的作用（提供createElement的功能）

老版本中不引入就会报错React must be in scope when using JSX

换行建议使用()包裹

const content = (
	<div>
  	<h1>xxx</h1>
  </div>
)

JSX-嵌入表达式

导入

通过上面的学习，我们已经可以使用jsx来描述一段静态结构了，更多的情况下，我们需要动态的结构。例如，在页面上输出一个随机值

import ReactDOM from 'react-dom'

const num = Math.random()
const title = (<div>
               		随机值：num
               </div>)

ReactDOM.render(title, document.querySelector('#root'))

嵌入表达式的格式 `{ JS 表达式 }`

例如：

import ReactDOM from 'react-dom'

const num = Math.random()
const title = (<div>
               		随机值：{ num }
               </div>)

ReactDOM.render(title, document.querySelector('#root'))

大括号是一种特殊的语法，让 JSX 解析器知道它需要将它们之间的内容解释为 JavaScript代码而不是字符串

作用：执行{}内部的代码，并输出结果。

嵌入表达式的位置

1.属性值：

const logo = 'https://create-react-app.dev/img/logo.svg'
<img width="80" src={logo} />

2.内容：

const name = '小芳'
<div>{name}</div>

单花括号中可以写什么？

可以写

表达式

定义：数据类型和运算符的组合（可以单独出现数据类型，也可以数据类型+运算符的组合）

特点：有值（或者能够计算出一个值）； 能被console.log()
其他的jsx表达式
注释

不可以写

对象
js语句：if 语句/ switch-case 语句/ 变量声明语句

示例

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

const girl = {
  name: '小芳',
  age: 19,
  logo: 'https://create-react-app.dev/img/logo.svg',
  skills: ['唱歌', '收稻子']
}

const f1 = () => {
  return <i>{girl.skills.join(',')}</i>
}
const baseInfo = (
  <div>
    姓名: {girl.name}
    妙龄: {girl.age}
  </div>
)

const content = (
  <div style={{ padding: 50 }}>
    <h1>jsx-表达式</h1>

    {/* 1. {} 可以用在内容上 */}

    {/* {}可以包其他的jsx */}
    {baseInfo}

    {/* {}可以包表达式 */}
    <p>爱好:{girl.skills}</p>
    <p>字符串:{'abc'}</p>
    <p>字符串:{'{'}</p>
    <p>数组:{[1, 2, 3]}</p>
    <p>数值:{100}</p>
    <p>函数：{f1()}</p>
    <p>算数表达式：100/2={100 / 2}</p>
    <p>
      三元表达式：{girl.age < 28 ? '芳龄' : '年龄'} {girl.age}
    </p>

    {/* 2. {}可以用在属性值上 */}
    <p className={['class1', 'class2'].join(' ')}>类名组合</p>
    <img width="80" src={girl.logo} />

    {/*
    下面是错误的示范
    不能输出对象，不能使用语句
    <p>{{ a: 1 }}</p>
    <p>{var a =1 }</p> */}
  </div>
)
ReactDOM.render(content, document.getElementById('root'))

JSX-条件渲染

目标

掌握条件渲染，能根据是否满足条件生成 HTML 结构

实现方式

if/else
三元运算符
逻辑与(&&)运算符

示例

简单情况-用三元表达式

const flag = 0
const content = (<div>{flag ? '达成' : '没有达成'}</div>)

简单情况-用逻辑与

const isLogin = true
const content = (<div>{ isLogin && '您登录了'}</div>)

复杂情况-使用额外的函数

const loadData = (isLoading) => {
  if (isLoading) {
    return <div>数据加载中，请稍后...</div> 
  } else {
    return <div>数据加载完成，此处显示加载后的数据</div>
  }
}
const content = <div>{loadData(true)}</div>

小结

简单条件渲染使用____ 和 _

复杂的条件渲染使用函数，在函数内部通过if,else,swich, case来显示内容

JSX-列表渲染

目标

在JSX中使用数组的map方法来生成列表结构

场景

从后端取回来的数据保存在数组中，需要用列表展示。这里的数组如下：

const skills = [
  { id: 1, name: 'html' }, 
  { id: 2, name: 'css' }, 
  { id: 3, name: 'js' }
]

我们要生成的dom结构如下：

<ul>
  <ol>技能1：html</ol>
  <ol>技能2：css</ol>
  <ol>技能3：js</ol>
</ul>

low方法

直接定义一个数组，每个元素都是一个jsx结构

const skills = [<ol>技能1:html</ol>, <ol>技能2: css</ol>, <ol>技能3: js</ol>]

const content = <ul>{skills}</ul>

ReactDOM.render(content, document.getElementById('root'))

用map

完整格式

// 完整格式
const t = skills.map(function(item) {
  return <ol>技能{item.id}: {item.name}</ol>
})

const list = <ul>{t}</ul>

简写格式

const list = (
  <ul>
    {skills.map(item => <ol>技能{item.id}: {item.name}</ol>)}
  </ul>
)

小结

作用：重复生成相同的 HTML 结构。

列表渲染中的key

目标

了解key的作用，能正确给循环渲染项添加key

了解key的作用

React 内部用来进行性能优化时使用的，在最终的HTML结构中是看不到的。

性能优化

例如，数据如下

const songs = [
  { id: 1, name: '痴心绝对' }, 
  { id: 2, name: '像我这样的人' }, 
  { id: 3, name: '南山南' }
]

生成的dom

<ul>
  <li>排名:1 - 歌名：痴心绝对</li>
  <li>排名:2 - 歌名：想我这样的人</li>
  <li>排名:3 - 歌名：南山南</li>
</ul>

如果添加一条数据，则视图也要随之更新，而更新的逻辑是：前三条正常保留，而重新添加第四条。

如何设置key

如果数据中有一个唯一的属性值，就可以使用这个属性来当做key

如果没有，就可以用索引值

JSX 样式处理

格式

<dom元素 style={ {css属性1：值1,css属性2：值2} }></dom元素>

示例

// 行内样式
<h1 style={ {color: 'red', width: 200, backgroundColor: 'black'} }>
  我是黑底红字的h1
</h1>

要点：

为啥有两个{{ }}
1. 外层的{}表示要开始写js了
2. 内层的{}表示是一个对象
属性名是小驼峰格式 (background-color ===> backgroundColor)
属性值是字符串, 如果单位是px，可以简写数值

使用 className

要点

用className（不是class）定义类名
把样式写在额外的.css文件中，然后引入.css文件

import './index.css'

// 类名
<h1 className="title">
  我是黑底红字的h1
</h1>

补充建立.css

.title{
  color: red;
  width: 200px;
  background-color: black;
}

小结

jsx中的样式：

行内： style={{对象，小驼峰}}
外部： className

JSX 整体总结

React 使用 JSX 来编写 UI（HTML）
React 完全利用 JS 语言自身的能力来增强 UI 的编写 - 能用 JS 来实现的功能绝不会增加一个新的 API
现在，就可以使用 React 来编写任意 UI 结构了

拓展1-环境配置-引入eslint

目标

在react项目中配置eslint，并启用保存自动格式化功能

思路

在项目中安装eslint
用eslint的init命令创建eslint配置文件
设置vscode的自动保存格式化

步骤

npm i eslint -D
在项目根目录，运行npx eslint --init
1. 按交互提示安装相关插件
2. 它会自动生成eslint的配置文件
设置vscode的自动保存格式化

代码

在项目根目录下，补充配置文件：.vscode\settings.json，其内容如下：

{
  "eslint.run": "onType",
  "eslint.options": {
    "extensions": [".js", ".vue", ".jsx", ".tsx"]
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

拓展2-环境配置-引入prettier-now

eslint并不能深入到jsx代码中来格式化，所以需要额外的工具。

prettier-now

是prettier项目的分支，具备和prettier一样的功能，不过，它允许使用更多的配置项。在vscode的插件库中，同时有prettier-now和prettier，在安装时，请不要安装错了。

步骤

安装vscode插件prettier-now
补充配置

代码

.vscode\settings.json

{
  "eslint.run": "onType",
  "eslint.options": {
    "extensions": [".js", ".vue", ".jsx", ".tsx"]
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },

  // 编辑器设置 - 保存时做格式化
  "editor.formatOnSave": true,
  // 编辑器设置 - 默认采用prettier-now做格式化
  // 如果使用的是prettier，这的设置应该是 esbenp.prettier-vscode
  "editor.defaultFormatter":"remimarsal.prettier-now",

  // 控制缩进
  "prettier.useTabs": false, // 缩进不使用tab，使用空格 
  "prettier.tabWidth": 2, // 缩进字节数
  
  // 函数声明时小括号前后要加空格
  // 如果你使用prettier这一项是不能做选择的，导致和eslint默认配置的冲突
  // 可以在百度中搜到很多的记录： https://www.baidu.com/s?wd=prettier%20%E5%87%BD%E6%95%B0%E7%A9%BA%E6%A0%BC
  "prettier.spaceBeforeFunctionParen": true,

  // react的jsx让>与结束标签同行
  "prettier.jsxBracketSameLine": true,

  "prettier.semi": false, // 不要给语句加;
  "prettier.singleQuote": true, // 采用单引号
  "prettier.trailingComma": "none", // 不要尾随逗号,
  "prettier.printWidth": 80, // 每行超过80列就换行

  // 在.js中，写div按下tab就可以自动补全，而不需要写<div再补全
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },
}