如何使用 Node.js 和 React 构建现代化的 Web 应用-JavaScript中文网-JavaScript教程资源分享门户

如何使用 Node.js 和 React 构建现代化的 Web 应用

什么是 Node.js 和 React？

Node.js 是一个基于 V8 引擎的 JavaScript 运行时环境，允许开发者使用 JavaScript 构建后端应用程序。它可以在服务器端运行 JavaScript 脚本，提供了强大的功能和丰富的库支持，可以用于构建各种后端应用程序，例如 Web 服务器、API、微服务、实时应用程序等。

React 是由 Facebook 开发的一个开源 JavaScript 库，用于构建用户界面。它采用组件化的思想，允许开发者将 UI 拆分成可重用的组件，提高了代码的可维护性和复用性。React 的核心是虚拟 DOM，通过对虚拟 DOM 的异步更新和比较，实现了高效的渲染和重绘，提高了应用程序的性能。

使用 Node.js 和 React 构建 Web 应用的好处

使用 Node.js 和 React 可以带来很多好处，包括：

语言一致性：使用 JavaScript 开发 Web 应用程序可以保持前后端开发语言的一致性，降低开发成本和学习成本。
可扩展性：通过组件化的思想和模块化的技术，可以轻松地扩展和维护应用程序，使其更具灵活性和可扩展性。
高效性能：React 的虚拟 DOM 机制可以提高应用程序的渲染和重绘速度，提高用户体验和应用程序的性能。
生态丰富：Node.js 和 React 都是非常流行的技术栈，有非常丰富的社区资源和第三方库支持，可以帮助开发者更快地构建应用程序。

如何使用 Node.js 和 React 构建 Web 应用

下面我们将讲解如何使用 Node.js 和 React 构建现代化的 Web 应用程序，包括以下步骤：

安装 Node.js 和 React
初始化项目并安装依赖
编写后端代码
编写前端代码
运行应用程序

步骤一：安装 Node.js 和 React

首先需要安装 Node.js 和 React。Node.js 的官方网站提供了安装程序，可以在 https://nodejs.org/en/ 下载适合自己系统的安装程序。建议下载 LTS 版本的 Node.js，因为 LTS 版本是长期支持版本，更稳定和可靠。

React 可以直接通过 npm 安装，打开命令行终端，执行以下命令即可：

npm install react react-dom

步骤二：初始化项目并安装依赖

接下来需要初始化项目，执行以下命令：

npm init -y

这将创建一个 package.json 文件，其中包含项目的基本信息和依赖列表。

然后需要安装一些必要的依赖，包括 express 和 nodemon：

npm install express nodemon body-parser cors

其中，express 是一个流行的 Web 服务器框架，可以方便地创建 HTTP 服务器和处理 HTTP 请求和响应；nodemon 是一个监视代码修改并自动重启 Node.js 应用程序的工具；body-parser 是一个解析 HTTP 请求体的中间件，用于从 HTTP 请求中提取参数；cors 是一个解决跨域问题的中间件，用于设置 HTTP 响应头避免跨域限制。

然后安装一些开发时依赖，包括 webpack 和 babel：

npm install webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react html-webpack-plugin style-loader css-loader

其中，webpack 是一个流行的 JavaScript 模块打包器，用于打包和编译 JavaScript 代码；babel 是一个 JavaScript 编译工具，用于将 ES6+ 的 JavaScript 代码转换成浏览器兼容的 ES5 代码；html-webpack-plugin 是一个 webpack 插件，用于生成 HTML 文件并插入打包后的 JavaScript 代码；style-loader 和 css-loader 是 webpack 的两个加载器，用于加载和处理 CSS 文件。

步骤三：编写后端代码

接下来可以开始编写后端代码了，首先创建一个 index.js 文件，用于设置 HTTP 服务器和路由，示例代码如下：

// www.javascriptcn.com code example
const express = require('express')
const bodyParser = require('body-parser')
const cors = require('cors')

const app = express()

app.use(bodyParser.json())
app.use(cors())

const users = []

app.get('/users', (req, res) => {
  res.json(users)
})

