🧐React小白自学指南---基础篇，第2篇《JSX语法和组件》上篇

多动症男孩
497 阅读8分钟

前言

React已经成为现代Web开发的热门前端框架之一，越来越多的开发者加入React社区的队伍。但是对于初学者来说，学习一个新的技术框架可能会感到有些困难，特别是如果在没有指导和明确的学习计划的情况下自学。本系列技术博客将为初学者们提供一份指南，通过一系列教程逐步深入地探索React，从最基础的概念讲解到框架的进阶应用，后续还会通过实际项目来加强巩固学习的成果，如果你想学习React，这个系列将无疑是一个很好的起点，让我们开始吧！！！！

如果想和更多的小伙伴交流讨论也可以在联系我😘，我们有一个专门的完全免费的交流群！！！


🥰本篇涉及部分

《JSX语法和组件》一共包含六个部分如下：

  1. JSX语法讲解
  2. Class组件
  3. 函数式组件
  4. 组建的样式
  5. 事件处理
  6. Ref的应用

！！！上篇将详细讲解前 3 部分，下篇将详细讲解后 3 部分，这样做也是为了方便小白的学习，减少每次的学习量，便于理解消化😋。


🔑正文

一、JSX语法讲解

1. JSX的作用

JSX 将 HTML 语法直接加入到 JavaScript 代码中，再通过翻译器转换到纯 JavaScript 后由浏览器执行。在实际开发中，JSX 在产品打包阶段都已经编译成纯 JavaScript，不会带来任何副作用，反而会让代码更加直观并易于维护。 编译过程由Babel 的 JSX 编译器实现！！！

😋小白提示： JSX是指一种特殊语法，你可以理解为满足 JS + Xml 格式的结合体！！！

2. JSX的原理

对待事物我们要知其然，更要知其所以然。所以下面简单的讲解一下JSX的原理！

这是一个标准的HTML写法，观察其DOM结构：

<div class='app' id='appRoot'>
<h1 class='title'>欢迎进入React的世界</h1>
<p>
React.js 是一个强大的前端框架，学习它非常值得！！！
</p>
</div>

上面这个 HTML 所有的信息我们都可以用 JavaScript 的形式来表示：

{
  tag: 'div',
  attrs: { className: 'app', id: 'appRoot'},
  children: [
    {
      tag: 'h1',
      attrs: { className: 'title' },
      children: ['欢迎进入React的世界']
    },
    {
      tag: 'p',
      attrs: null,
      children: ['React.js 是一个强大的前端框架，学习它非常值得！！！']
    }
  ]
}

但是你会发现我们的初衷是为了以一种更加直观、方便和简介的方式去表示HTML，如果直接使用JavaScript 的方式，好像并没有满足我们的初衷，反而使得代码更加臃肿，所以为了解决这一办法，React.js 就把 JavaScript 的语法扩展了一下，让 JavaScript 语言能够支持这种直接在 JavaScript 代码里面编写类似 HTML 标签结构的语法，这样写起来就方便很多了。编译的过程会把类似 HTML 的 JSX结构转换成 JavaScript 的对象结构，因此 **JSX ** 应运而生（哒哒）！！！

JSX以一种更加符合直觉和保证代码简洁度，以及可读性的格式来表示HTML(即表示DOM结构)，然后再通过翻译器（Babe）转换到纯 JavaScript 后由浏览器执行 (原理是不是很简单，并没有你想象得那么难以理解🤩！！！)


3. JSX语法的格式
ReactDOM.render(
    <h1>欢迎进入React的世界</h1>,
    document.getElementById('root')
)

有没有一种熟悉感，就是我们第一篇里面自己亲生所写的第一个React程序，JSX语法就是这种可以直接在喧染函数中（render)书写HTML代码的并被喧染的格式（惊喜吧😊）！！！

😋小白提示： 一句话来说，render函数的作用就是渲染出我们在浏览其中所看到的画面！！！


二、Class组件

这里既然说到了组件，就不得不讲解一下我们为什么要使用组件以及组件的由来 🤔？

古早以前的前端人员，书写前端代码还是将HTML + JS + CSS这三部分分开书写，作为三个泾渭分明的部分！！！

很长一段时间大家都是这样书写代码，没有觉得不妥，但是当项目越来越大的时候，问题就出现，这时会有许多相同的代码会被复用，所以这时候大家只能从HTML 、JS 、 CSS这三部分分别复制文件，🤔这工程量就大了起来，所以大家就想能不能将这三部分合为一体使用，于是组件应运而生（哒哒）

1. 什么是Class组件

class 组件是使用 ES6 class 语法定义的 React 组件类型，继承自 React.Component 类，可以定义状态和属性，所以class本身就JavaScript 支持的一种语法！！！

😋小白提示： ES6是JavaScript 语言的一个版本，虽然它并不是最新的版本，但仍目前使用最广泛、最多一个版本！


2. 如何编写自己的第一个Calss组件

学过本系列第一篇的同学应该都停留在src/index.js文件这步，接下来我们接着这步继续往下走。

  1. 首先在src目录下新建一个components文件夹（用来存放组件文件），并在该目录下新建class_comp.js文件（class组件）

  2. 在class_comp.js文件下书写如下代码：

    import React from "react";

