DEV Community: Thaissa Carvalho dos Santos

React, Typescript, Props e Events Handlers

Thaissa Carvalho dos Santos — Fri, 14 Mar 2025 19:33:53 +0000

Durante meus estudos em React com TypeScript, me deparei com desafios ao trabalhar com props de tipos variados, incluindo number, strings e até events handlers.

Aqui vou compartilhar um pouco sobre como lidar com essas propriedades de maneira eficiente.

> Props são usadas para transferir dados entre componentes.

> Events Handlers são funções que reagem a interações do usuário e podem ser assíncronas.

Quando criamos componentes, seja para reutilização ou não, é comum que precisemos chamar essas propriedades em arquivos principais. Isso permite que os dados sejam passados de forma eficiente, sem a necessidade de repetições no código.

Aqui está um exemplo de como um componente pode ser chamado no componente pai:

<InputOption key={index} placeholder={`Opção ${index + 1}`} value={option.text || ''} onChange={(e) => handleOptionChange(index, e.target.value)}/>

No exemplo acima, várias propriedades são passadas para o componente InputOption, como key, placeholder, value e onChange. Isso reduz o uso de memória, já que as chamadas são feitas apenas onde necessário.

O seu arquivo principal tem essa criação por trás.

interface InputOptionsProps {
  key: number;
  placeholder: string;
  value: string;
  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
}

export default function InputOption({
  key,
  placeholder,
  value,
  onChange,
}: InputOptionsProps) {
  return (
    <input
      key={key}
      type="text"
      placeholder={placeholder}
      value={value}
      onChange={onChange}
      required
      className="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400"
    />
  );
}

Perceba que há a criação de props com diferentes tipos de dados como:

Number para o KEY
String para os campos PLACEHOLDER e VALUE
Event Object para o campo ON CHANGE

> Event Object é um objeto que armazena informações sobre eventos ocorridos no navegador. No caso do onChange, ele é disparado sempre que o valor de um campo interativo, como um input, é alterado.

Além do onChange, temos outros manipuladores de eventos bastante utilizados, como onSubmit e onClick. O onSubmit é usado para enviar dados após o preenchimento de um formulário, enquanto o onClick captura interações do usuário com links, botões, entre outros.

As suas chamadas em uma propriedade pelo React ocorre de forma diferente, enquanto o onChange chama o "React.ChangeEvent", o onClick não chama nenhum event, ele apenas retorna algo vazio "() => void" para chamadas simples ou "React.MouseEvent" o onSubmit chama o "React.FormEvent" para a propriedade e assim funcionar no elemento pai.

Perceba que, o onChange chama , esse evento de mudança é destinado apenas ao elemento input, mas é possivel utiliza-lo em textarea e select, assim tambem ocorre no onClick com seus varios tipos de chamar um HTML Element podendo ser Archor, Div etc.

> A lógica do HTML Element com o onSubmit não funciona para vários casos.

Exemplo de Event Handlers com suas props:

⋗ Event onClick

interface onClickProps {
  onClick: () => void;
  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;  // Para um botão
  onClick: (event: React.MouseEvent<HTMLDivElement>) => void;
  ...etc  
}

⋗ Event onSubmit

interface onSubmitProps {
  onSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
}

⋗ Event onChange

interface OnChangeProps {
  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
  onChange: (event: React.ChangeEvent<HTMLSelectElement>) => void;
  onChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
  ...etc
}

Cada prop criada permite que o React execute ações específicas após interações do usuário no navegador, com diferentes tipos de eventos.

Em resumo, as props são responsáveis por transferir dados entre componentes, enquanto os event handlers manipulam as interações do usuário. O event object contém informações sobre os eventos e é tipado de acordo com o tipo de evento, como onSubmit, onChange e onClick.

Tutorial de Instalação: Express com MongoDB e Mongoose

Thaissa Carvalho dos Santos — Fri, 27 Dec 2024 13:01:08 +0000

Antes de ensina-lo, esse é o meu post de número 1 na Dev.to, aqui eu estarei ensinando a como instalar, configurar e utilizar o Express, MongoDB e Mongoose em dezembro de 2024, lembrando que pode vir a ter modificações significativas, então, sempre confira a versão que está sendo utilizada e faça a documentação a sua aliada.

A aplicação seguirá alguns pontos como:

O que é Express, MongoDB e Mongoose;
Instalação das tecnologias;
Configurando o arquivo index;
Editando o package.json;
Criando o Model/Schema;
Startando um projeto

Antes de mais nada, você saberia me dizer o que é o Express, MongoDB ou Mongoose? Então, siga os point é a sua definição básica e memoravel.

Express: É um framework para Node.js que oferece recursos para criação de servidores web. Ou seja, ele lida com requisições e respostas de forma rápida, organizada e eficiente.
MongoDB: É um banco de dados não relacional (NoSQL) que utiliza documentos BSON (semelhantes a JSON) para armazenar informações de forma rápida e flexível.
Mongoose: É um ODM (Object Data Modeling) e um dos assistentes mais famosos do MongoDB. Ele auxilia o banco de dados NoSQL a organizar informações, criando modelos para estruturar os dados que serão guardados.

Instalação

Comece abrindo o seu terminal e indo até a pasta de sua preferencia, no meu caso, eu vou na pasta "Documents".

