Leitores como você ajudam a apoiar o MUO. Quando você faz uma compra usando links em nosso site, podemos ganhar uma comissão de afiliado. Consulte Mais informação.

Bancos de dados relacionais como o MySQL têm sido tradicionalmente a escolha de banco de dados preferida. No entanto, os bancos de dados NoSQL, como o MongoDB, cresceram em popularidade devido à sua estrutura flexível para armazenamento de dados e à capacidade de armazenar e recuperar dados rapidamente.

Esses bancos de dados oferecem uma linguagem de consulta alternativa que você pode integrar perfeitamente com aplicativos móveis e da Web modernos. Continue lendo para aprender como armazenar dados do React em um banco de dados MongoDB.

O que é um banco de dados NoSQL?

NoSQL significa Não apenas SQL, um banco de dados não relacional. Esse tipo de banco de dados não depende do modelo de banco de dados relacional tradicional. Ele não possui uma estrutura coluna-linha definida e pode armazenar dados em vários formatos diferentes, tornando-o mais flexível e escalável.

A principal diferença entre NoSQL e bancos de dados relacionais é que, em vez de ter linhas e colunas, os bancos de dados NoSQL armazenam dados em documentos, que possuem uma estrutura dinâmica.

Configurar um banco de dados MongoDB

O MongoDB é o banco de dados NoSQL mais popular. É um banco de dados de código aberto que armazena dados em documentos do tipo JSON (tabelas) dentro de coleções (bancos de dados).

Aqui está a aparência de uma estrutura de documento MongoDB simples:

{
 Nome: 'Andrew',
 Função: 'Desenvolvedor Back-end'
}

Para começar, você precisa primeiro configurar um banco de dados MongoDB. Depois de terminar de configurar o MongoDB, abra o aplicativo MongoDB Compass. Em seguida, clique no Nova Conexão botão para criar uma conexão com o servidor MongoDB em execução localmente.

Se você não tiver acesso à ferramenta MongoDB Compass GUI, poderá usar o Ferramenta de shell do MongoDB para criar um banco de dados e a coleção.

Forneça o URI da conexão e o nome da conexão e, em seguida, pressione Salvar e conectar.

Por fim, clique no botão Criar banco de dados, preencha o nome do banco de dados e forneça um nome de coleção para uma coleção de demonstração.

Criar um cliente React

Você pode encontrar o código deste aplicativo em seu Repositório GitHub.

Para inicializar rapidamente um aplicativo React, crie uma pasta de projeto em sua máquina local, mude para esse diretório e execute estes comandos de terminal para criar e ativar o servidor de desenvolvimento:

npx create-react-app meu-aplicativo
cd meu-aplicativo
npm start

Em seguida, instale o Axios. Este pacote permitirá que você envie solicitações HTTP para seu servidor Express.js de back-end para armazenar dados em seu banco de dados MongoDB.

npm instalar axios

Crie um formulário de demonstração para coletar dados do usuário

Abra o src/App.js arquivo, exclua o código padrão do React e substitua-o pelo seguinte:

importar'./App.css';
importar Reagir, { useState } de'reagir';
importar Axios de'axios';
funçãoAplicativo() {
const [nome, setName] = useState("")
const [role, setRole] = useState("")


const handleEnviar = (e) => {
 e.preventDefault();


 Axios.post(' http://localhost: 4000/inserir', {
 fullName: nome,
 companyRole: função
 })
 }


retornar (


"Aplicativo">
"Cabeçalho do aplicativo"> 
"forma de login">


Nome</p>


 className = "Nome"
 tipo="texto"
 espaço reservado ="Primeiro nome ..."
 onChange={(e) => {setName (e.target.value)}}
 />




 Função da Empresa</p>


 className = "Papel"
 tipo="texto"
 espaço reservado = "Papel..."
 onChange={(e) => {setRole (e.target.value)}}
 />








exportarpadrão Aplicativo;

Vamos decompô-lo:

  • Declare dois estados, um nome e um estado de função, para manter os dados do usuário coletados dos campos de entrada usando o hook useState.
  • O em mudança O método de cada campo de entrada executa um retorno de chamada que usa os métodos de estado para capturar e armazenar dados que o usuário envia por meio do formulário.
  • Para enviar os dados para o servidor de back-end, a função do manipulador onSubmit usa o axios.post método para enviar os dados passados ​​dos estados como um objeto para o endpoint da API de back-end.

Para estilizar o formulário renderizado, adicione o código a seguir ao arquivo App.css.

* {
preenchimento: 0;
margem: 0;
dimensionamento de caixa: caixa de borda;
}
corpo {
família de fontes: 'Poppins', sem serifa;
cor de fundo: #8EC1D6;
}


.forma de login {
margem: 100pxauto;
largura: 200px;
altura: 250px;
cor de fundo: #fff;
raio da borda: 10px; 
}


.forma de loginp {
alinhamento de texto: Centro;
tamanho da fonte: 12px;
espessura da fonte: 600;
cor: #B8BFC6;
preenchimento: 10px 10px;
}


.forma de loginentrada {
mostrar: bloquear;
largura: 80%;
altura: 40px;
margem: 10pxauto;
fronteira: 1pxsólido#ccc;
raio da borda: 5px;
preenchimento: 0 10px;
tamanho da fonte: 16px;
cor: preto;
}
.forma de loginbotão {
cor de fundo: #8EC1D6;
cor: #fff;
cursor: ponteiro;
tamanho da fonte: 15px;
raio da borda:7px;
preenchimento: 5px 10px;
fronteira: nenhum;
}

Agora, ative o servidor de desenvolvimento para atualizar as alterações e navegue até http://localhost: 3000 no seu navegador para ver os resultados.

Criar um back-end do Express.js

Um back-end Express atua como middleware entre seu cliente React e o banco de dados MongoDB. A partir do servidor, você pode definir seus esquemas de dados e estabelecer a conexão entre o cliente e o banco de dados.

Criar um servidor da Web Express e instale estes dois pacotes:

npm instalar cors mongoose

Mongoose é uma biblioteca Object Data Modeling (ODM) para MongoDB e Node. Ele fornece um método baseado em esquema simplificado para modelar os dados do aplicativo e armazená-los em um banco de dados MongoDB.

O pacote CORS (Cross-Origin Resource Sharing) fornece um mecanismo para o servidor de back-end e um cliente de front-end para se comunicar e passar dados por meio dos endpoints da API.

Criar um esquema de dados

Crie uma nova pasta no diretório raiz da pasta do projeto do servidor e nomeie-a modelos. Nesta pasta, crie um novo arquivo: dataSchema.js.

Um esquema, neste caso, representa a estrutura lógica do seu banco de dados. Define os documentos (registros) e campos (propriedades) que compõem as coleções dentro do banco de dados.

Adicione o seguinte código a dataSchema.js:

const mangusto = exigir('mangusto');
const ReactFormDataSchema = novo mangusto. Esquema({
 nome: {
 tipo: Corda,
 obrigatório: verdadeiro
 },
 papel: {
 tipo: Corda,
 obrigatório: verdadeiro
 }
});
const Usuário = mangusto.model('Do utilizador', ReactFormDataSchema);
módulo.exports = Usuário;

Este código cria um esquema Mongoose para um modelo de usuário. Esse esquema define a estrutura de dados para os dados do usuário, incluindo o nome e a função do usuário. O esquema é então usado para criar um modelo para o usuário. Isso permite que o modelo armazene dados em uma coleção do MongoDB de acordo com a estrutura definida no Schema.

Configurar o Express Server

A seguir, abra o index.js arquivo na pasta do projeto do servidor e adicione este código:

const expresso = exigir('expressar');
const mangusto = exigir('mangusto');
const cors = exigir('cors');
const aplicativo = expresso();
const Usuário= exigir('./models/ReactDataSchema')
app.use (express.json());
app.use (cors());


mangusto.conectar('mongodb://localhost: 27017/reactdata', { useNewUrlParser: verdadeiro });


app.post('/inserir', assíncrono(req, res) => {
const FirstName = req.body.firstName
const CompanyRole = req.body.companyRole


const formDados = novo Do utilizador({
 primeiro nome,
 função: CompanyRole
 })


tentar {
aguardam formData.save();
 res.enviar("dados inseridos..")
 } pegar(err) {
console.log (erro)
 }
});


const port = process.env. PORTO || 4000;
app.listen (porta, () => {
console.registro(`Servidor iniciado na porta ${porta}`);
});

Vamos decompô-lo:

  • Inicialize Express, mangusto e CORS no servidor.
  • O pacote Mongoose estabelece a conexão com o banco de dados MongoDB usando o conectar método que leva no domínio URI e um objeto. O URI é uma string de conexão usada para estabelecer uma conexão com o banco de dados MongoDB. O objeto especifica a configuração; neste caso, ele contém uma configuração para usar a forma mais recente de analisador de URL.
  • O servidor da Web responde principalmente às solicitações provenientes de diferentes rotas com a função de manipulador apropriada. Para este caso, o servidor possui uma rota POST que recebe dados do cliente React, os armazena em uma variável e os passa para o modelo de dados importado.
  • O servidor então usa um bloco try-and-catch para armazenar e salvar os dados no banco de dados MongoDB e desconectar quaisquer erros, se houver.

Por fim, ative o servidor de desenvolvimento para atualizar as alterações e acesse seu cliente React em seu navegador. Digite quaisquer dados no formulário e visualize os resultados no banco de dados MongoDB.

Usando a pilha MERN para criar aplicativos

A pilha MERN fornece um conjunto de ferramentas eficiente e poderoso para criar aplicativos. Você pode criar aplicativos completos do mundo real usando MongoDB, Express, React e Node.js,

O ecossistema React também fornece pacotes para ajudá-lo a trabalhar com formulários da web. Alguns dos mais populares são Formik, KendoReact Form e React Hook Form.