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

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;

1
2
3
4
5
6
7
8
9
10
11
12
13

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 />)

1
2
3
4
5
6
7
8
9
10
11
12
13
14

public/index.js文件中：

<div id="root"></div>
1

• 执行的流程： 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>
1
2
3
4

经过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"
  })]
});
1
2
3
4
5
6
7

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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

无论怎样，就是将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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

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

和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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

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

主要就是依靠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
1
2
3
4
5
6
7
8
9
10
11
12
13
14

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
1
2
3
4
5
6
7
8
9
10
11
12
13

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

注意点：事件函数的 实参顺序，取决于我们事件函数形参的顺序，若是 事件参数 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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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

六、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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

代码说明：

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)

1
2
3
4
5
6
7

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

代码示例：

//想要修改状态变量，这种方式是可行的
  const handleCount = () => {
    // 使用内部方法，替换状态变量修改视图
    setCount(count + 1)
  }
  
  let [ count, setCount ] = useState(0)
1
2
3
4
5
6
7

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

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

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

七、组件基础样式

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

1、行内样式（不推荐）

直接写一个对象:

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

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

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

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

<div style = { style }>this is div</div>
1
2
3
4
5
6

2、class类名控制（推荐使用）

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

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

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

// 基础样式使用

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

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

export default App
1
2
3
4
5
6
7
8
9
10
11
12
13
14

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