<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: jojosuelobo</title>
    <description>The latest articles on DEV Community by jojosuelobo (@jojosuelobo).</description>
    <link>https://dev.to/jojosuelobo</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1075683%2F337614ee-3193-40b5-ab64-29d074231fc1.jpg</url>
      <title>DEV Community: jojosuelobo</title>
      <link>https://dev.to/jojosuelobo</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/jojosuelobo"/>
    <language>en</language>
    <item>
      <title>Os Melhores Livros para Aprimorar Suas Habilidades em QA</title>
      <dc:creator>jojosuelobo</dc:creator>
      <pubDate>Wed, 14 Aug 2024 17:58:23 +0000</pubDate>
      <link>https://dev.to/jojosuelobo/os-melhores-livros-para-aprimorar-suas-habilidades-em-qa-3h4f</link>
      <guid>https://dev.to/jojosuelobo/os-melhores-livros-para-aprimorar-suas-habilidades-em-qa-3h4f</guid>
      <description>&lt;p&gt;Se você está mergulhando no universo da Garantia de Qualidade (QA), sabe que o caminho pode ser cheio de desafios e aprendizados. Uma maneira incrível de dar um up nas suas habilidades e ficar por dentro das melhores práticas é através da leitura. Seja você um iniciante que está começando a entender como tudo funciona, um estudante querendo se aprofundar ou um profissional buscando novas insights, alguns livros podem realmente fazer a diferença na sua jornada.&lt;/p&gt;

&lt;h2&gt;
  
  
  Código Limpo: Habilidades Práticas do Agile Software
&lt;/h2&gt;

&lt;p&gt;por Robert C. Martin&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvgyfnnbqcqee8nv27fxc.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvgyfnnbqcqee8nv27fxc.jpeg" alt="Foto de capa" width="800" height="586"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Se você ainda não leu &lt;a href="https://amzn.to/4dnqoNU" rel="noopener noreferrer"&gt;Código Limpo&lt;/a&gt;, tá na hora de adicionar esse clássico à sua lista! O livro, do Robert C. Martin, é uma verdadeira bíblia para quem quer escrever código que seja não só funcional, mas também limpo e fácil de entender. Ele traz dicas práticas e princípios fundamentais para melhorar a qualidade do seu código, tornando-o mais sustentável e menos propenso a bugs. Se você quer levar suas habilidades de programação e QA para o próximo nível, esse livro é um must-read. Não só para quem está começando, mas para qualquer um que queira se tornar um desenvolvedor mais eficiente e organizado.&lt;/p&gt;

&lt;h2&gt;
  
  
  Entendendo Algoritmos: Um Guia Ilustrado Para Programadores e Outros Curiosos
&lt;/h2&gt;

&lt;p&gt;por Aditya Y. Bhargava&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpzrf5iopf9yn8kblooq7.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpzrf5iopf9yn8kblooq7.png" alt="Foto de capa" width="800" height="533"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Se você quer desbravar o mundo dos algoritmos sem se perder em jargões complicados, &lt;a href="https://amzn.to/3WT19fs" rel="noopener noreferrer"&gt;Entendendo Algoritmos&lt;/a&gt; é o livro certo para você. Escrito por Aditya Bhargava, ele apresenta conceitos fundamentais de uma maneira super visual e acessível. Com ilustrações que tornam os conceitos mais fáceis de entender e exemplos práticos que mostram como os algoritmos funcionam na vida real, é uma leitura excelente para quem está começando ou para quem só quer refrescar a memória. É um guia que vai te ajudar a compreender melhor como resolver problemas de forma eficiente e é perfeito para dar aquele upgrade no seu conhecimento em QA e programação.&lt;/p&gt;

&lt;h2&gt;
  
  
  Unit Testing Principles, Practices, and Patterns
&lt;/h2&gt;

