【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系列

相关推荐
Myli_ing5 分钟前
HTML的自动定义倒计时,这个配色存一下
前端·javascript·html
dr李四维22 分钟前
iOS构建版本以及Hbuilder打iOS的ipa包全流程
前端·笔记·ios·产品运营·产品经理·xcode
I_Am_Me_36 分钟前
【JavaEE进阶】 JavaScript
开发语言·javascript·ecmascript
雯0609~43 分钟前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存
℘团子এ1 小时前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z1 小时前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
前端百草阁1 小时前
【TS简单上手,快速入门教程】————适合零基础
javascript·typescript
彭世瑜1 小时前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund4041 小时前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish1 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue