用 React 和 NodeJS 创建一个全栈项目：从前端到后端

2023-11-06 09:09:46

前端：React

首先，我们需要安装 React。可以通过以下命令来安装：

npm install react react-dom

然后，我们需要创建一个 React 项目。可以通过以下命令来创建：

npx create-react-app my-app

这将创建一个名为 my-app 的 React 项目。

接下来，我们需要在项目中添加一些代码。首先，我们需要在 src 目录下创建一个名为 App.js 的文件。这个文件将作为我们的 React 组件。

import React from "react";

function App() {
  return (
    <div>
      <h1>Hello, world!</h1>
    </div>
  );
}

export default App;

然后，我们需要在 index.js 文件中导入 App.js 并将其渲染到 DOM 中。

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

现在，我们可以运行项目了。可以通过以下命令来运行：

npm start

这将启动一个开发服务器，并打开浏览器。你应该可以在浏览器中看到 "Hello, world!"。

后端：NodeJS

接下来，我们需要安装 NodeJS。可以通过以下命令来安装：

nvm install node

然后，我们需要创建一个 Node.js 项目。可以通过以下命令来创建：

mkdir my-app
cd my-app
npm init -y

这将创建一个名为 my-app 的 Node.js 项目。

接下来，我们需要在项目中添加一些代码。首先，我们需要在项目中安装 Express。Express 是一个 Node.js 的 web 框架。可以通过以下命令来安装：

npm install express

然后，我们需要在 app.js 文件中导入 Express 并创建一个 Express 应用。

const express = require("express");
const app = express();

接下来，我们需要让 Express 应用监听一个端口。可以通过以下代码来实现：

app.listen(3000, () => {
  console.log("Server is listening on port 3000");
});

现在，我们可以运行项目了。可以通过以下命令来运行：

node app.js

这将启动一个 Node.js 服务器，并监听 3000 端口。

前后端通信

现在，我们需要让 React 程序可以直接调用 Node API。我们可以使用 Axios 来实现。Axios 是一个用于发送 HTTP 请求的库。可以通过以下命令来安装：

npm install axios

然后，我们需要在 App.js 文件中导入 Axios。

import React from "react";
import Axios from "axios";

function App() {
  const [data, setData] = React.useState([]);

  React.useEffect(() => {
    Axios.get("http://localhost:3000/api/v1/data")
      .then((res) => {
        setData(res.data);
      })
      .catch((err) => {
        console.error(err);
      });
  }, []);

  return (
    <div>
      <h1>Data</h1>
      <ul>
        {data.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;