app.post('/users', (req, res) => {
  const { name, email } = req.body
  const user = { name, email }
  users.push(user)
  res.json(user)
})

const port = process.env.PORT || 8080

app.listen(port, () => {
  console.log(`Server is running on port ${port}`)
})

这段代码使用 express 和其他三个依赖包创建了一个 HTTP 服务器，并定义了两个路由：GET /users 和 POST /users。 GET /users 路由返回 users 数组，而 POST /users 路由将请求体中的 name 和 email 参数添加到 users 数组中，并返回新的用户信息。

步骤四：编写前端代码

接下来需要编写前端代码，使用 React 和 webpack 创建一个简单的网页，可以通过用户界面添加和显示用户信息。首先创建一个 index.html 文件，示例代码如下：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>React App</title>
</head>
<body>
  <div id="app"></div>
  <script src="bundle.js"></script>
</body>
</html>

这段代码包含了一个 div 元素和一个 script 元素，用于渲染 React 组件和加载打包后的 JavaScript 代码。

然后创建一个 app.js 文件，使用 React 和 ES6 编写一个简单的用户管理组件，示例代码如下：

// www.javascriptcn.com code example
import React, { useState, useEffect } from 'react'
import ReactDOM from 'react-dom'

const App = () => {
  const [users, setUsers] = useState([])
  const [name, setName] = useState('')
  const [email, setEmail] = useState('')

  useEffect(() => {
    fetch('http://localhost:8080/users')
      .then(res => res.json())
      .then(data => setUsers(data))
      .catch(err => console.error(err))
  }, [])

  const handleSubmit = e => {
    e.preventDefault()

    fetch('http://localhost:8080/users', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ name, email })
    })
      .then(res => res.json())
      .then(data => {
        setUsers([...users, data])
        setName('')
        setEmail('')
      })
      .catch(err => console.error(err))
  }

  return (
    <div>
      <h1>User Manager</h1>
      <form onSubmit={handleSubmit}>
        <input type="text" value={name} onChange={e => setName(e.target.value)} placeholder="Name" required />
        <input type="email" value={email} onChange={e => setEmail(e.target.value)} placeholder="Email" required />
        <button type="submit">Add User</button>
      </form>
      <hr />
      <ul>
        {users.map((user, i) => (
          <li key={i}>
            <strong>{user.name}</strong> ({user.email})
          </li>
        ))}
      </ul>
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('app'))

这段代码使用 useState 和 useEffect 两种 React Hook，并包含了一个简单的表单和一个用户列表。需要注意的是，这里使用了 fetch 函数来发起 HTTP 请求获取和提交用户数据，可以使用其他的 AJAX 库或者 axios 等库代替。

然后创建一个 webpack.config.js 文件，用于设置 webpack 打包和编译前端代码，示例代码如下：

// www.javascriptcn.com code example
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')

module.exports = {
  mode: 'development',
  entry: './app.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html'
    })
  ],
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000
  }
}

这份配置文件定义了入口文件、输出文件、模块加载器和插件列表，并设置了开发服务器的属性，例如监听的端口、编译输出路径等。

步骤五：运行应用程序

最后，可以将文件和依赖编译和打包，并启动 Node.js 服务器和 webpack 开发服务器，运行以下命令：

npm run dev

这个命令使用 nodemon 和 webpack-dev-server 作为后端服务器和前端服务器，并自动监视文件修改和重新编译。如果一切正常，打开浏览器，访问 http://localhost:9000 即可看到一个简单的用户管理界面，可以提交和显示用户信息。

结束语

使用 Node.js 和 React 可以构建现代化的 Web 应用程序，具有很多好处。本文介绍了如何使用 Node.js 和 React 构建 Web 应用程序的基本步骤，包括初始化环境、编写后端代码、编写前端代码和运行应用程序等。希望这篇文章可以帮助读者快速学会使用 Node.js 和 React 构建自己的 Web 应用程序，扩展和深入学习可以参考相关的官方文档和社区资源。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d76c34a941bf7134d55d4f

如何使用 Node.js 和 React 构建现代化的 Web 应用