// 自定义一个名为App1的Class组件
class App1 extends React.Component {
    render() {
        return (
            <h1>这是我的第一个Class组件</h1>
        )
    }
}

// 向外共享这个组件
export default App1;

😋小白提示：

  • 这段代码定义了一个名为 App1 的 Class 组件，并将其导出（export）以便在其他文件中使用。在组件的定义中，我们继承自 React.Component 类，并实现了 render() 方法，用于返回组件的 UI 布局。

  • 这里再贴心的提示一些，自定义组件本质上就是一个js文件，这样做的目的也就是为了上文所说的高可复用性！


  1. 在index.js文件下书写如下代码： 
    import React from "react";
import ReactDOM from "react-dom";

// 引入我的第一个Class组件
import App1 from "./components/class_component";

ReactDOM.render(<App1/>,document.getElementById('root'))

😋小白提示：

  • 这段代码我们使用 import 语句将 App1 组件导入，并使用 ReactDOM.render() 方法将其渲染到页面的 root 元素中。

  • 注意！注意！注意！组件名首字母必须大写（即App1），否则报错，这是React语法要求。


  1. 在终端中运行命令npm start启动本项目，如图所示：

18772bba1a22180df0fd3da45de42661.png

😋小白提示：

  • 使用npm start 启动命令时终端显示路径一定要在项目的根目录上
  • 出现如下代码表示项目启动成功， 这是候一般会在浏览器上自动打开这个项目，没有的话可以按住Ctrl键，点击Local 后面的网址，来手动打开

27830717a7a7052c62a9f99d224478fa.png

三、函数式组件


1. 什么是函数式组件

函数式组件是 React 中的一种轻量级组件类型，适用于渲染静态 UI 元素或简单的功能性组件。简单来说，本质上就是一个函数，然后返回了一个HTML

的结构，所以大家不要慌张，函数式组件其实非常简单，代码书写上也比Class组件看起来更加简洁


2. 如何编写自己的第一个Calss组件
  1. 同上面的的《如何编写自己的第一个Calss组件》部分类似，在components目录下新建function_comp.js文件（函数式组件）
  2. 在function_comp.js文件下书写如下代码： 
    function App2() {
    return (
        <h1>这是我的第一个Function组件</h1>
    )
}

// 向外共享这个组件
export default App2

😋小白提示：

  • 这段代码定义了一个名为 App2 的 函数式组件，并将其导出（export）以便在其他文件中使用。在组件的定义中，使用一个函数来表示，并使用函数的方式利用return方法返回了组件的 UI 布局。


  1. 在index.js文件下书写如下代码： 
    ReactDOM.renderimport React from "react";
import ReactDOM from "react-dom";

// 引入我的第一个Function组件
import App2 from "./components/function_comp";

ReactDOM.render(<App2/>, document.getElementById('root'))

😋小白提示：

  • 这段代码我们使用 import 语句将 App2 组件导入，并使用 ReactDOM.render() 方法将其渲染到页面的 root 元素中。

  • 注意！注意！注意！组件名首字母必须大写（即App1），否则报错，这是React语法要求。


  1. 启动项目同上文《如何编写自己的第一个Calss组件》一样，参照既可

四、合并

实际项目代码中，不会 index.js（入口文件中）只引入一个组件，而是多个组件，所以上面的两种组件类型所定义的组件，其实可以以统引入index.js文件中，使用ReactDOM.render() 方法去喧染到浏览器上！！！

合并代码如下图所示：（在index.js文件中修改，即可）

import React from "react";
import ReactDOM from "react-dom";

// 引入我的第一个Class组件
import App1 from "./components/class_component";

// 引入我的第一个Function组件
import App2 from "./components/function_comp";

ReactDOM.render([<App1/>, <App2/>],document.getElementById('root'))

😋小白提示：

  • ReactDOM.render([<App1/>, <App2/>],document.getElementById('root')) 这段代码中，第一个参数带入的形式是使用数组的方式，之前没讲过，这种方式可以传入多个组件，来进行喧染！！！

  • 修改完成后，保存文件，如果项目仍在运行其实是不需要再重启项目的，因为create-react-app其实自带热更新的效果，这时候浏览器的显示效果会自动刷新的，最后喧染效果如下：

6253c4dd30c31ee4aecf4155f5475e74.png

最后

以上就是 “🚀React小白自学指南---基础篇，第2篇《JSX语法和组件》上篇” 的全部内容，通过本文的学习，我们已经了解了 JSX 语法和组件的概念，掌握了如何在 React 中使用 JSX 创建元素，并将多个元素组合成组件，下篇 将会讲解 组建的样式、事件处理、Ref的应用，拭目以待吧！😎，最后我想说我会坚持持续更新下去，也希望大家可以给我 ”点赞、关注、评论“，这也是我持续下去的动力，**我是多动症男孩（ddboy），因为自己淋过雨，所以想给你们撑把伞的未来前端技术专家！！！

avatar
文章
阅读
粉丝