DEV Community: Andressa Santos

A Mágica do JSX no React: Por Que Usá-lo e Como Ele Funciona

Andressa Santos — Thu, 17 Oct 2024 17:32:38 +0000

Por Que JSX é Tão Importante no React?

Se você está iniciando sua jornada no React, é bem provável que já tenha se deparado com o JSX. Ele é uma parte essencial do ecossistema React, mas pode gerar algumas dúvidas no começo. Afinal, por que usamos essa sintaxe especial dentro do JavaScript?

Neste post, vamos explorar o que torna o JSX tão importante, como ele facilita o desenvolvimento de componentes e por que ele pode tornar o código mais limpo e fácil de manter. Além disso, vou compartilhar alguns exemplos e links úteis para aprofundar seus conhecimentos!

O Que é JSX?

JSX, que significa JavaScript XML, é uma sintaxe que permite escrever elementos de interface diretamente no código JavaScript. Embora possa parecer uma mistura incomum no início, essa abordagem tem várias vantagens para o desenvolvimento com React.

No React, a criação de interfaces é baseada em componentes, e esses componentes muitas vezes contêm tanto a lógica quanto a estrutura visual da página. O JSX foi desenvolvido para tornar esse processo mais intuitivo, permitindo que escrevamos algo que se pareça com HTML dentro do JavaScript, facilitando a construção e visualização de componentes.

Vantagens do JSX

Sintaxe Familiar e Fácil de Ler
Para desenvolvedores que já estão acostumados com HTML e JavaScript, o JSX proporciona uma transição suave. Isso porque a sintaxe se parece muito com HTML, mas ao mesmo tempo permite incluir a lógica do JavaScript dentro das chaves {}. Isso faz com que a criação de componentes seja mais natural e que a lógica e a interface fiquem mais próximas.

Integração Direta com JavaScript

Uma das grandes vantagens do JSX é a capacidade de usar expressões JavaScript diretamente dentro do código JSX. Isso significa que você pode facilmente adicionar lógica condicional, laços, e até funções de renderização dinâmica, tudo isso sem precisar sair do fluxo de criação da interface.

Por exemplo, aqui está um componente que exibe uma saudação baseada em uma variável:

const saudacao = 'Olá, React!';
return <h1>{saudacao}</h1>; // Isso é JSX!

Percebe como a lógica do JavaScript está integrada diretamente no código da interface?

Isso facilita a manipulação dinâmica do conteúdo.

Manutenção Simples e Modularidade

Outra vantagem é que o código JSX é altamente legível e fácil de manter. Como o JSX permite que você visualize a estrutura da interface de forma clara, ele facilita o desenvolvimento de aplicações modulares, onde cada componente é uma unidade independente. Com isso, fica mais fácil tanto para criar novas funcionalidades quanto para corrigir erros ou melhorar o desempenho do código.

Transformação para JavaScript Puro

Vale lembrar que o JSX não é compreendido diretamente pelos navegadores. Ele é transformado em JavaScript puro durante o processo de build, graças a ferramentas como o Babel. Portanto, embora você escreva o código de maneira mais intuitiva, ele acaba sendo convertido em código que os navegadores entendem.

Para entender melhor como essa transformação acontece, recomendo dar uma olhada na documentação oficial do Babel, onde você pode ver exemplos de como o JSX é compilado em JavaScript padrão.

JSX vs. JavaScript Puro

Agora, vamos comparar como seria a criação de um componente React usando JSX e JavaScript puro.

Usando JSX:

const MyComponent = () => {
  return <h1>Olá, React!</h1>;
};

Sem JSX (JavaScript puro):

const MyComponent = () => {
  return React.createElement('h1', null, 'Olá, React!');
};

Como você pode ver, o JSX permite que você escreva algo muito mais próximo ao HTML padrão, o que facilita tanto a leitura quanto a escrita do código. No caso do JavaScript puro, precisamos usar a função React.createElement() , que torna o código mais verboso e menos intuitivo, especialmente em componentes mais complexos.

Quando Evitar JSX?

Embora o JSX traga muitas vantagens, também há casos em que você pode preferir não usá-lo. Por exemplo, se você estiver desenvolvendo uma biblioteca que será utilizada em um ambiente onde o uso do JSX não é prático (como em algumas ferramentas que não suportam Babel) , talvez seja necessário trabalhar diretamente com JavaScript puro.