&lt;p&gt;por Vladimir Khorikov&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhfx9slgjq2s7y08gs1yo.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhfx9slgjq2s7y08gs1yo.png" alt="Foto de capa" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Se você quer se aprofundar no mundo dos testes unitários, &lt;a href="https://amzn.to/3X1g7kH" rel="noopener noreferrer"&gt;Unit Testing Principles, Practices, and Patterns&lt;/a&gt; é uma leitura obrigatória. Escrito por Vladimir Khorikov, esse livro é um guia completo para testar seu código de maneira eficaz. Ele cobre tudo, desde os princípios fundamentais e práticas recomendadas até padrões avançados de testes e automação. Ideal para quem busca elevar a qualidade dos testes e dominar a arte do unit testing. Se você está em busca de um livro que combine teoria e prática de forma acessível e direta, esse é o seu guia!&lt;/p&gt;

&lt;h2&gt;
  
  
  Full Stack Testing: A Practical Guide for Delivering High Quality Software
&lt;/h2&gt;

&lt;p&gt;por Gayathri Mohan&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftfldyhsgkuhi66s23gw7.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftfldyhsgkuhi66s23gw7.jpeg" alt="Foto de capa" width="800" height="600"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Se você está no jogo de entregar software de alta qualidade e quer entender melhor como testar cada camada do seu stack, &lt;a href="https://amzn.to/3yF2LRE" rel="noopener noreferrer"&gt;Full Stack Testing&lt;/a&gt; é o livro para você. Escrito por Sander Hoogendoorn, ele traz uma abordagem prática e direta para garantir que seu software funcione bem do front-end ao back-end. O livro explora técnicas e estratégias para testes em diferentes camadas, desde a interface do usuário até os sistemas de backend, e oferece insights valiosos sobre como integrar testes de forma eficaz no seu processo de desenvolvimento. Ideal para quem quer uma visão abrangente e prática de como garantir a qualidade em todas as partes do seu software. Se você busca um guia completo para dominar o full stack testing, esse livro é uma excelente escolha!&lt;/p&gt;

&lt;h2&gt;
  
  
  Como ser um Programador Melhor
&lt;/h2&gt;

&lt;p&gt;por Pete Goodliffe&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5r2nk24qvu2sy1rq2nzz.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5r2nk24qvu2sy1rq2nzz.jpg" alt="Foto de capa" width="800" height="666"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Se você está procurando um guia prático e direto para melhorar suas habilidades de programação, &lt;a href="https://amzn.to/4cHiUEp" rel="noopener noreferrer"&gt;Como Ser um Programador Melhor&lt;/a&gt; de Pete Goodliffe é uma escolha excelente. Publicado em 2015, este livro oferece uma abordagem acessível e focada em práticas reais para aprimorar sua programação, é fundamental um QA também entender sobre programação, e das melhores práticas de programação&lt;/p&gt;

&lt;p&gt;Se você está comprometido em levar suas habilidades de programação a um nível superior e valoriza a qualidade do código, este livro vai ser um ótimo recurso para você.&lt;/p&gt;

&lt;p&gt;…&lt;/p&gt;

&lt;p&gt;Com esses livros, você está pronto para dar um upgrade nas suas habilidades em QA e desenvolvimento. Escolha o próximo livro, mergulhe na leitura e veja a diferença na sua prática. Tem dúvidas ou sugestões? Deixe um comentário! Boa leitura e sucesso nos testes!&lt;/p&gt;

</description>
      <category>livros</category>
      <category>leitura</category>
      <category>qa</category>
      <category>coding</category>
    </item>
    <item>
      <title>Como criar um projeto nas principais ferramentas de programação</title>
      <dc:creator>jojosuelobo</dc:creator>
      <pubDate>Mon, 03 Jul 2023 12:34:44 +0000</pubDate>
      <link>https://dev.to/jojosuelobo/como-criar-um-projeto-nas-principais-ferramentas-de-programacao-155p</link>
      <guid>https://dev.to/jojosuelobo/como-criar-um-projeto-nas-principais-ferramentas-de-programacao-155p</guid>
      <description>&lt;h3&gt;
  
  
  Vite
&lt;/h3&gt;

