likes
comments
collection
share

React搭建简易温度转换应用

作者站长头像
站长
· 阅读数 50

一、前言：React，新时代的前端开发神器

在前端开发的世界里，React 的出现无疑是一场革命。它不仅简化了复杂的 DOM 操作，还引入了组件化的思想，让开发者能够像搭积木一样构建复杂应用。如今，无论是大厂如Facebook、Netflix，还是初创企业，React 已经成为了构建用户界面的首选框架。那么，React 到底为什么这么受欢迎？🧐让我们一起探索 React 的奥秘，从零开始，一步步搭建我们的第一个 React 应用。

1、为什么是 React？

在 React 出现之前，前端开发往往需要直接操作 DOM，这不仅效率低下，而且容易引发性能问题。React 的到来，通过虚拟 DOM 和组件化设计，让前端开发变得更加高效、优雅。更重要的是，React 提供了一套完整的生态系统，包括工具链、社区资源以及最佳实践，这使得开发者能够快速上手，构建出高质量的 Web 应用。

2、JSX 与 Virtual DOM

JSX 是 React 中的一种语法扩展，它允许我们像写 HTML 一样编写 React 组件。然而，React 并不直接操作实际的 DOM，而是维护一个虚拟 DOM，当组件状态发生变化时，React 会比较虚拟 DOM 与实际 DOM 的差异，仅更新变化的部分，从而提高应用的性能。

3、性能优化与代码分割

为了进一步提升应用性能，React 提供了代码分割和懒加载技术，允许我们将应用拆分成多个小块，只在需要时加载，从而减少初始加载时间，提供更好的用户体验。

二、搭建 React 开发环境

1、安装 Node.js 和 npm

一切从安装 Node.js 开始。Node.js 是一个基于V8 引擎的 JavaScript 运行环境，它允许我们在服务器端运行 JavaScript。而 npm则是 Node.js 的默认包管理器，用于安装和管理各种 Node.js 模块和工具。

访问 Node.js 官方网站 下载并安装适合你的操作系统的 Node.js 版本。安装完成后，打开命令行工具，输入 node -v 和 npm -v 分别检查 Node.js 和 npm 是否成功安装。

2、使用 Create React App 快速搭建项目

Create React App 是 Facebook 提供的一个用于创建 React 单页应用的脚手架工具，它可以帮助我们快速搭建起一个完整的 React 项目，而无需过多关注配置细节。

在命令行中运行以下命令：

npm create-react-app my-app
cd my-app
npm start

这将创建一个名为 my-app 的 React 项目，并自动启动开发服务器。打开给出的端口，你将看到一个简单的欢迎页面，到时候内容可以随意更改。

React搭建简易温度转换应用

三、理解 React 项目结构

在创建的 my-app 目录下，你会看到以下主要文件和目录：

public：存放静态资源，如 HTML 文件和 favicon。

src：项目的主要源代码目录，包含组件、样式和脚本。

  • index.js：项目的入口文件，负责渲染 App 组件到页面。
  • App.js：应用程序的根组件，是整个应用的起点。
  • index.css：全局样式文件。

.gitignore：Git 版本控制的忽略文件列表。

package.json：项目依赖和脚本配置文件。

四、构建一个经典React应用

为了深入理解React的类组件和状态管理，我们将创建一个简单的应用，它由两个组件构成：TemperatureInput 和 TemperatureConverter。TemperatureInput 将接收用户输入的温度，而 TemperatureConverter 负责展示转换后的温度。

1、创建React项目

首先，确保你已经安装了Node.js和npm。然后，使用Create React App来创建一个新的React项目：

npm create-react-app temperature-converter
cd temperature-converter

2、编写TemperatureInput组件

在src目录下，创建TemperatureInput.js文件：

import React from 'react';

class TemperatureInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      temperature: ''
    };
  }

  handleChange = (e) => {
    this.setState({ temperature: e.target.value });
    this.props.onTemperatureChange(e.target.value);
  }

  render() {
    const scale = this.props.scale;
    const temperature = this.state.temperature;

    return (
      <fieldset>
        <legend>Enter temperature in {scale}:</legend>
        <input 
          value={temperature}
          onChange={this.handleChange}
        />
      </fieldset>
    );
  }
}

export default TemperatureInput;
  1. 导入React库

import React from 'react';：这是React导入语句，用于引入React库。

  1. 定义类组件TemperatureInput

使用class TemperatureInput extends React.Component定义了一个继承自React.Component的类组件。

