찾다

집  >  기사  >  웹 프론트엔드  >  React와 Express를 사용하여 풀스택 JavaScript 애플리케이션을 구축하는 방법

React와 Express를 사용하여 풀스택 JavaScript 애플리케이션을 구축하는 방법

PHPz
PHPz원래의
2023-09-26 13:09:031382검색

React와 Express를 사용하여 풀스택 JavaScript 애플리케이션을 구축하는 방법

React 및 Express를 사용하여 풀 스택 JavaScript 애플리케이션을 구축하는 방법

소개:
React 및 Express는 현재 각각 프런트엔드 및 백엔드 애플리케이션을 구축하는 데 사용되는 매우 인기 있는 JavaScript 프레임워크입니다. 이 기사에서는 React와 Express를 사용하여 풀 스택 JavaScript 애플리케이션을 구축하는 방법을 소개합니다. 간단한 TodoList 애플리케이션을 구축하는 방법을 단계별로 설명하고 구체적인 코드 예제를 제공합니다.

1. 준비
시작하기 전에 필요한 도구와 환경을 준비해야 합니다.

  1. Node.js 및 npm: Node.js 및 npm(Node.js 패키지 관리자)이 설치되어 있는지 확인하세요. 아래와 같이 명령줄을 통해 성공적으로 설치되었는지 확인할 수 있습니다. 

    node -v
npm -v
  2. 프로젝트 폴더 생성: 작업 디렉터리에 전체 스택 애플리케이션 코드를 저장할 새 폴더를 생성합니다.

2. 백엔드 설정

  1. 프로젝트 초기화: 프로젝트 폴더에서 명령줄을 열고 다음 명령을 실행하여 새 Node.js 프로젝트를 초기화합니다. 

    npm init -y

    이렇게 하면 기본 패키지가 생성됩니다. .json 파일은 프로젝트 관련 정보와 종속 패키지를 기록하는 데 사용됩니다. package.json文件，用来记录项目的相关信息和依赖包。

  2. 安装Express和其他依赖：在命令行中执行以下命令来安装Express和其他需要的依赖：

    npm install express body-parser cors --save

    这里我们安装了Express、body-parser和cors，用来处理HTTP请求和跨域请求。

  3. 创建Express服务器：在项目文件夹的根目录下创建一个新的JavaScript文件，命名为server.js。打开server.js，并添加以下内容：
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');

const app = express();

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(cors());

const PORT = process.env.PORT || 5000;

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

这段代码首先引入了需要的依赖包，然后创建了一个Express实例并设置了一些中间件。最后，我们监听指定的端口（默认是5000）。

  1. 添加路由和API：继续编辑server.js，在已有的代码下方添加以下内容：
let todos = [];

app.get('/api/todos', (req, res) => {
  res.json(todos);
});

app.post('/api/todos', (req, res) => {
  const { todo } = req.body;
  todos.push(todo);
  res.json(todos);
});

这段代码定义了两个路由：一个用于获取所有的todo项，一个用于添加新的todo项。我们使用一个简单的数组todos来存储所有的todo项。

  1. 启动服务器：在命令行中执行以下命令来启动Express服务器：

    node server.js

    如果一切正常，你将会在命令行中看到Server is running on port XXXX的提示，表示服务器已成功启动。

三、前端搭建

  1. 创建React应用：回到项目文件夹，在命令行中执行以下命令来创建一个新的React应用：

    npx create-react-app client

    这将会在项目文件夹下创建一个名为client的新文件夹，用来存放我们的React前端应用代码。

  2. 编辑React组件：打开刚刚创建的client/src/App.js文件，将其中的代码替换为以下内容：
import React, { useState, useEffect } from "react";

