Crea un proyecto de React y Express js con TypeScript.

Por:

Denisse Abreu
Junio 26, 2022 3pm ET

Eng/Spa 5-min

# Configure su entorno Node # Configure Express js y TypeScript # Configure React y TypeScript # Agrege nuevas rutas y TypeScript al servidor

Hola 👋🏼, vamos a construir un formulario de inicio de sesión con React TypeScript desde un servidor Express js con TypeScript. No 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. Cuando terminemos, subiremos la aplicación a Heroku.
¡Comencemos!

1. Configure 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 código favorito. Vaya a package.json y complete los valores vacíos.

Terminal

  npm init -y
  code .

2. Configurar Express js y TypeScript.

Instale cors, dotenv y 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

A continuación, instale todas las librerías relacionadas a TypeScript con el indicador -D (desarrollo). El concurrently nos permitirá ejecutar varios comandos en scripts de 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"
    ]
  }

A continuación, vaya a package.json y actualice la sección de scripts.

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('Hello World From the Typescript Server!')
  });

  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

Deberías ver esto 👇 en tu navegador.

Navegador Chrome

Estructura del archivo del proyecto

3. Configurar React y TypeScript.

Ahora es el momento de construir nuestro lado 'client' React. Primero, abra su terminal de comando, asegúrese de estar en la raíz del proyecto, e instale 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: components y utils.

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 copie el código de abajo; este archivo contendrá nuestras entradas de formulario reutilizables (input forms). Si quieres manipular el estilo del 'input form', crea form-input.css en la carpeta 'from-input'.

Git Bash

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

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

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

client/src/utils/data-utils.ts

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

4. Agrega nuevas rutas y TypeScript al servidor.

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

index.ts

  interface FormInputs {
    email: string,
    password: string
  }

  // Array de usuarios con fines de prueba
  const users = [
    {
      id: 1,
      name: 'Maria Doe',
      email: 'maria@example.com',
      password: 'maria123'
    },
    {
      id: 2,
      name: 'Juan Doe',
      email: 'juan@example.com',
      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. Puede Copiar el Css aquí.

Formulario de inicio de sesión

Estructura de archivos del lado client

Consulte la segunda parte de este tutorial, Cómo subir un proyecto de React y Express TypeScript a Heroku.