Na verdade, tudo depende em TI. O que você acha disso?

Além disso, algumas equipes de desenvolvimento podem ter preferências específicas em seus fluxos de trabalho, o que pode influenciar o uso ou não de JSX.

Links Úteis para Aprender Mais Sobre JSX

Se você quiser se aprofundar no assunto e aprender mais sobre como o JSX funciona por debaixo dos panos, aqui estão alguns links recomendados:

Documentação Oficial do React sobre JSX
Transformação de JSX em JavaScript com Babel
Escrevendo marcação com JSX
JavaScript em JSX com chaves

Conclusão

O JSX pode parecer estranho no início, mas à medida que você se acostuma, percebe que ele facilita bastante o desenvolvimento de interfaces com React. Sua sintaxe familiar, integração com JavaScript e capacidade de modularizar componentes tornam o desenvolvimento mais fluido e eficiente.

Se você está apenas começando, recomendo mergulhar de cabeça no JSX. Ele pode parecer uma "mágica" no começo, mas é uma ferramenta poderosa que vai te ajudar a criar aplicações front-end dinâmicas e escaláveis.

Tem alguma dúvida sobre JSX? Ou talvez uma dica sobre como usá-lo de forma mais eficiente? Deixe seu comentário abaixo! 👇

Como ter uma conversa Técnica com pessoas Não Técnicas?

Andressa Santos — Wed, 09 Oct 2024 13:11:18 +0000

Minha professora de português sempre dizia ao final de uma explicação: Fiz-me entender?

Porque se ela não fosse compreendida, não valeria de nada toda aquela explicação!

Já tentou explicar assuntos técnicos para pessoas de outra área e não conseguiu ser compreendido?

Isso é um desafio para qualquer setor, a falta de comunicação atrapalha tempo de entrega e ainda faz tomar caminhos totalmente opostos, caso houvesse um acordo desde do início do que fazer.

Passei por isso diversas vezes, porque não aprendemos de cara abordagem certa. Vai mesmo na tentativa e erro, até entender os melhores caminhos a tomar.

Dentro deste cenário, trouxe uma forma que me ajudou e pode te ajudar também em sua jornada profissional a se comunicar melhor quando o assunto é técnico.

Aqui estão algumas estratégias que poderá aplicar quando precisar resolver problemas de JavaScript e React:

Não se prenda a essas tecnologias. Mas use como base.

🧩 Analogias/comparações: colocar algo familiar para todos é uma ótima maneira de quebrar a complexidade. Por exemplo, posso descrever o DOM do JavaScript como uma "árvore genealógica" de elementos, onde cada nó (elemento) tem "pais", "filhos" e "irmãos". No React, o conceito de "componentes" é como blocos de construção que se encaixam para formar uma interface maior. Ou quem sabe, caixas de brinquedo.

📊Foque no "porquê" e nos benefícios: Em vez de se prender a detalhes técnicos, mostre como essas ferramentas ajudam a resolver problemas do dia a dia. Por exemplo, o React faz com que as páginas da web funcionem mais rápido e de forma mais interativa. Isso melhora a experiência de quem está usando, o que pode levar a mais vendas ou a respostas mais rápidas no suporte.

🔄 Use visualizações e demos simples: Gráficos, fluxogramas e demonstrações rápidas ajudam a visualizar como o código afeta a interface. Ferramentas como o Figma ou mockups rápidos podem ilustrar a transformação que o JavaScript e o React causam na interface.

💡 Simplifique o jargão: Evite termos muito técnicos. Fale de "caixas" e "listas" ao invés de "divs" e "arrays". Isso facilita a compreensão de como elementos se comportam na tela.

📢 Incentive perguntas: Crie um ambiente onde a equipe se sinta à vontade para perguntar. Às vezes, explicar algo de forma simples significa identificar e esclarecer dúvidas que todos têm!

Descomplique as coisas! Não tente parecer mais esperto só porque você fala difícil ou algo do tipo.

Faça-se entender em qualquer lugar que estiver!

Por que alguns desenvolvedores conseguem empregos rapidamente e outros não?

Andressa Santos — Sat, 21 Sep 2024 17:35:28 +0000

Dividi esse artigo em três partes rápidas de compreender como um profissional de tecnologia deve lidar com o mercado de trabalho.

Com um foco mais para o principiantes, pois são os que sentem mais perdidos nesse meio. E muitas vezes desistem dos processos, pois não possuem clareza do processo.