&lt;p&gt;Vite é uma ferramenta de compilação e empacotamento de projetos de desenvolvimento web em JavaScript. Ela é especialmente projetada para criar aplicativos modernos de página única (Single-Page Applications - SPAs) e bibliotecas JavaScript. Adota uma abordagem de desenvolvimento mais rápida, oferecendo um tempo de inicialização quase instantâneo.&lt;br&gt;
Criação do projeto no terminal:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight console"&gt;&lt;code&gt;&lt;span class="go"&gt;npm create vite@latest
cd [NOME-DO-PROJETO]
npm i
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Execução:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight console"&gt;&lt;code&gt;&lt;span class="go"&gt;npm run dev
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



</description>
      <category>node</category>
      <category>npm</category>
      <category>vite</category>
      <category>terminal</category>
    </item>
    <item>
      <title>Desbravando os Segredos do SQL: Um Guia Completo para Dominar a Linguagem de Bancos de Dados</title>
      <dc:creator>jojosuelobo</dc:creator>
      <pubDate>Mon, 19 Jun 2023 20:25:46 +0000</pubDate>
      <link>https://dev.to/jojosuelobo/desbravando-os-segredos-do-sql-um-guia-completo-para-dominar-a-linguagem-de-bancos-de-dados-17hb</link>
      <guid>https://dev.to/jojosuelobo/desbravando-os-segredos-do-sql-um-guia-completo-para-dominar-a-linguagem-de-bancos-de-dados-17hb</guid>
      <description>&lt;p&gt;SQL (Structured Query Language) é uma linguagem de programação padronizada usada para gerenciar bancos de dados relacionais e realizar várias operações nos dados. Criada inicialmente na década de 1970, o SQL é comumente usado não apenas por administradores de banco de dados, mas também por desenvolvedores que escrevem scripts de integração de dados e por analistas de dados que desejam configurar e executar consultas analíticas.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftnlxda40d9x7vq4fxui5.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftnlxda40d9x7vq4fxui5.jpg" alt="SQL MindMap" width="700" height="869"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Comandos SQL
&lt;/h2&gt;

&lt;p&gt;Existem 4 comandos importantes em SQL:&lt;br&gt;
DDL (Data Query Language)&lt;br&gt;
É usado para criar e modificar a estrutura dos objetos do banco de dados. Esses objetos do banco de dados incluem visões, esquemas, tabelas, índices, etc.&lt;br&gt;
Os comandos DDL comumente usados em consultas SQL são &lt;code&gt;CREATE&lt;/code&gt;, &lt;code&gt;ALTER&lt;/code&gt;, &lt;code&gt;DROP&lt;/code&gt;e &lt;code&gt;TRUNCATE&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;CREATE&lt;/strong&gt;: É usado para criar uma nova tabela no banco de dados. Exemplo:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;CREATE&lt;/span&gt; &lt;span class="k"&gt;TABLE&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;nome_da_tabela&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="p"&gt;([&lt;/span&gt;&lt;span class="n"&gt;defini&lt;/span&gt;&lt;span class="err"&gt;çõ&lt;/span&gt;&lt;span class="n"&gt;es_de_coluna&lt;/span&gt;&lt;span class="p"&gt;])&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;par&lt;/span&gt;&lt;span class="err"&gt;â&lt;/span&gt;&lt;span class="n"&gt;metros_da_tabela&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;CREATE&lt;/span&gt; &lt;span class="k"&gt;TABLE&lt;/span&gt; &lt;span class="n"&gt;EMPLOYEE&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;Nome&lt;/span&gt; &lt;span class="n"&gt;VARCHAR2&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;20&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt; &lt;span class="n"&gt;Email&lt;/span&gt; &lt;span class="n"&gt;VARCHAR2&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;100&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt; &lt;span class="n"&gt;DOB&lt;/span&gt; &lt;span class="nb"&gt;DATE&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;DROP&lt;/strong&gt;: É usado para excluir a estrutura e os registros armazenados na tabela.Exemplo:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;DROP&lt;/span&gt; &lt;span class="k"&gt;TABLE&lt;/span&gt; &lt;span class="n"&gt;nome_da_tabela&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;DROP&lt;/span&gt; &lt;span class="k"&gt;TABLE&lt;/span&gt; &lt;span class="n"&gt;EMPLOYEE&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;ALTER&lt;/strong&gt;: É usado para alterar a estrutura do banco de dados, seja para modificar as características de um atributo existente ou para adicionar um novo atributo.&lt;br&gt;
Exemplo:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;ALTER&lt;/span&gt; &lt;span class="k"&gt;TABLE&lt;/span&gt; &lt;span class="n"&gt;nome_da_tabela&lt;/span&gt; &lt;span class="k"&gt;ADD&lt;/span&gt; &lt;span class="n"&gt;nome_da_coluna&lt;/span&gt; &lt;span class="n"&gt;DEFINI&lt;/span&gt;&lt;span class="err"&gt;ÇÃ&lt;/span&gt;&lt;span class="n"&gt;O&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="n"&gt;DE&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="n"&gt;COLUNA&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;ALTER&lt;/span&gt; &lt;span class="k"&gt;TABLE&lt;/span&gt; &lt;span class="n"&gt;Employee&lt;/span&gt; &lt;span class="k"&gt;ADD&lt;/span&gt; &lt;span class="n"&gt;Address&lt;/span&gt; &lt;span class="n"&gt;VARCHAR2&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;20&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;TRUNCATE&lt;/strong&gt;: É usado para excluir todas as linhas da tabela e liberar o espaço ocupado por ela. Exemplo:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;TRUNCATE&lt;/span&gt; &lt;span class="k"&gt;TABLE&lt;/span&gt; &lt;span class="n"&gt;nome_da_tabela&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;TRUNCATE&lt;/span&gt; &lt;span class="k"&gt;TABLE&lt;/span&gt; &lt;span class="n"&gt;EMPLOYEE&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  DQL (Data Query Language)
&lt;/h2&gt;