Comando: cd nome-da-pasta
Comando MacOS: cd Documents

Após entrar na pasta 'Documents', cabe você criar e entrar na pasta desejada para começarmos a instalação.

Comando: mkdir nome-da-pasta && cd nome-da-pasta
Comando MacOS: mkdir tutorial-exmb && cd tutorial-exmb

P.s.: O operador "&&" serve para dizer que você QUER criar a pasta E entrar na pasta criada logo em seguida. Esse operador casa em diferentes ocasiões.

A partir daqui, vai de sua escolha se usará Javascript ou Typescript, mas fique tranquilo, eu disponibilizarei as duas formas.

Javascript:

npm init -y

npm install express mongodb mongoose

Typescript

npm init -y

# Instalar dependências principais
npm install express mongodb mongoose

# Instalar dependências de desenvolvimento para TypeScript e tipos
npm install -D typescript @types/node @types/express ts-node

# Criar o arquivo de configuração do TypeScript
npx tsc --init

P.s.: Não é obrigatório ter o MongoDB instalado localmente para utilizá-lo em projetos.

Configurando o arquivo index.js/.ts

# Criando a pasta src e entrando na pasta
mkdir src && cd src

# Criando o arquivo index.js/.ts
touch index.js/.ts

P.s.: Troque o index.js do package.json por index.ts, caso esteja utiliza o Typescript.

Arquivo index.js/.ts

/* 
* Caso esteja utilizando Typescript
import express from 'express';
import mongoose from 'mongoose';
*/
const express = require('express');
const mongoose = require('mongoose');

// Configuração do app
const app = express();
const PORT = 3000;

// Middleware para interpretar JSON
app.use(express.json());

// Conexão com o MongoDB usando Mongoose
const mongoURI = 'mongodb://localhost:27017/seu_banco_de_dados'; // Altere para seu URI do MongoDB
mongoose
  .connect(mongoURI, { useNewUrlParser: true, useUnifiedTopology: true })
  .then(() => {
    console.log('Conectado ao MongoDB com sucesso!');
  })
  .catch((err) => {
    console.error('Erro ao conectar ao MongoDB:', err.message);
  });

// Rotas básicas
app.get('/', (req, res) => {
  res.send('Bem-vindo ao servidor Express com MongoDB!');
});

// Porta onde o servidor será executado
app.listen(PORT, () => {
  console.log(`Servidor rodando em http://localhost:${PORT}`);
});

Editando o package.json com Javascript

# Se quiser utilizar o nodemon, instale com npm install nodemon

"scripts": {
  "start": "node index.js",          // Inicia a aplicação
  "dev": "nodemon index.js",         // Executa o app com nodemon (reinício automático)
  "lint": "eslint . --fix",          // Lint e correção automática do código
  "test": "jest"                     // Roda os testes usando Jest
}

Editando o package.json com Typescript

"scripts": {
  "start": "node dist/index.js",         // Executa o código já compilado
  "build": "tsc",                        // Compila o TypeScript para JavaScript
  "dev": "ts-node src/index.ts",         // Executa o TypeScript diretamente com ts-node
  "lint": "eslint . --ext .ts --fix",    // Lint do código TypeScript
  "test": "jest",                        // Testes com Jest
  "watch": "tsc --watch",                // Compila automaticamente ao salvar
  "clean": "rm -rf dist"                 // Limpa a pasta de build
}

Criando o Model/Schema

Começamos com a criação da pasta e arquivo seguindo o exemplo abaixo. Atente-se a extensão.

mkdir models && cd/models && touch user.model.js/.ts

Após a criação, utilizemos dessa forma.

Versão Javascript: Utilizando const/require com module.exports.

// user.model.js

const mongoose = require('mongoose');

const userSchema = new mongoose.Schema({
  name: {
    type: String,
    required: true,
  },
  username: {
    type: String,
    required: true,
    unique: true
  },
  email: {
    type: String,
    required: true,
    unique: true
  },
  password: {
    type: String,
    required: true,
  },
}, { timestamps: true });

module.exports = mongoose.model('User', userSchema);

Versão Typescript: Utilizando a versão mais atual de import/export.

// user.model.ts

import { model, Schema } from "mongoose";

const userSchema = new mongoose.Schema({
  name: {
    type: String,
    required: true,
  },
  username: {
    type: String,
    required: true,
    unique: true
  },
  email: {
    type: String,
    required: true,
    unique: true
  },
  password: {
    type: String,
    required: true,
  },
}, { timestamps: true });

export const UserModel = mongoose.model('User', userSchema);

Dando start no projeto

Para testar agora o seu projeto e subir a aplicação para o navegador, vá no terminal e rode o comando: npm run start.

P.S.: Você pode utilizar o Bruno, Insomnia, Postman ou via CURL para receber a mensagem 'Bem-vindo ao servidor Express com MongoDB!' e começar a criar os métodos HTTP para o model User.

CHEGAMOS AO FINAL DO TUTORIAL :D

Parabéns! 🎉 Você agora configurou com sucesso um servidor básico usando Express, conectou-se a um banco de dados MongoDB com Mongoose, criou o primeiro Model e entendeu os fundamentos de como essas tecnologias trabalham juntas.