巧用React脚手架开发留言功能

2024-01-07 16:40:48

前言

在上一篇文章中，我们学习了如何使用原始的html加上CDN的方式引入React，并完成了留言功能的实现。在本篇文章中，我们将使用React提供的脚手架来完成同样的功能，从而进一步提升开发效率和代码的可维护性。

搭建开发环境

首先，我们需要安装Node.js和npm，这是React脚手架的依赖。您可以从Node.js官方网站下载并安装Node.js，也可以使用nvm等工具来管理Node.js版本。

接下来，我们需要安装React脚手架。您可以通过以下命令来安装：

npm install -g create-react-app

安装完成后，我们就可以创建一个新的React项目了。在命令行中，进入您想要创建项目的位置，然后执行以下命令：

create-react-app my-react-app

这将创建一个名为my-react-app的新项目。进入该项目目录，您会看到一个名为package.json的文件，这是项目的配置文件。

开发留言功能

现在，我们可以在项目中添加留言功能了。首先，我们需要在src目录下创建一个名为components的文件夹，然后在该文件夹下创建一个名为Message.js的文件。在Message.js文件中，我们将定义留言组件。

import React, { useState } from 'react';

const Message = () => {
  const [message, setMessage] = useState('');

  const handleChange = (event) => {
    setMessage(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();

    // 这里可以将留言发送到服务器，或者存储在本地数据库中

    setMessage('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={message} onChange={handleChange} />
      <button type="submit">发送</button>
    </form>
  );
};

export default Message;

在App.js文件中，我们将引入Message组件并将其渲染到页面上。

import React from 'react';
import Message from './components/Message';

const App = () => {
  return (
    <div>
      <h1>留言板</h1>
      <Message />
    </div>
  );
};

export default App;