&lt;p&gt;É usado para buscar dados do banco de dados, como por exemplo o comando &lt;code&gt;SELECT&lt;/code&gt;. Ele é usado para selecionar atributos com base em uma condição descrita pela cláusula WHERE.&lt;br&gt;
Exemplo:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="n"&gt;atributos&lt;/span&gt; &lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;tabelas&lt;/span&gt; &lt;span class="k"&gt;WHERE&lt;/span&gt; &lt;span class="n"&gt;condi&lt;/span&gt;&lt;span class="err"&gt;çõ&lt;/span&gt;&lt;span class="n"&gt;es&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="n"&gt;Email&lt;/span&gt; &lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;Employee&lt;/span&gt; &lt;span class="k"&gt;WHERE&lt;/span&gt; &lt;span class="n"&gt;Name&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s1"&gt;'Vishal'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  DML (Data Manipulation Language)
&lt;/h2&gt;

&lt;p&gt;Permite modificar a instância do banco de dados inserindo, modificando e excluindo dados. É responsável por realizar todos os tipos de modificação de dados em um banco de dados. Os comandos DML comumente usados em consultas SQL são CRUD, SELECT, INSERT, UPDATE e DELETE.&lt;br&gt;
&lt;strong&gt;SELECT&lt;/strong&gt;: É usado para buscar registros de dados da tabela do banco de dados e apresentá-los como um conjunto de resultados.&lt;br&gt;
Exemplo:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="n"&gt;nome_da_coluna1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;nome_da_coluna2&lt;/span&gt;&lt;span class="p"&gt;,..&lt;/span&gt; &lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;nome_da_tabela&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;nome_da_tabela&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="n"&gt;EmployeeId&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;EmployeeName&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;Designation&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;Country&lt;/span&gt; &lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;Employee&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;Employee&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;INSERT&lt;/strong&gt;: É usado para inserir registros de dados na tabela do banco de dados.&lt;br&gt;
Exemplo:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;INSERT&lt;/span&gt; &lt;span class="k"&gt;INTO&lt;/span&gt; &lt;span class="n"&gt;nome_da_tabela&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;col1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;col2&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;col3&lt;/span&gt;&lt;span class="p"&gt;,....&lt;/span&gt; &lt;span class="n"&gt;colN&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="k"&gt;VALUES&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;valor1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;valor2&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;valor3&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;....&lt;/span&gt; &lt;span class="n"&gt;valorN&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;INSERT&lt;/span&gt; &lt;span class="k"&gt;INTO&lt;/span&gt; &lt;span class="n"&gt;Employee&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;EmployeeName&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;Designation&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;Country&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="k"&gt;VALUES&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;'John Doe'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;'Manager'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;'USA'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;UPDATE&lt;/strong&gt;: É usado para modificar os registros existentes na tabela do banco de dados.&lt;br&gt;
Exemplo:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;UPDATE&lt;/span&gt; &lt;span class="n"&gt;nome_da_tabela&lt;/span&gt;
&lt;span class="k"&gt;SET&lt;/span&gt; &lt;span class="n"&gt;coluna&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;novo_valor&lt;/span&gt;
&lt;span class="k"&gt;WHERE&lt;/span&gt; &lt;span class="n"&gt;condi&lt;/span&gt;&lt;span class="err"&gt;çã&lt;/span&gt;&lt;span class="n"&gt;o&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;UPDATE&lt;/span&gt; &lt;span class="n"&gt;Employee&lt;/span&gt;
&lt;span class="k"&gt;SET&lt;/span&gt; &lt;span class="n"&gt;Designation&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s1"&gt;'Lead'&lt;/span&gt;
&lt;span class="k"&gt;WHERE&lt;/span&gt; &lt;span class="n"&gt;EmployeeId&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;1001&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;DELETE&lt;/strong&gt;: É usado para excluir registros existentes na tabela do banco de dados.&lt;br&gt;
Exemplo:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;DELETE&lt;/span&gt; &lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;nome_da_tabela&lt;/span&gt; &lt;span class="k"&gt;WHERE&lt;/span&gt; &lt;span class="n"&gt;condi&lt;/span&gt;&lt;span class="err"&gt;çã&lt;/span&gt;&lt;span class="n"&gt;o&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;DELETE&lt;/span&gt; &lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;Employee&lt;/span&gt; &lt;span class="k"&gt;WHERE&lt;/span&gt; &lt;span class="n"&gt;EmployeeId&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;1001&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  DCL (Data Control Language)
&lt;/h2&gt;

