【React系列一】初学 React:从 JSX 到组件运用

React 是一个流行的 JavaScript 库,用于构建用户界面。它提供了一种简洁而强大的方式来创建交互式 UI,同时也支持组件化开发,使得代码更易于维护和扩展。

本文和大家一起从头开始学习 React,从 JSX 到组件化开发,逐步深入了解 React 的核心概念和常用技巧。

创建React

  1. 安装 Node.js : 如果你还没有安装 Node.js,你需要先从官方网站 nodejs.org/ 下载并安装。Node.js 是运行 JavaScript 代码的环境,也是 React 应用程序的必备组件。

  2. 创建新的 React 应用程序 : 一旦安装了 Node.js,你就可以使用 create-react-app 命令来创建一个新的 React 应用程序。打开终端(命令行界面)并执行以下命令:

    lua 复制代码
    npx create-react-app my-app

    这将在名为 my-app 的新目录中创建一个新的 React 应用程序。你可以将 my-app 替换为你想要的任何应用程序名称。

  3. 进入应用程序目录: 进入你的新创建的应用程序目录:

    bash 复制代码
    cd my-app
  4. 启动开发服务器: 在应用程序目录中运行以下命令,启动开发服务器:

    sql 复制代码
    npm start

    这将启动一个开发服务器,并在默认的浏览器中打开你的新应用程序。你将能够在开发过程中实时查看应用程序的变化。

JSX

JSX 是 React 的一种语法扩展,它允许我们在 JavaScript 中编写类似 HTML 的代码。

在 JSX 中,你可以使用大括号 {} 来嵌入 JavaScript 表达式,实现动态渲染和逻辑控制

JSX 使用

  1. 引号传递字符串:可以直接在 JSX 中传递字符串,用双引号或单引号括起来。
ini 复制代码
const element = <h1>Hello, React!</h1>;
  1. 使用 JavaScript 变量:可以在 JSX 中使用 JavaScript 变量。

以下是一个示例,演示如何在组件中使用 JavaScript 变量:

javascript 复制代码
import React from 'react';

function App() {
    const greeting = 'hello React'; // 定义一个 JavaScript 变量 greeting

    return (
        <div className="app">
            <h2>{greeting}</h2> {/* 在 JSX 表达式中使用 greeting 变量 */}
        </div>
    );
}

export default App;

在这个示例中,我定义了一个名为 greeting 的 JavaScript 变量,它包含了一个字符串 "hello React"。然后,我在 JSX 表达式中使用了这个变量,通过大括号 {} 将其包裹起来,以输出变量的值。这样,在渲染组件时,<h2> 标签中就会显示 "hello React"

  1. 函数调用和方法调用:可以在 JSX 中调用函数和对象的方法。
javascript 复制代码
function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: '张',
  lastName: '伟',
};

const element = <h1>Hello, {formatName(user)}!</h1>;
  1. 使用 JavaScript 对象 :可以在 JSX 中使用 JavaScript 对象,但需要用 {} 包裹起来。
javascript 复制代码
const user = {
  firstName: 'John',
  lastName: 'Doe',
};

const element = (
  <div>
    <h1>Hello, {user.firstName}!</h1>
    <h2>Your last name is {user.lastName}.</h2>
  </div>
);

列表渲染

在 React 中,可以使用 map 方法来渲染列表。在渲染列表时,需要确保给每个子元素设置一个唯一的 key 属性,以帮助 React 识别和管理列表中的每个元素。

javascript 复制代码
import React from 'react';

const songs = [
    { id: 1, name: "庐州月" },
    { id: 2, name: "青花瓷" },
    { id: 3, name: "等你下课" },
];

function App() {
    return (
        <div className="app">
            <h2>hello React</h2>
            <ul>
                {songs.map((item) => {
                    return <li key={item.id}>{item.name}</li>;
                })}
            </ul>
        </div>
    );
}

export default App;

这里遍历为什么不用 forEachmap呢?

在 React 中,通常使用 map 而不是 forEach 来遍历数组并渲染列表的原因是因为 map 方法有一个重要的特性:它会返回一个新的数组,其中包含了根据原始数组每个元素进行操作后的结果。

相比之下,forEach 方法只是用于遍历数组,它不会返回任何新的数组 ,也就是说它不会生成任何 JSX 元素。在 React 组件中,我们需要将数组的每个元素映射为一个或多个 JSX 元素,并将它们组合成一个列表。而 map 方法正是用于这个目的。

另外,map 方法可以更加简洁地编写代码,因为它可以直接返回 JSX 表达式,而不需要在外部声明一个空数组然后在内部使用 push 方法来添加元素。

条件渲染

在 JSX 中,我们不能直接在标签内使用传统的 JavaScript if 语句,因为 JSX 是 JavaScript 的一种扩展语法,而不是完全独立的模板语言。

但是可以使用逻辑与运算符 && 和三元表达式来实现条件渲染。

  1. 逻辑与运算符 && :当条件为真时,渲染某个元素。
