Typescript React y Express.js

Crea un proyecto de React y Express js con TypeScript.

Denisse Avatar

Por:

Denisse Abreu
Junio 26, 2022 3pm ET

Eng/Spa 5-min

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

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.