&lt;p&gt;É usado para controlar os direitos de acesso ao banco de dados, definindo as permissões concedidas aos usuários.&lt;br&gt;
Exemplo:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;GRANT&lt;/span&gt; &lt;span class="n"&gt;permiss&lt;/span&gt;&lt;span class="err"&gt;õ&lt;/span&gt;&lt;span class="n"&gt;es&lt;/span&gt; &lt;span class="k"&gt;ON&lt;/span&gt; &lt;span class="n"&gt;nome_da_tabela&lt;/span&gt; &lt;span class="k"&gt;TO&lt;/span&gt; &lt;span class="n"&gt;nome_do_usu&lt;/span&gt;&lt;span class="err"&gt;á&lt;/span&gt;&lt;span class="n"&gt;rio&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;GRANT&lt;/span&gt; &lt;span class="k"&gt;SELECT&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="k"&gt;INSERT&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="k"&gt;UPDATE&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="k"&gt;DELETE&lt;/span&gt; &lt;span class="k"&gt;ON&lt;/span&gt; &lt;span class="n"&gt;Employee&lt;/span&gt; &lt;span class="k"&gt;TO&lt;/span&gt; &lt;span class="n"&gt;John&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  TCL (Transaction Control Language)
&lt;/h2&gt;

&lt;p&gt;É usado para gerenciar as transações no banco de dados, permitindo que você confirme ou reverta as alterações feitas nas transações.&lt;br&gt;
Exemplo:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;COMMIT&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;ROLLBACK&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






