Express.js TypeScript와 React TypeScript 프로젝트 만들기

안녕하세요 👋🏼, vamos는 React TypeScript에서 Express.js를 TypeScript로 사용하기 위한 수식의 구성 요소입니다. Nos vamos a enfocar en cómo construir un sistema de inicio de sesión; en su lugar, vamos a trabajar en la integración de TypeScript y el servidor. Debido a la complejidad de este tutorial, te dejo aquí el link de mi 웹사이트; Tiene mejores는 Visuales que aquí를 나타냅니다.

TypeScript로 React 및 Express.js 프로젝트 생성 | 코딩PR

React 및 Express.js와 TypeScript를 사용하여 시작 공식 생성



codingpr.com

1. Su entorno de Node를 구성합니다.

Cree un nuevo directorio en su computadora y vaya a ese directorio.

Terminal

    mkdir simple-react-form
    cd simple-react-form

Cree un proyecto Node.js, use el indicador -y para crearlo sin hacer preguntas y abre el proyecto en tu editor de codigo favito. Vaya a package.json y complete los valores vacíos.

Terminal

    npm init -y
    code .

2. Express.js 및 TypeScript 구성.

cors, dotenv 및 express.js를 설치합니다. Cors habilitará las solicitudes HTTP desde afuera de nuestro puerto de servidor. Dotenv nos permitirá usar variables de ambiente.

Install through npm or yarn

    npm install cors dotenv express

계속해서 TypeScript con el indicador -D(desarrollo)에 대한 최신 라이브러리를 설치합니다. 동시에 package.json의 스크립트에서 다양한 명령을 실행할 수 없습니다. El nodemon reiniciará automáticamente el servidor cuando realicemos cambios en cualquier archivo del directorio.

npm install -D typescript @types/cors @types/express @types/node concurrently nodemon

Cree el archivo de configuración de TypeScript con el siguiente comando.

Config

    npx tsc --init

En el archivo tsconfig.json, descomente y agregue estos valores JSON.

tsconfig.json

    {
      "compilerOptions": {
        "target": "es2016",
        "jsx": "preserve",
        "module": "commonjs",
        "allowJs": true,
        "outDir": "./dist",
        "esModuleInterop": true,
        "forceConsistentCasingInFileNames": true,
        "strict": true,
        "skipLibCheck": true
      },
      "exclude": [
        "client",
        "dist",
        "node_modules"
      ]
    }

계속해서 package.json과 실제 스크립트를 살펴보겠습니다.

package.json

    {
      "scripts": {
        "build": "npx tsc",
        "start": "node dist/index.js",
        "dev": "concurrently \"npx tsc --watch\" \"nodemon -q dist/index.js\"",
        "test": "echo \"Error: no test specified\" && exit 1"
      },
    }

Cree index.ts en la raíz del proyecto e inserte el siguiente código.

index.ts

    import dotenv from "dotenv";
    import express, { Express, Request, Response } from "express";
    import path from "path";
    import cors from "cors";

    dotenv.config();

    const app: Express = express();

    app.use(express.json());
    app.use(cors());

    app.get('/', (req: Request, res: Response) => {
      res.send('<h1>Hello World From the Typescript Server!</h1>')
    });

    const port = process.env.PORT || 8000;

    app.listen(port, () => {
      console.log(`Example app listening on port ${port}`)
    }); 

Reinicie su editor si está usando VS Code, abra su terminal nuevamente y ejecute:

Terminal

    npm run build
    npm run dev

3. 반응 및 TypeScript 구성.

새로운 구성 요소가 '클라이언트' React로 전환되는 순간입니다. Primero, abra su terminal de comando, asegúrese de estar en la raíz del proyecto, e install React con TypeScript con el nombre de client.

Terminal

    npx create-react-app client --template typescript

Elimine la carpeta git que React instala de forma predeterminada.

Git Bash

    $ cd client
    $ rm -rf .git

Vaya a la carpeta src y cree dos carpetas: 구성 요소 및 유틸리티.

Git Bash

    $ cd src
    $ mkdir components
    $ mkdir utils

Dentro de la carpeta de componentes crea otra carpeta llamada form-input, luego, cree form-input.tsx y copy el código de abajo; este archivo contendrá nuestras entradas de formulario reutilizables(입력 양식). 'input form' 형식을 조작할 때 form-input.css를 'from-input' 형식으로 만들 수 있습니다.