javascript 复制代码
function App() {
    const flag = true;

    return (
        <div className="app">
            {flag && <h2>hello React</h2>}
        </div>
    );
}

export default App;

条件渲染部分使用了 flag && <h2>hello React</h2> 的形式,如果 flagtrue,则渲染 "hello React" 的 <h2> 元素,否则不渲染任何内容。

  1. 三元表达式适用于 1 对多:根据条件渲染不同的元素。
javascript 复制代码
function App() {
    const flag = true;

    return (
        <div className="app">
            <h2>{flag ? "react真好用" : "react不好用"}</h2>
        </div>
    );
}

export default App;

它根据变量 flag 的值来动态渲染标题内容,如果 flagtrue,则显示 "react真好用",否则显示 "react不好用"。

样式添加

在 React 中,有几种常见的方式可以为组件添加样式:

  1. 内联样式 :可以直接在 JSX 元素的 style 属性中以对象的形式添加样式。这种方式适用于需要动态计算样式的情况,但不太适合复杂的样式结构。

    javascript 复制代码
    function MyComponent() {
        const style = {
            color: 'red'
        };
    
        return <div style={style}>Hello World</div>;
    }

    也可以写成这种形式:

javascript 复制代码
    function MyComponent() {
        return <div style={{ color: 'red'}}>Hello World</div>;
    }
  1. CSS 文件 :可以在 React 项目中创建 .css 文件,并通过 import 引入到组件中。然后,将 CSS 类名应用到 JSX 元素的 className 属性中。

    javascript 复制代码
    // MyComponent.css
    .myComponent {
        color: red;
        background-color: blue;
    }
    
    // MyComponent.js
    import React from 'react';
    import './MyComponent.css';
    
    function MyComponent() {
        return <div className="myComponent">Hello World</div>;
    }

事件绑定

onClick 是 React 中用于处理点击事件的一种事件属性。它是一个内置的 JSX 属性,用于将点击事件处理函数绑定到特定的 JSX 元素上。

当用户点击绑定了 onClick 事件的元素时,React 将调用指定的事件处理函数。这个函数可以执行任何逻辑,例如更新组件的状态、发送网络请求、处理用户输入等操作。

下面是一个简单的示例,演示了如何在 React 中使用 onClick

javascript 复制代码
import React from 'react';

function MyComponent() {
  // 点击事件处理函数
  function handleClick() {
    console.log('按钮被点击了');
  }

  return (
    <button onClick={handleClick}>Click me</button>
  );
}

export default MyComponent;

在这个例子中,当用户点击按钮时,handleClick 函数会在控制台中输出消息 按钮被点击了

React组件

React 组件是构建用户界面的独立、可重用的代码单元。它们将 UI 分成独立的部分,每个部分负责一部分 UI 的呈现和交互。组件可以是函数组件或类组件。

函数组件

React 中的函数组件名称应以大写字母开头。这是为了区分 React 组件和普通的 HTML 元素或者其他 DOM 元素。

javascript 复制代码
function HelloReact() {
    return <div>这是一个函数组件</div>
}

function App() {


    return (
        <div className="app">
            <HelloReact></HelloReact> // 或者写成 <HelloReact />
        </div>
    );
}

export default App;

类组件

React 类组件是基于 ES6 类语法创建的组件,它们是 React 中最早引入的组件类型之一。类组件通过继承 React.Component 类来定义组件。

以下是一个简单的类组件示例:

javascript 复制代码
import React, { Component } from "react";

class HelloReact extends Component {
    render() {
        return <div>这是一个类组件</div>
    }
}

function App() {
    return (
        <div className="app">
            <HelloReact></HelloReact>
        </div>
    );
}

export default App;

这段代码与之前提供的代码相比,主要区别在于 HelloReact 组件是一个类组件而不是函数组件。类组件需要继承自 React.Component,并实现 render 方法来返回组件的 UI 结构。函数组件则是一个简单的函数,直接返回 UI 结构即可。

总结

通过学习以上内容,我们已经掌握了 React 的基础知识,包括 JSX 的使用、列表和条件渲染、事件绑定以及组件的创建。

Ps : 因为这是初步认识React,文章内容的代码相对来说比较简单,方便理解,后面还会继续更新React系列

相关推荐
zhougl99610 分钟前
html处理Base文件流
linux·前端·html
花花鱼14 分钟前
node-modules-inspector 可视化node_modules
前端·javascript·vue.js
HBR666_17 分钟前
marked库(高效将 Markdown 转换为 HTML 的利器)
前端·markdown
careybobo2 小时前
海康摄像头通过Web插件进行预览播放和控制
前端
TDengine (老段)2 小时前
TDengine 中的关联查询
大数据·javascript·网络·物联网·时序数据库·tdengine·iotdb
杉之3 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
喝拿铁写前端3 小时前
字段聚类,到底有什么用?——从系统混乱到结构认知的第一步
前端
再学一点就睡3 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript
木木黄木木4 小时前
html5炫酷图片悬停效果实现详解
前端·html·html5
请来次降维打击!!!5 小时前
优选算法系列(5.位运算)
java·前端·c++·算法