在构造函数constructor中初始化组件的状态（state），其中temperature表示输入框当前的值。

  1. 状态管理

this.state = { temperature: '' };：初始化状态，temperature默认为空字符串。

  1. 事件处理函数handleChange

当输入框内容改变时触发，更新组件状态并调用父组件传入的onTemperatureChange函数，将新输入的温度值传递给父组件。

  1. 渲染方法render

渲染一个fieldset元素，包含一个legend元素和一个input元素。

input元素的value属性绑定到组件状态中的temperature，实现了受控组件的模式，确保输入框的值与组件状态保持一致。

onChange事件监听器绑定到handleChange方法，确保当输入框内容改变时能够更新状态并通知父组件。

  1. 使用props

this.props.scale：从父组件接收scale属性，用于显示温度单位（如Celsius或Fahrenheit）。

this.props.onTemperatureChange：从父组件接收的回调函数，用于在温度值改变时通知父组件。

  1. 导出组件

export default TemperatureInput;：将TemperatureInput组件作为模块的默认导出，可以在其他文件中通过import语句导入使用。

3、编写TemperatureConverter组件

接下来，创建TemperatureConverter.js文件：

import React from 'react';
import TemperatureInput from './TemperatureInput';

class TemperatureConverter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      temperature: '',
      scale: 'c'
    };
  }

  handleCelsiusChange = (temperature) => {
    this.setState({ temperature, scale: 'c' });
  }

  handleFahrenheitChange = (temperature) => {
    this.setState({ temperature, scale: 'f' });
  }

  render() {
    const { temperature, scale } = this.state;

    return (
      <div>
        <TemperatureInput
          scale="c"
          onTemperatureChange={this.handleCelsiusChange}
        />
        <TemperatureInput
          scale="f"
          onTemperatureChange={this.handleFahrenheitChange}
        />
        <p>
          {scale === 'c' ? `${temperature}°C is ${this.convertCtoF(temperature)}°F` : `${temperature}°F is ${this.convertFtoC(temperature)}°C`}
        </p>
      </div>
    );
  }

  convertCtoF = (celsius) => {
    return (celsius * 9) / 5 + 32;
  }

  convertFtoC = (fahrenheit) => {
    return ((fahrenheit - 32) * 5) / 9;
  }
}

export default TemperatureConverter;
  1. 导入必要的模块

import React from 'react';：导入React库。

import TemperatureInput from './TemperatureInput';：导入之前分析过的TemperatureInput组件，用于输入温度。

  1. 组件初始化

定义组件的初始状态，包括temperature（温度）和scale（温度单位，初始化为摄氏度）。

  1. 事件处理函数

handleCelsiusChange和handleFahrenheitChange分别处理摄氏度和华氏度输入变化的事件，更新组件状态。

  1. 渲染方法render

渲染两个TemperatureInput组件，一个用于摄氏度输入，另一个用于华氏度输入。每个组件都通过props传递相应的温度单位和事件处理函数。

渲染一个<p>标签，显示当前选中的温度单位及转换后的温度值。

  1. 温度转换函数

convertCtoF用于将摄氏度转换为华氏度。 convertFtoC用于将华氏度转换为摄氏度。

  1. 导出组件

export default TemperatureConverter;：导出TemperatureConverter组件，以便在其他模块中使用。

五、组件工作流程：

  • 用户在任意一个TemperatureInput组件中输入温度。
  • 输入变化时，对应的事件处理函数被调用，更新组件状态。
  • 根据当前选择的温度单位（由scale状态决定），render方法中的<p>标签显示转换后的温度值。

1、修改App组件

最后，编辑src/App.js文件，引入并使用TemperatureConverter组件：

1import React from 'react';
2import TemperatureConverter from './TemperatureConverter';
3import './App.css';
4
5function App() {
6  return (
7    <div className="App">
8      <TemperatureConverter />
9    </div>
10  );
11}
12
13export default App;

当运行此React应用程序时，App组件将被加载并渲染。它首先会创建一个带有类名App的<div>元素，然后在这个元素内部渲染TemperatureConverter组件。TemperatureConverter组件负责提供用户界面，让用户输入温度并进行摄氏度与华氏度之间的转换。

看到这就抓紧去试试这个简单有用的React小demo吧。

六、总结：

React 提供了一套完整且强大的工具集，帮助开发者构建高效、可维护的 Web 应用。通过掌握 React 的基本原理和实践技巧，可以轻松应对复杂多变的前端开发需求。所以大家都学起来吧，一起加油。💡

转载自:https://juejin.cn/post/7388022210856321036
评论
请登录