</description>
      <category>sql</category>
      <category>mysql</category>
      <category>database</category>
    </item>
    <item>
      <title>Alterações de páginas de forma dinâmica com o UseState</title>
      <dc:creator>jojosuelobo</dc:creator>
      <pubDate>Fri, 16 Jun 2023 20:43:56 +0000</pubDate>
      <link>https://dev.to/jojosuelobo/alteracoes-de-paginas-de-forma-dinamica-com-o-usestate-f7l</link>
      <guid>https://dev.to/jojosuelobo/alteracoes-de-paginas-de-forma-dinamica-com-o-usestate-f7l</guid>
      <description>&lt;p&gt;&lt;strong&gt;&lt;code&gt;useState&lt;/code&gt;&lt;/strong&gt; é um hook do React que permite a um componente de função ter um estado interno. O estado é uma informação que pode ser armazenada e modificada durante a vida útil de um componente. Em resumo, &lt;strong&gt;&lt;code&gt;useState&lt;/code&gt;&lt;/strong&gt; é uma maneira de adicionar e manipular o estado em componentes de função no React, permitindo que você crie componentes dinâmicos e interativos.&lt;/p&gt;

&lt;p&gt;Vamos analisar um exemplo prático do uso de UseStates e como seria sua aplicação num projeto.&lt;/p&gt;

&lt;p&gt;Faremos uma página web simples, com um título com um nome e um input que irá alterar este título em tempo real. Além disso, um contator incrementado via button, tudo isso com o uso de Hooks e UseState.&lt;/p&gt;

&lt;p&gt;São declaradas duas variáveis de estado usando o hook &lt;strong&gt;&lt;code&gt;useState&lt;/code&gt;&lt;/strong&gt;. O primeiro argumento passado para &lt;strong&gt;&lt;code&gt;useState&lt;/code&gt;&lt;/strong&gt; é o valor inicial do estado, e retorna um array com duas posições: a primeira posição contém o valor atual do estado e a segunda posição contém uma função para atualizar o valor do estado.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;setName&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;useState&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;jojosuelobo&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Neste caso, o estado &lt;strong&gt;&lt;code&gt;name&lt;/code&gt;&lt;/strong&gt; é inicializado com o valor &lt;strong&gt;&lt;code&gt;'jojosuelobo'&lt;/code&gt;&lt;/strong&gt; e a função &lt;strong&gt;&lt;code&gt;setName&lt;/code&gt;&lt;/strong&gt; é usada para atualizar o estado &lt;strong&gt;&lt;code&gt;name&lt;/code&gt;&lt;/strong&gt; posteriormente. A próxima linha declara outra variável de estado chamada &lt;strong&gt;&lt;code&gt;number&lt;/code&gt;&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;number&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;setNumber&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;useState&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;O estado &lt;strong&gt;&lt;code&gt;number&lt;/code&gt;&lt;/strong&gt; é inicializado com o valor &lt;strong&gt;&lt;code&gt;1&lt;/code&gt;&lt;/strong&gt;, e a função &lt;strong&gt;&lt;code&gt;setNumber&lt;/code&gt;&lt;/strong&gt; é usada para atualizar esse estado. Em seguida, há a definição de uma função chamada &lt;strong&gt;&lt;code&gt;changeNumber&lt;/code&gt;&lt;/strong&gt;:&lt;br&gt;
&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;changeNumber&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;setNumber&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;prevNumber&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;prevNumber&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Essa função é chamada quando o botão "Mudar número!" é clicado. Ela utiliza a função &lt;strong&gt;&lt;code&gt;setNumber&lt;/code&gt;&lt;/strong&gt; para atualizar o estado &lt;strong&gt;&lt;code&gt;number&lt;/code&gt;&lt;/strong&gt;. A função &lt;strong&gt;&lt;code&gt;setNumber&lt;/code&gt;&lt;/strong&gt; recebe uma função como argumento, que é chamada com o valor anterior do estado (&lt;strong&gt;&lt;code&gt;prevNumber&lt;/code&gt;&lt;/strong&gt;). Dentro dessa função, o valor do estado anterior é incrementado em 1 e o novo valor é atribuído ao estado &lt;strong&gt;&lt;code&gt;number&lt;/code&gt;&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;No retorno da função do componente, há um bloco JSX, que representa a estrutura da interface de usuário que será renderizada no navegador.&lt;br&gt;
&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;
  &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt; &lt;span class="na"&gt;className&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s"&gt;'App'&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;h2&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;Meu nome é: &lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;h2&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;input&lt;/span&gt; &lt;span class="na"&gt;type&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s"&gt;'text'&lt;/span&gt; &lt;span class="na"&gt;placeholder&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt; &lt;span class="na"&gt;onChange&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;e&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;setName&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;e&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;target&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt; &lt;span class="p"&gt;/&amp;gt;&lt;/span&gt;
    &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;p&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;Número: &lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;number&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;p&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;button&lt;/span&gt; &lt;span class="na"&gt;onClick&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;changeNumber&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;Mudar número!&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;button&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Se tudo ocorrer como previsto, a página irá se comportar da seguinte forma:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--sg8EhNDS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f6l5w85tu63zahp8xxrp.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--sg8EhNDS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f6l5w85tu63zahp8xxrp.gif" alt="Image description" width="665" height="405"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Aplicação React&lt;/p&gt;