Uma frase que escutei a tempos foi "você é contratado pela sua hard skills mais é demitido pela soft skills". Muitas vezes estamos em divida com um dos lado da balança. E aqui é justamente o lugar para fazer você pensar.

Hard Skills [ o que você sabe de parte técnica?]

Posso te dar alguns pontos que podem estar fazendo você se "perder" do caminho de ser dev.

É importante que esteja disposto a entender algumas demandas de mercado. E observar se você se encaixa nela, ou não.

Primeiro, é essencial que você tenha um bom domínio de pelo menos uma linguagem de programação. Mas qual escolher?

Bem, isso depende um pouco da área em que você deseja trabalhar. Se você está interessado em desenvolvimento web, por exemplo, linguagens como JavaScript, Python, e Ruby são extremamente valorizadas. Para quem curte desenvolvimento mobile, aprender Swift para iOS ou Kotlin para Android pode ser um ótimo caminho.

E nessa parte, seria uma longa conversa. Se duvidar, a principal para o inicio de sua carreira.

Ao escolher uma tecnologia, se torne o melhor nela . Tendo aprofundado os conhecimentos, comece a mesclar com outras techs. Não adianta nada, você super empolgado, começa trilha de JavaScript e depois vai para C#. Gerando confusão e não aprofundando os conhecimentos.

Soft Skills [como você se comporta?]

A primeira delas é a comunicação eficaz [mais importante no meu ponto de vista]. Não adianta ser um excelente programador se você não souber se comunicar bem com sua equipe. No dia a dia de um desenvolvedor, você vai precisar explicar suas ideias, dar e receber feedback, e muitas vezes apresentar suas soluções para pessoas que não têm o mesmo nível de conhecimento técnico que você.

Saber como se expressar de forma clara e objetiva, tanto de forma escrita quanto verbal, é uma habilidade essencial. E lembre-se, comunicação eficaz não é apenas falar, mas também saber ouvir. Pratique explicando seus próprios projetos do **Github **a outras pessoas fora da área.

Em seguida, temos a resolução de problemas. Como desenvolvedor, você será desafiado constantemente a encontrar soluções para problemas complexos. Isso envolve não apenas habilidades técnicas, mas também a capacidade de pensar de forma lógica e analítica.

Eu poderia ficar listando outras aqui, mas sei que retemos informação somente no que convém.

Os tópicos acima já é um bom ponto de partida para saber se tem ou não essas habilidades.

Expectativa do mercado [ será que eu tenho chance com tanta cobrança?]

As empresas buscam flexibilidade e adaptabilidade. O mundo da tecnologia é dinâmico, e as necessidades das empresas mudam rapidamente.

Você pode ser solicitado a aprender uma nova linguagem de programação ou a trabalhar em um projeto que utiliza uma tecnologia com a qual você não está familiarizado.

Mostrar que você é capaz de se adaptar a novas circunstâncias e que está disposto a aprender o que for necessário é um ponto crucial.

Outra expectativa comum é a pro atividade e iniciativa. As empresas não querem apenas alguém que siga ordens, mas sim um desenvolvedor que identifique problemas, sugira melhorias, e esteja sempre procurando formas de agregar valor. Isso pode ser difícil, já que ainda não tem a oportunidade de emprego.

Mas pratique com o que você já fez!

Agora, algumas dicas finais:

Nunca pare de aprender.
Participe da comunidade
Cuide da sua saúde mental.
Seja paciente e perseverante

Se esse artigo te ajudou, ou você queira bater um papo de outras formas como se desenvolver, pode chamar nas minhas redes!

devjunior #developer #tecnologia #carreiraemti #programação

Como usar o BEM na Refatoração de codigos com CSS/Sass

Andressa Santos — Fri, 20 Sep 2024 18:51:25 +0000

𝙃𝙤𝙟𝙚 𝙚𝙝 𝙙𝙞𝙖 𝙙𝙚 𝙢𝙖𝙡𝙙𝙖𝙙𝙚? 𝙣𝙖𝙤 𝙨𝙚𝙞, 𝙨𝙤𝙝 𝙨𝙚𝙞 𝙦𝙪𝙚 𝙫𝙖𝙢𝙤𝙨 𝙛𝙖𝙡𝙖𝙧 𝙙𝙤 𝘽𝙀𝙈!