Git Bash

    $ cd components
    $ mkdir form-input
    $ cd form-input
    $ touch form-input.tsx

client/src/components/form-input/form-input.tsx

    import { InputHTMLAttributes, FC } from "react";

    import './form-input.css';

    type FromInputProps = { label: string } &
      InputHTMLAttributes<HTMLInputElement>;

    const FormInput: FC<FromInputProps> = ({ label, ...otherProps }) => {
      return (
        <div className="group">
          <input {...otherProps} />
          {
            label &&
            <div className="form-input-label">
              {label}
            </div>
          }
        </div>
      );
    }

    export default FormInput;

Cree una carpeta utils y agregue data-utils.ts; este archivo hará las llamadas API al servidor.

client/src/utils/data-utils.ts

    export const getData = async <T>(
      url: string,
      email: string,
      password: string
    )
    : Promise<T> => {
      const res = await fetch(url, {
        method: 'Post',
        headers: {
          'Content-type': 'application/json'
        },
        body: JSON.stringify({ email, password })
      });

      return await res.json();
    }

Modifica el archivo app.tsx; estaremos construyendo el formulario de inicio de sesión usando las mismas clases y colores de React.

client/src/App.tsx

    import { useState, ChangeEvent, FormEvent } from "react";
    import { ReactComponent as Logo } from "./logo.svg";
    import { getData } from "./utils/data-utils";
    import FormInput from './components/form-input/form-input';

    import './App.css';

    // declaraciones TypeScript
    type User = {
      id: number,
      name: string,
      email: string,
      password: string
    }

    const defaultFormFields = {
      email: '',
      password: '',
    }

    const App = () => {
      // react hooks
      const [user, setUser] = useState<User | null>()
      const [formFields, setFormFields] = useState(defaultFormFields)
      const { email, password } = formFields

      const resetFormFields = () => {
        return (
          setFormFields(defaultFormFields)
        );
      }

      // handle input
      const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
        const { name, value } = event.target
        setFormFields({...formFields, [name]: value })
      }

      const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
        event.preventDefault()

        try {
          // Llamada API
          const res:User = await getData(
            'http://localhost:8000/login', email, password
          )
          setUser(res);
          resetFormFields()
        } catch (error) {
          alert('User Sign In Failed');
        }
      };

      const reload = () => {
        setUser(null);
        resetFormFields()
      };

      return (
        <div className='App-header'>
          <h1>
            { user && `Welcome! ${user.name}`}
          </h1>
          <div className="card">
            <Logo className="logo" />
            <h2>Sign In</h2>
            <form onSubmit={handleSubmit}>
              <FormInput
                label="Email"
                type="email"
                required
                name="email"
                value={email}
                onChange={handleChange}
              />
              <FormInput
                label="Password"
                type='password'
                required
                name='password'
                value={password}
                onChange={handleChange}
              />
              <div className="button-group">
                <button type="submit">Sign In</button>
                <span>
                  <button type="button" onClick={reload}>Clear</button>
                </span>
              </div>
            </form>
          </div>
        </div>
      );
    }

    export default App;

4. 기존의 새로운 TypeScript 서비더의 집합체.

Estamos casi terminando. Vuelva a index.ts y agregue la ruta de inicio de sesión con TypeScript 추가.

index.ts

    interface FormInputs {
      email: string,
      password: string
    }

    // Array de usuarios con fines de prueba
    const users = [
      {
        id: 1,
        name: 'Maria Doe',
        email: '[email protected]',
        password: 'maria123'
      },
      {
        id: 2,
        name: 'Juan Doe',
        email: '[email protected]',
        password: 'juan123'
      }
    ];

    // route login
    app.post('/login', (req: Request, res: Response) => {
      const { email, password }:FormInputs = req.body;

      const user = users.find(user => {
        return user.email === email && user.password === password
      });

      if (!user) {
        return res.status(404).send('User Not Found!')
      }

      return res.status(200).json(user)
    });

Ejecute tanto el cliente como el servidor en terminales individuales.

Terminal

    npm run dev
    cd client
    npm start

Inicie las pruebas de su aplicación.

마지막 부분 튜토리얼을 참조하세요.
Cómo subir un proyecto de React y Express TypeScript a Heroku .