function App() {
  const [todos, setTodos] = useState([]);
  const [newTodo, setNewTodo] = useState("");

  useEffect(() => {
    fetch("/api/todos")
      .then(res => res.json())
      .then(data => setTodos(data));
  }, []);

  const handleInputChange = e => {
    setNewTodo(e.target.value);
  };

  const handleSubmit = e => {
    e.preventDefault();
    const todo = { todo: newTodo };

    fetch("/api/todos", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(todo)
    })
      .then(res => res.json())
      .then(data => setTodos(data))
      .catch(err => console.log(err));

    setNewTodo("");
  };

  return (
    <div>
      <h1>Todo List</h1>
      <form onSubmit={handleSubmit}>
        <input value={newTodo} onChange={handleInputChange} />
        <button type="submit">Add Todo</button>
      </form>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

这段代码定义了一个React函数组件App，它用来展示todo列表。组件中使用了useState和useEffect两个React的Hook来处理组件的状态和副作用。我们通过fetch函数来发送HTTP请求和获取数据。

  1. 启动React应用：在项目文件夹下打开命令行，进入client

    Express 및 기타 종속성 설치: 명령줄에서 다음 명령을 실행하여 Express 및 기타 필수 종속성을 설치합니다. 
    2. npm start
여기에서는 HTTP 요청 및 도메인 간 요청을 처리하기 위해 Express, body-parser 및 cors를 설치했습니다.


Express 서버 만들기: 프로젝트 폴더의 루트 디렉터리에 server.js라는 새 JavaScript 파일을 만듭니다. server.js를 열고 다음 콘텐츠를 추가하세요. 🎜🎜rrreee🎜이 코드는 먼저 필요한 종속성 패키지를 소개한 다음 Express 인스턴스를 만들고 일부 미들웨어를 설정합니다. 마지막으로 지정된 포트(기본값은 5000)에서 수신 대기합니다. 🎜
    🎜라우팅 및 API 추가: server.js를 계속 편집하고 기존 코드 아래에 다음 콘텐츠를 추가합니다. 🎜🎜rrreee🎜이 코드는 두 개의 경로를 정의합니다. 하나는 사용됩니다. 모든 할 일 항목을 가져오고 하나는 새 할 일 항목을 추가하는 데 사용됩니다. 우리는 모든 할일 항목을 저장하기 위해 간단한 배열 todos를 사용합니다. 🎜
      🎜🎜서버 시작: 명령줄에서 다음 명령을 실행하여 Express 서버를 시작합니다. 🎜rrreee🎜모든 것이 정상이면 명령줄에 Server가 표시됩니다. 포트 XXXX 프롬프트에서 실행 중이면 서버가 성공적으로 시작되었음을 나타냅니다. 🎜🎜🎜🎜3. 프런트 엔드 구성🎜🎜🎜🎜React 애플리케이션 생성: 프로젝트 폴더로 돌아가서 명령줄에서 다음 명령을 실행하여 새 React 애플리케이션을 생성합니다. 🎜rrreee🎜이렇게 하면 새로운 React가 생성됩니다. 프로젝트 폴더 아래의 애플리케이션 client라는 새 폴더는 React 프런트엔드 애플리케이션 코드를 저장하는 데 사용됩니다. 🎜🎜🎜React 구성 요소 편집: 방금 생성한 client/src/App.js 파일을 열고 그 안에 있는 코드를 다음 콘텐츠로 바꿉니다. 🎜🎜rrreee🎜이 코드는 React 함수 구성 요소를 정의합니다App, 할 일 목록을 표시하는 데 사용됩니다. 구성 요소는 두 개의 React Hooks인 useState 및 useEffect를 사용하여 구성 요소의 상태와 부작용을 처리합니다. fetch 함수를 사용하여 HTTP 요청을 보내고 데이터를 얻습니다. 🎜
        🎜🎜React 애플리케이션 시작: 프로젝트 폴더 아래의 명령줄을 열고 client 폴더를 입력한 후 다음 명령을 실행하여 React 개발 서버를 시작합니다. 🎜 rrreee🎜모든 것이 괜찮다면 브라우저에 간단한 TodoList 애플리케이션이 표시되고 새 할일 항목을 추가할 수 있습니다. 🎜🎜🎜🎜결론: 🎜이 기사의 단계를 통해 우리는 React와 Express를 함께 사용하여 간단한 풀 스택 JavaScript 애플리케이션을 성공적으로 구축했습니다. 편집 및 삭제 기능을 추가하거나 데이터베이스를 사용하여 데이터를 저장하는 등 필요에 따라 애플리케이션의 기능을 더욱 확장할 수 있습니다. 풀스택 개발을 통해 프론트엔드와 백엔드 기술의 장점을 동시에 최대한 활용하고 개발 효율성을 높일 수 있기를 바랍니다. 🎜

위 내용은 React와 Express를 사용하여 풀스택 JavaScript 애플리케이션을 구축하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript 中间件 json npm express 栈 JS 数据库 http
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：React와 AWS Lambda를 사용하여 서버리스 백엔드 애플리케이션을 구축하는 방법다음 기사：React와 AWS Lambda를 사용하여 서버리스 백엔드 애플리케이션을 구축하는 방법

관련 기사

더보기