🌟 Vamos falar sobre algo que pode transformar sua abordagem ao desenvolvimento frontend: 𝙖 𝙚𝙨𝙩𝙞𝙡𝙞𝙯𝙖𝙘𝙖𝙤!

Você já parou para pensar na importância do CSS na experiência do usuário? Se sim, prepare-se para mergulhar no padrão BEM!

BEM, que significa 𝗕𝗹𝗼𝗰𝗸, 𝗘𝗹𝗲𝗺𝗲𝗻𝘁, 𝗠𝗼𝗱𝗶𝗳𝗶𝗲𝗿, é uma metodologia incrível para nomear suas classes em CSS. Pense assim:

𝗕𝗹𝗼𝗰𝗸: A base, como um header ou container.
𝗘𝗹𝗲𝗺𝗲𝗻𝘁: As partes que fazem sentido dentro do bloco, como menu__item.
𝗠𝗼𝗱𝗶𝗳𝗶𝗲𝗿: As variações, como menu--hidden.

𝙋𝙤𝙧 𝙦𝙪𝙚 𝙫𝙤𝙘𝙚̂ 𝙙𝙚𝙫𝙚 𝙪𝙨𝙖𝙧 𝘽𝙀𝙈? Aqui vão algumas razões:

𝗟𝗲𝗴𝗶𝗯𝗶𝗹𝗶𝗱𝗮𝗱𝗲: Suas classes falam por si mesmas, tornando a relação entre CSS e HTML clara.
𝗜𝗻𝗱𝗲𝗽𝗲𝗻𝗱𝗲̂𝗻𝗰𝗶𝗮: Blocos que podem ser reutilizados sem se preocupar com interferências.
𝗦𝗲𝗺 𝗖𝗮𝘀𝗰𝗮𝘁𝗮: Adeus, sobreposições indesejadas!

Imagine que você está trabalhando em uma equipe grande. Com 𝗕𝗘𝗠, 𝗰𝗮𝗱𝗮 𝗱𝗲𝘀𝗲𝗻𝘃𝗼𝗹𝘃𝗲𝗱𝗼𝗿 𝗰𝗼𝗻𝘀𝗲𝗴𝘂𝗲 𝗲𝗻𝘁𝗲𝗻𝗱𝗲𝗿 𝗮 𝗲𝘀𝘁𝗿𝘂𝘁𝘂𝗿𝗮 𝗱𝗼 𝗰𝗼𝗱𝗶𝗴𝗼 𝗿𝗮𝗽𝗶𝗱𝗮𝗺𝗲𝗻𝘁𝗲, sem medo de quebrar estilos.

🔧 E se você está utilizando frameworks como 𝗥𝗲𝗮𝗰𝘁, 𝗩𝘂𝗲 𝗼𝘂 𝗔𝗻𝗴𝘂𝗹𝗮𝗿, BEM se encaixa perfeitamente na sua jornada de componentização, mantendo a consistência e a escalabilidade.

Quer um exemplo prático? Dê uma olhada nesta estrutura de card na imagem com o código

Mesmo sem o CSS, dá para ver a lógica clara por trás da estrutura, certo?

E você deve estar se perguntando: "𝗠𝗮𝘀 𝗲 𝗼 𝗧𝘆𝗽𝗲𝗦𝗰𝗿𝗶𝗽𝘁?" A mágica acontece quando você combina a lógica do TypeScript com a estilização do 𝗕𝗘𝗠.

O resultado? Um 𝘤𝘰𝘥𝘪𝘨𝘰 𝘧𝘳𝘰𝘯𝘵𝘦𝘯𝘥 𝘳𝘰𝘣𝘶𝘴𝘵𝘰, 𝘮𝘢𝘯𝘶𝘵𝘦𝘯𝘪𝘷𝘦𝘭 𝘦 𝘴𝘶𝘱𝘦𝘳 𝘭𝘦𝘨𝘪𝘷𝘦𝘭.

E você já conhecia ou já adotou o 𝗕𝗘𝗠 nos seus códigos? 💪✨

