【从零开始学 React | 第一章】React 基础与 JSX 核心语法

前言：本章主要讲了什么是React，如何进行基础事件绑定，组件使用以及JSX常见写法。 - React 是用于构建用户界*的 JavaScript 库，核心是以组件化和虚拟 DOM高效开发可复用、响应式的页面。本系列文章我将总结所学到的react相关知识，如果你也正在学或想巩固React，我相信这系列文章会对你有很大帮助。

【从零开始学 React | 第一章】React 基础与 JSX 核心语法

一：React简介

什么是React:

React 是用于构建用户界面的 JavaScript 库，核心是以组件化和虚拟 DOM高效开发可复用、响应式的页面。

优点：

相较于传统 DOM 开发，React 以组件化方式实现了不错的性能；相较于其他前端框架，它还拥有丰富的生态和跨平台支持。

搭建开发环境：

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

执行命令：

npx create-react-app react-basic

npx：Node.js 工具命令，用于查找并执行后续的包命令。

（核心包）create-react-app：用于创建 React 项目（固定写法）。

（项目名）react-basic：React 项目名称，支持自定义。

当你看见这个页面，就说明你成功啦

二：JSX

1.什么是JSX

JSX 是 JavaScript 的语法扩展，允许在 JS 代码中直接编写类似 HTML 的结构，最终会被编译为 React 元素。

javascript 复制代码

const message = 'this is message'
function App () {
  return (
    <div>
      <h1>this is title</h1>
      {message}
    </div>
  )
}

优势：

1.HTML的声明式模版写法，

2.JS的可编程能力

本质：

JSX 并不是标准的 JS 语法，它是 JS 的语法扩展，浏览器本身不能识别，需要通过解析工具（BABEL）做解析之后才能在浏览器中运行。

2.JSX中使用JS表达式

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

1.使用引号传递字符串

2.使用 JavaScript 变量

3.函数调用和方法调用

4.使用 JavaScript 对象

javascript 复制代码

const count = 100

function getName () {
  return 'jack'
}

function App () {
  return (
    <div className="App">
      this is App
      {/* 使用引号传递字符串 */}
      {'this is message'}
      {/* 识别js变量 */}
      {count}
      {/* 函数调用 */}
      {getName()}
      {/* 方法调用 */}
      {new Date().getDate()}
      {/* 使用js对象 */}
      <div style={{ color: 'red' }}>this is div</div>
    </div>
  )
}

export default App

3.JSX中使用列表渲染

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

javascript 复制代码

const list = [
  { id: 1001, name: 'Vue' },
  { id: 1002, name: 'React' },
  { id: 1003, name: 'Angular' }
]

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

4.JSX中实现基础条件渲染

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

javascript 复制代码

const isLogin = true

function App () {
  return (
    <div className="App">
      {/* 逻辑与 && */}
      {isLogin && <span>this is span</span>}
      {/* 三元运算 */}
      {isLogin ? <span>jack</span> : <span>loading...</span>}
    </div>
  )
}

export default App

5.JSX中实现复杂条件渲染

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

javascript 复制代码

// 定义文章类型
const articleType = 3  // 0 1 3

// 定义核心函数（根据文章类型返回不同的JSX模版）

function getArticleTem () {
  if (articleType === 0) {
    return <div>我是无图文章</div>
  } else if (articleType === 1) {
    return <div>我是单图模式</div>
  } else {
    return <div>我是三图模式</div>
  }
}

function App () {
  return (
    <div className="App">
      {/* 调用函数渲染不同的模版 */}
      {getArticleTem()}
    </div>
  )
}

export default App

三：React基础事件绑定

语法：on + 事件名 = {事件处理程序}

javascript 复制代码

function App () {
  // 基础绑定
  // const handleClick = () => {
  //   console.log('button被点击了')
  // }

  // 事件参数e
  // const handleClick = (e) => {
  //   console.log('button被点击了', e)
  // }

  // 传递自定义参数
  // const handleClick = (name) => {
  //   console.log('button被点击了', name)
  // }

  // 既要传递自定义参数 而且还要事件对象e
  const handleClick = (name, e) => {
    console.log('button被点击了', name, e)
  }
  return (
    <div className="App">
      <button onClick={(e) => handleClick('jack', e)}>click me </button>
    </div>
  )
}

export default App

四：React组件基本使用

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

javascript 复制代码

// 1. 定义组件

const Button = () => {
  // 业务逻辑组件逻辑
  return <button>click me!</button>
}

function App() {
  return (
    <div className="App">
      {/* 2. 使用组件（渲染组件） */}
      {/* 自闭和 */}
      <Button />
      {/* 成对标签 */}
      <Button></Button>
    </div>
  )
}

export default App

最后：

如果我的内容对你有帮助，请点赞，评论，收藏，创作不易。大家的支持就是我坚持下去的动力！