使用 React 和 Express 创建 Web 应用程序的过程是什么？

Question

背景

我制作 conlang（构造语言）已经有一段时间了。我一直使用 JSON 文件来存储单词并使用 Python 文件来检索它来管理它。现在，我想扩展它。由于该语言是为我和我的朋友设计的，所以我想制作一个具有身份验证系统的网络应用程序，一旦您进行身份验证，您就可以访问单词等。用户被分为两个不同的类别：成员（读）、管理员（写）。在我的最初计划中，我计划使用 Render 部署（最初计划的）使用（最初）Amazon DynamoDB 的 Python/PHP 网站。现在，在AI推荐我之后，我已经改用JS和Firebase了。

问题

我对动态网站（之前只做过静态网站）和数据库没有经验。人工智能也给了我复杂的答案，我不知道从哪里开始。正如标题所说，我计划使用 React 作为前端，使用 ExpressJS 作为后端。问题是我不知道如何开始。

我有多个问题，例如：

1. React 和 Express 项目是分开的吗？
2. 如果是这样，我应该使用不同的存储库吗？
3. AI 要求我初始化一个 React 项目 (

   npx create-react-app

   )（我已经有了），现在当我询问后端时，它要求我在 Express 中创建 另一个 项目。我现在该怎么办？
4. 关于这个用例，我还需要后端吗？
5. 有比 Firebase 和 Render 更好的平台吗？

简而言之，我是 JS Web 应用程序开发的完全初学者。

如果您需要任何信息，请随时询问。

资讯

代码编辑器：VSCode

人工智能：双子座（谷歌）

当前文件目录：

node_modules/
... a lot of packages
public/
... stuff (probably not related)
src/
... App.css
... App.js
... App.test.js
... index.css
... index.js
... logo.svg
... reportWebVitals.js
... setupTests.js
.env
.gitignore
package-lock.json
package.json
README.md

index.js

代码：

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { initializeApp } from 'firebase/app';
import { getDatabase } from 'firebase/database';

const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: [a link but stackoverflow doesnt allow link shorterners]
reportWebVitals();

提前致谢，

充满活力

Answer 1

让我们看看，首先是的，React 和express 是不同的，React 是针对你的前端（用户界面），express 是用于构建服务器（后端）的NodeJs 框架，你应该先安装NodeJs，这个将附带 npm，推荐用于安装依赖项，现在为了部署，您应该将前端和后端分开存储库，推荐。

拥有 NodeJs 后，您可以为 BackEnd 创建文件夹并打开终端，使用 cd 命令进入该文件夹（例如，如果您打开终端并且您在用户中，您应该 cd Desktop 或 cd Documents，然后 cd BackEnd 假设文件夹是这样调用的）并输入 npm init ，这将创建一个带有 package.json 的项目，在 Visual Studio Code 中打开该文件夹并在里面打开一个终端，您可以开始安装依赖项，例如 npm express nodemon cors ，之间您需要的其他依赖项，然后您可以创建一个 index.js 文件并启动您的服务器（检查快速文档很容易），前面类似但更简单，只需要使用 create React app 命令或使用 vite 或任何其他 webpack喜欢。之后你就可以开始编码了，你需要学习 React 以及如何使用它。

我可以更深入，但你很难理解我，我只是想指导你通过这些步骤，让你知道如何开始，如果你需要任何具体帮助，请告诉我。