𝘼𝙟𝙪𝙙𝙚 𝙘𝙤𝙢𝙥𝙖𝙧𝙩𝙞𝙡𝙝𝙖𝙣𝙙𝙤 𝙤 𝙥𝙤𝙨𝙩. 𝘾𝙤𝙢𝙚𝙣𝙩𝙚 𝙚 𝙙𝙚𝙞𝙭𝙚 𝙨𝙪𝙖 𝙤𝙥𝙞𝙣𝙞𝙖̃𝙤, 𝙥𝙤𝙞𝙨 𝙢𝙪𝙞𝙩𝙤 𝙞𝙢𝙥𝙤𝙧𝙩𝙖𝙣𝙩𝙚 𝙥𝙖𝙧𝙖 𝙩𝙧𝙖𝙯𝙚𝙧 𝙢𝙖𝙞𝙨 𝙘𝙤𝙞𝙨𝙖𝙨.

Tutorial Fácil de Customização do Perfil do GitHub

Andressa Santos — Thu, 24 Feb 2022 00:02:38 +0000

Esse tutorial tem o objetivo de ajudar as pessoas a desenvolverem seus próprios perfis personalizados do GitHub, de maneira mas simplificada possível

Categorias

Primeiros passos
- Requisitos
- Criando
- Customizando
Link Utilizados

Requisitos

Único requisito para prosseguir nesse tutorial é ter uma conta criada no site GitHub.

Criando

O primeiro passo é criar seu diretório de perfil GitHub. Para isso, clique em + ap lado de sua foto de perfil e após em New Repository

Feito isso, você colocará o nome desse novo repositório. Ele precisa ser necessariamente igual ao seu nome de perfil do GitHub. Como o meu é andressansantos foi esse que coloquei.

Por fim, marque a opção Add a README file e por ultimo, no botão Create

Customizando Readme

Ele veem totalmente vazio ao ser criado.
Nele, você poderá colocar uma breve descrição do que você trabalha/estuda hoje.
Assim como em HTML, o Markdown como liguagem de marcação possuí os mesmos recursos que juntos com o HTML te dão maior flexibilidade.
Por isso, utilize os mesmos quando necessário sabiamente.

A primeira coisa importante é conhecer um pouco de Markdown. E para isso, você poderá acessar o link aqui para ter um tutorial mais completo.

Crie uma breve apresentação, e se quiser coloque emoticons. Poderá utilizar o site EmojiPedia para isso.

Agora, utilizaremos as informações do GitStats, um repositório no GitHub para colocar as estatisticas no nosso perfil.

Comecemos colocando uma < div > e dentro dela, colocaremos a informação do tema que queremos e nosso usuario.

 <img height="180em" src="https://github-readme-stats.vercel.app/api?username=andressansantos&show_icons=true&theme=tokyonight"/>
 <img height="180em" src="https://github-readme-stats.vercel.app/api/top-langs/?username=andressansantos&layout=compact&theme=tokyonight"/>

Não esqueça de mudar no campo username para o nome do seu usuário de GitHub. Na ultima parte, de Theme ao final do código, poderá escolher o que
desejar na pagina do GitStats.

E esse será o resultado:

Adicione as redes sociais, para recrutadores ou outras pessoas queiram entrar em contato com você. Para isso, coloque o código conforme exemplo:

[![Discord](https://img.shields.io/badge/Discord-7289DA?style=for-the-badge&logo=discord&logoColor=white)](https://discord.gg/n9KBKHPA3H)

Nesse código, a primeira parte é o nome da rede, a segunda parte o link no post do Dev.To e a terceira parte o link da sua rede. Nesse meu caso, foi da comunidade no Discord do Ehmuitodrama. Para ter acesso a todos os Badges de redes sociais, acesse ao post completo com mais de 150 Badges no Dev.to

E esse será o resultado ao acabar e colocar o link e verificando no preview.

Agora iremos para a última parte que é adicionar as tecnologias que estamos aprendendo/dominando/trabalhando. Nessa parte, utilizaremos o site Dev Icon
O código que utilizaremos sempre será o SVG

  <img align="center" alt="Andressa-html" height="30" width="40" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/html5/html5-original.svg"/>

No código passado, colocamos um nome, além de dimensões utilizando a tag img do HTML. A seguir no src, colocando a imagem do SVG

E o resultado será esse:

Veja o resultado completo de como ficará no meu perfil, clicando aqui!
Acesse ao vídeo tutorial no Youtube

Links utilizados

A seguir, listareis todos os sites consultados para a criação de Readme.

Emoticon:

Criação de Gifs ScreenToGif:

Icones Tecnologias:

Post Dev.To de Badges:

Criador de Gif com sua foto:

Repositório do GitHub Stats: