Postagens

Dev JS para React - Pt 4

Imagem
Fala galera, bora para a quarta parte parte. ⚠️  Se você não viu a terceira parte, comece por  aqui   ⚠️ Hoje vamos criar nossos posts através de listas. E para isso vamos utilizar nosso último código e criar ele através de uma lista, então agora você deve estar se perguntando, como assim uma lista? Vamos imaginar que você precisa carregar uma lista de posts que vieram de seu banco de dados e precisa criar isso de maneira dinâmica, utilizando um loop para criar os posts. Para realizar isso nosso código ficaria como abaixo <html> <head> <style> .post-component { text-align : center ; } .post-header-component { display : flex ; justify-content : center ; } .user-name-description , .post-description-component { padding-left : 9 px ; padding-top : 9 px ; } </style> </...
Postar um comentário
Leia mais

Dev JS para React - Pt 3

Imagem
Fala galera, bora para a terceira parte. ⚠️  Se você não viu a segunda parte, comece por  aqui   ⚠️ Hoje vamos falar sobre como  passar dados entre componentes utilizando o   props. E para isso vamos utilizar nosso último código e duplicar o post que exibimos <html> <head> <style> .post-component { text-align : center ; } .post-header-component { display : flex ; justify-content : center ; } .user-name-description , .post-description-component { padding-left : 9 px ; padding-top : 9 px ; } </style> </head> <body> <div id= "instagramPostApp" ></div> <script src= "https://unpkg.com/react@17/umd/react.development.js" ></script> <script src= "https://unpkg.com/react-dom@17/umd/react-dom.dev...
Postar um comentário
Leia mais

Dev JS para React - Pt 2

Imagem
Fala galera, bora para a segunda parte. ⚠️  Se você não viu a primeira parte, comece por aqui   ⚠️ Hoje vamos falar sobre como construir uma interface através de componentes. E para passar uma visão bem simples do que seriam componentes em uma UI vou utilizar um POST do instagram de modelo para explicar isso. Olha na imagem acima conseguimos perceber que um post do instagram pode ser um componente UI que possui os seguintes elementos: Componente Post Avatar Image Username User Description Post Image Post Description Ou seja um componente é como se fosse uma peça de lego, que é criado por diversas outras peças. E agora que tal colocarmos um pouco de mãos na massa para entender no código. Primeiro vamos abrir o arquivo que criamos no último post e vamos utiliza-lo para que se pareça com o de baixo. Obs : Eu coloquei um css apenas para dar um certo estilo mínimo. <html> <head> <style> .post-component { text-align : ce...
Postar um comentário
Leia mais

Dev JS para React - Pt 1

Imagem
Fala galera, faz um tempo que eu não posto nada aqui, andei um tempo realmente desconectado do desenvolvimento, porém é algo que está tão profundo em minha alma e personalidade que não consigo evitar, sempre a vida me leva de encontro. E sabe nos últimos tempos eu tenho visto uma caralhada de tutoriais péssimos e maneiras de ensinar React que realmente parece um chute nas bolas, ainda mais para alguém que tem aquela mente focada em utilizar sempre o jQuery direto da CDN e o Bootstrap também e criando apenas um arquivo JS enorme muitas vezes. E então decido criar aqui um tutorial para que eu possa internalizar melhor os conhecimentos sobre React, espero realmente que isso também auxilie outros programadores a iniciarem a caminhada em direção ao React. Por onde começar? ⚠️ É importante que você tenha um editor (IDE) instalado, caso não possua, você pode baixar o Visual Studio Bora começar construindo nossa página html, que eu dei o nome de hello-world.html , então vamos inserir o seguin...
Postar um comentário
Leia mais