&lt;p&gt;Em resumo, o &lt;strong&gt;&lt;code&gt;useState&lt;/code&gt;&lt;/strong&gt; é um recurso essencial do React que permite que os componentes de função tenham um estado interno. Ele fornece uma maneira simples e eficiente de armazenar e atualizar informações ao longo da vida útil de um componente, possibilitando a criação de interfaces dinâmicas e interativas para as aplicações React.&lt;/p&gt;

&lt;p&gt;Repositório do Projeto: &lt;/p&gt;
&lt;div class="ltag-github-readme-tag"&gt;
  &lt;div class="readme-overview"&gt;
    &lt;h2&gt;
      &lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--A9-wwsHG--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev.to/assets/github-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"&gt;
      &lt;a href="https://github.com/jojosuelobo"&gt;
        jojosuelobo
      &lt;/a&gt; / &lt;a href="https://github.com/jojosuelobo/UseState-React"&gt;
        UseState-React
      &lt;/a&gt;
    &lt;/h2&gt;
    &lt;h3&gt;
      
    &lt;/h3&gt;
  &lt;/div&gt;
&lt;/div&gt;



</description>
      <category>react</category>
      <category>javascript</category>
      <category>usestate</category>
      <category>hooks</category>
    </item>
    <item>
      <title>Diferença entre '=', '==' e '===' em JavaScript: Igualdade, Atribuição e Igualdade Estrita</title>
      <dc:creator>jojosuelobo</dc:creator>
      <pubDate>Mon, 12 Jun 2023 16:49:08 +0000</pubDate>
      <link>https://dev.to/jojosuelobo/diferenca-entre-e-em-javascript-igualdade-atribuicao-e-igualdade-estrita-56k0</link>
      <guid>https://dev.to/jojosuelobo/diferenca-entre-e-em-javascript-igualdade-atribuicao-e-igualdade-estrita-56k0</guid>
      <description>&lt;p&gt;Em JavaScript, há diferenças sutis entre os operadores "=" (atribuição), "==" (igualdade) e "===" (igualdade estrita).&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;1. Operador "=" (Atribuição):&lt;/strong&gt;&lt;br&gt;
O operador "=" é usado para atribuir um valor a uma variável. Por exemplo: Nesse caso, o valor 5 é atribuído à variável "x".&lt;br&gt;
&lt;code&gt;let x = 5;&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;2. Operador "==" (Igualdade):&lt;/strong&gt;&lt;br&gt;
O operador "==" verifica se dois valores são iguais, mesmo que sejam de tipos diferentes. Ele realiza a conversão de tipos implícita, se necessário. Por exemplo:&lt;br&gt;
&lt;code&gt;console.log(5 == "5");&lt;/code&gt;&lt;br&gt;
&lt;code&gt;true&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Nesse caso, embora o primeiro valor seja um número e o segundo seja uma string, o operador "==" realiza uma conversão implícita do valor string para número e verifica a igualdade.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;3. Operador "===" (Igualdade estrita):&lt;/strong&gt;&lt;br&gt;
O operador "===" verifica se dois valores são iguais e também verifica se os tipos são os mesmos. Ele não realiza conversões de tipos. Por exemplo:&lt;br&gt;
&lt;code&gt;console.log(5 === "5");&lt;/code&gt;&lt;br&gt;
&lt;code&gt;false&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Nesse caso, como o operador "===" não realiza conversão de tipos, ele retorna false porque o valor e o tipo dos operandos são diferentes.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Considerações finais&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Em geral, é recomendado usar o operador "===" para verificar igualdade em JavaScript, pois ele evita resultados inesperados devido a conversões implícitas de tipos. O operador "==" pode ser útil em situações específicas quando você deseja realizar comparações com conversões de tipos implícitas.&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>codenewbie</category>
      <category>coding</category>
    </item>
    <item>
      <title>Criando um repositório no GitHub via linha comando</title>
      <dc:creator>jojosuelobo</dc:creator>
      <pubDate>Wed, 03 May 2023 17:07:51 +0000</pubDate>
      <link>https://dev.to/jojosuelobo/criando-um-repositorio-no-github-via-linha-comando-4k3o</link>
      <guid>https://dev.to/jojosuelobo/criando-um-repositorio-no-github-via-linha-comando-4k3o</guid>
      <description>&lt;h1&gt;
  
  
  Descrição rápida para subir seu projeto para um repositório já criado dentro do GitHub
&lt;/h1&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Antes de qualquer coisa, é essencial que você tenha o Git instalado em sua máquina. Em caso de dúvida, basta entrar com o comando &lt;code&gt;git -v&lt;/code&gt; no prompt de comando para verificar se o git está instalado com sucesso e sua versão.&lt;br&gt;
&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fitm31sl459brq3ropd3g.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fitm31sl459brq3ropd3g.png" alt="Image description" width="589" height="158"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Dentro de seu repositório no GitHub, clique na opção HTTPS em Quick setup, o link gerado será necessário. &lt;br&gt;
&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fj23yi863yuf842izw5ty.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fj23yi863yuf842izw5ty.png" alt="Image description" width="800" height="295"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Abra o Git Bash ou o Terminal dentro da pasta do projeto a ser enviado.&lt;br&gt;
&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgp0dy2k2qsc9bfbgw80x.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgp0dy2k2qsc9bfbgw80x.png" alt="Image description" width="617" height="486"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Inicie a pasta como um repositório do Git através do comando:&lt;br&gt;
&lt;code&gt;git init&lt;/code&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Em seguida, adicione os arquivos de configuração para preparar o commit:&lt;br&gt;
&lt;code&gt;git add .&lt;/code&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Crie um novo commit para os arquivos que irá subir para o repositório:&lt;br&gt;
&lt;code&gt;git commit -m "commit inicial"&lt;/code&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Use o comando &lt;code&gt;-M main&lt;/code&gt; para renomear a sua branch "master" pra "main", para quando for executado o git push, ao invés de criar uma nova branch, o git irá atualizar a branch que já está lá, nesse caso a "main".&lt;br&gt;
&lt;code&gt;git branch -M main&lt;/code&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Se você der o git push estando na branch master o github vai entender que você criou uma nova branch, e lá no seu repositório remoto ele vai criar essa branch também. Não tem problema, você só vai ter que fazer um "merge" lá dentro do próprio GitHub. Mas pra facilitar ele já te sugere alterar o nome da sua branch e poupar esse trabalho.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Suba seus arquivos utilizando a URL gerada no passo 2 no seguinte comando:&lt;br&gt;
&lt;code&gt;git remote add origin URL-GERADA-PELO-PASSO-2-AQUI&lt;/code&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Autorize o upload com seu login e senha:&lt;br&gt;
&lt;code&gt;git push -u origin master&lt;/code&gt;&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

</description>
      <category>github</category>
      <category>git</category>
      <category>repositorio</category>
      <category>gitbash</category>
    </item>
  </channel>
</rss>
