FLEX-BOX | CSS GRID |

REACT
CONCEITO | DIFERENÇAS | APLICAÇÃO
Web Developer - Desenvolvedor -
• É o a pessoa que tem a responsabilidade de escrever códigos bem
estruturados, eficientes e testáveis utilizando as melhores práticas de
desenvolvimento de softwares.
• Criar layout/interface de usuário de sites (FRONT-END) usando
basicamente HTML/CSS/JS. Integrar dados de vários serviços de Back-
end e bancos de dados.
Front-End e Back-End
• O front-end é uma área da programação que se dedica a criar a parte visual e interativa.
Podemos classificar como a parte visual de um site, aquilo que conseguimos interagir.

Trocar imagem

• Exemplos de interações: Quando vc está por exemplo no youtube, você tem a barra de
pesquisa, botões de curtir, se inscrever, etc. Outro exemplo é no mobile, se tiver no
youtube e der duplo clique na tela, vc avança ou recua 10 segundos, quem fez isso? O
programador front-end. Quem trabalha com Front End é responsável por desenvolver por
meio do código uma interface gráfica e, normalmente, com as tecnologias base da Web:
HTML, CSS e JavaScript.
Front-End e Back-End
• Back-end é o um desenvolvedor responsável pelo lado do servidor no desenvolvimento web. Sua tarefa é planejar,
programar, testar e manter a estrutura de códigos que faz a interface de um site com o servidor e o banco de dados.

• Se você quer ser um programador mas não faz muita questão se é back-End ou se é Front-End ou se quer ser Full-
stack.

• Para fins de curiosidade, vocês conhecem alguma plataforma ou Software para

fazer programação?
• Atom – ideal para HTML (Descontinuado)
Notepad++ - suporta codificação em várias linguagens, do ActionScript, CSS, ao Visual
Basic;

• Sublime Text – Suporta Python API

• Dreamweaver – Escreve códigos em qualquer linguagem

• Visual Studio Code - suporta HTML, CSS, JavaScript e PHP

 Todo site precisa ter um
design Responsivo

Flex-box e CSS Grid O design responsivo usa um

layout flexível que se adapta a
diferentes orientações ou
tamanhos de janelas de
O Flex-box e o CSS Grid são ferramentas do CSS criadas para facilitar o visualização.
posicionamento e a manipulação de elementos no HTML.
Portanto, (alteração ao tamanho
das telas que estão sendo
O Flex-box é mais recomendado para ser utilizado quando formos exibidos, como as telas de
celulares e tablets).
trabalhar em apenas uma dimensão, seja ela tanto vertical quanto Assim não precisa criar vários
horizontal. layouts.

Mas isso é feito através de

Já o CSS Grid é para ser aplicado quando formos utilizar elementos em código. Mas para quem não que
duas dimensões (ex. linhas e colunas), como o layout de uma página. sabe nada de código, existe
plataformas que fazem isso
como o wordpress com o plugin
https://ios.org.br/ Foi criado usando algumas sections de Flex-box, Elementor.
Template com plugins Elementor (Wordpress) e woocommerce.
FLEX-BOX
• Flex-box é um método de layout unidimensional para organizar itens em linhas ou colunas. Os
itens flexionam (expandem) para preencher espaço adicional ou encolhem para caber em espaços
menores.

• Para entender melhor as propriedades é necessário: Noções básicas de HTML e uma ideia de
como o CSS funciona.

• Por muito tempo, as únicas ferramentas confiáveis ​compatíveis com vários navegadores
disponíveis para criar layouts CSS eram recursos como flutuadores e posicionamento . Eles
funcionam, mas de certa forma também são limitantes e frustrantes.
• Colocar imagem aqui

Falar sobre responsivo

FLEX-BOX - Possibilidades
Os seguintes projetos de layout simples são facilmente alcançados:

 Centralizar verticalmente um bloco de conteúdo dentro de seu pai.

 Fazer com que todos os filhos de um contêiner ocupem uma quantidade igual da largura/altura
disponível, independentemente de quanta largura/altura esteja disponível.

 Fazendo com que todas as colunas em um layout de várias colunas adotem a mesma altura,
mesmo que contenham uma quantidade diferente de conteúdo.
FLEX-BOX Você verá que temos
um elemento com um
cabeçalho de nível
superior dentro dele e
O flex-box torna muitas tarefas de layout mais fáceis. um elemento de seção
contendo
três contêiner de
linhas.
 Aqui foi definido um valor
especial de display no
FLEX-BOX elemento pai dos
elementos que você
deseja afetar. Usamos o
display flex dentro da
Aqui o mesmo modelo com alterações no código, e o resultado é mostrado
Section.
através de caixas flexíveis.
Isso faz com que se torne
um flex container e seus
filhos se tornem flex
items . O resultado disso
deve ser algo assim:
FLEX-BOX Nesse exemplo foi usado
uma variável de direção
em coluna da Section .
Colunas ou linhas? Isso coloca os itens de
• O Flex-box fornece uma propriedade chamada flex-direction volta em um layout de
coluna.
que especifica em qual direção o eixo principal é executado.
Outras variáveis que
pode-se definir são:
” valor de tamanho
mínimo, alinhar itens
flexíveis, alterar a ordem
de layout e também criar
alguns layouts bastante
complexos com o flexbox.
FLEX-BOX – Froggy CSS game
• Existe um jogo onde você pode ajudar Froggy e seus amigos ao escrever código CSS,
https://flexboxfroggy.com/ nível 1 ao 24. Voce deve usar as propriedades certas.
CSS GRID
• O CSS Grid é um sistema de estruturação de layout que o CSS nos fornece. Diferente do Flex-box,
que apenas nos permite trabalhar em uma única dimensão, o CSS Grid nos permite configurar
layouts em duas dimensões (linhas e colunas). A junção de linhas e colunas formam uma grade, o
que dá o nome a esse sistema (Grid).
• O CSS Grid é bem poderoso e completo, permitindo que certas coisas sejam feitas de mais de uma
maneira.
 A recomendação para

CSS GRID utilização

Grid é para
do CSS
ser
aplicado quando
formos utilizar
elementos em duas
dimensões (ex. linhas
e colunas), como o
layout de uma
página. Já o flexbox é
mais recomendado
para ser utilizado
quando formos
trabalhar em apenas
uma dimensão, seja
ela tanto vertical
quanto horizontal.
CSS GRID – Layout simples e
responsividade
Telas intermediárias Telas Pequenas
Telas grandes (desktop)
(tablet) (smartphone)

Nesse exemplo de Layout, usamos o Flex-box no contêiner do rodapé e o restante com CSS Grid para
todo o restante da página.
CSS GRID
Qual é melhor flex-box ou Grid?
• Cada um tem a sua finalidade, os dois trabalham com a responsividade mas tem sua
particularidade.

• Quando aplicamos, trabalhamos com o Flex-box, o comportamento dele num site por exemplo, ele
vai ter várias seções, e nelas vamos aplicar o flex-box, e ele é trabalhado linha por linha.

• Quando trabalhamos com CSS Grid, basicamente nós podemos estruturar totalmente nosso site e
a fazendo todas as divisões necessárias como, eu comentei, elas vão trabalhar de forma
responsiva.

• Será que CSS Grid substitui a Flex-box? A Resposta é não. Servem para propósitos diferentes. E
muito conveniente usá-los em conjunto. Mas vamos analisar alguns fatos:
Flex-box ou CSS Grid?
1 Com CSS Grid é possível fazer coisas que com o Flex-box não é.
2 Flex-box, faz coisas que CSS Grid não consegue.
3 Por não serem tecnologias concorrentes, podem e devem ser usados juntos.

Para ficar mais fácil essa diferenciação

Flex-box CSS GRID

Unidimencional (Coluna ou Linha) Bidimencional (Coluna e Linha)
À partir do conteúdo
À partir da definição da Grid
Distriuição de espaços
Ocupação de espaços pré-definidos
Indicado para porções de Lay-out
Indicado para Lay-outs complexos
Elementos de UI
Lay-outs mais abrangentes
Requer mais media queries (para se adaptar a
Requer menos media queries (para se adaptar a
responsividade)
responsividade)

A recomendação para utilização do CSS Grid é para ser aplicado quando formos utilizar elementos em
duas dimensões (ex. linhas e colunas), como o layout de uma página.
Flex-box ou CSS Grid?
• Quando se usa Flex-box e CSS Grid para o que foram feitos, essa união de tecnologias só tem a
somar e contribuir para o om desenvolvimento web.

• A recomendação para utilização do CSS Grid é para ser aplicado quando formos utilizar elementos
em duas dimensões (ex. linhas e colunas), como o layout de uma página. Já o flexbox é mais
recomendado para ser utilizado quando formos trabalhar em apenas uma dimensão, seja ela tanto
vertical quanto horizontal.
REACT (Excelente ferramenta de desenvolvimento Front-End)

React é um framework JavaScript criado pelo Facebook (atual Meta) que é usado para criar interfaces de
usuário (UI) em aplicativos web. Ele é popular por ser fácil de usar, altamente flexível e escalável, e é usado
por muitas empresas de tecnologia, incluindo o Facebook, Instagram e Airbnb.

É utilizado com outras bibliotecas para renderização em certos ambientes. Por exemplo, React Native pode
ser usado para construção de aplicativos móveis; React 360 pode ser usado para construir aplicações de
realidade virtual; e muitas outras possibilidades.
• O React é uma biblioteca JavaScript (JS). Ou seja, essa é a principal linguagem de programação que ele
utiliza. Portanto, é muito importante que você conheça JS para conseguir usufruir da agilidade
proporcionada pelo React.

• E possível usar React numa pequena parte do site, com algumas linhas de código e nenhuma ferramenta
de build ou em projetos mais complexos como Sigle-PageApp.

• Para o setup básico de uma aplicação react, é necessário a importação de duas bibliotecas, a React Dom e
o React.
REACT - Para começar a
utilizar o create-
react-app, você
precisa ter o
• O React, resumidamente, é uma biblioteca para construção de interfaces, muito utilizado Node. js instalado.
em Single Page Applications (SPA), uma arquitetura de front-end que permite que,
quando você altere de uma página para outra na sua aplicação web, não seja necessário
um carregamento completo da mesma, mas sim apenas o conteúdo que é diferente. Isso
além de proporcionar uma experiência mais suave ao usuário, dá uma performance
muito superior.
• E o melhor: tudo isso inteiramente usando JavaScript!
• Sim, o HTML, CSS, comportamentos…toda a interface é codificada usando somente
JavaScript.
 Por exemplo se eu tenho um
botão que é utilizado muito
REACT - Vantagens na aplicação, eu posso criar
um componente com este
botão e utilizá-lo em todos os
• A primeira vantagem é a organização do código. O React segue muito forte o lugares que ele aparece.
conceito de componentização, ou seja, a gente separa o código da aplicação em Futuramente, se eu precisar
pequenos componentes, semelhante ao que fazemos no backend com micro serviços corrigir um bug neste botão,
. eu corrijo no componente e
todos os lugares terão essa
• Outra vantagem é divisão de responsabilidades. Quando usamos React, o front- correção.
end fica somente com a responsabilidade de renderizar a interface corretamente,
enquanto todas as regras de negócio ficam no back-end, que será consumido pelo
React.

• Possibilidade aceitar múltiplos clientes. Isso porquê o React é uma biblioteca-base.

Uma vez que você faça um back-end para suportar uma aplicação ReactJS ou React
Native, facilmente você pode construir o segundo front-end React e usar o mesmo
back-end.
• Um exemplo clássico desse mecanismo em funcionamento é o aparecimento das
curtidas em tempo real no Facebook. A informação muda sem precisar recarregar a
página inteira e acontece em tempo real para o usuário.
REACT – Utilização
Onde não utilizar:
É normal querer utilizar uma tecnologia nova em projetos novos, mas nem
todo projeto novo que você começar precisa ser criado com React.

• Landing Page (Tem o conteúdo fixo). O que mais importa nessas páginas é a rapidez
e o design pra chamar a atenção do usuário.
• Blog. Tem um layout padrão e várias páginas iguais onde só o conteúdo é alterado.
Salvo área de comentários...
 SEO é a sigla de Search
Engine Optimization
REACT - Utilização (otimização de mecanismos
Onde utilizar: de busca)
• Aplicação Web. Uma aplicação web geralmente tem vários estados (globais e
Usa recursos para alcançar
locais), bastante interação com o usuário e bastante regra de negócio que é
executada no navegador. bom posicionamento de
páginas de um site no Google
Mais alguns motivos pelo qual essa ferramenta é realmente incrível e em outros buscadores,
1-Fácil de escrever - A sintaxe utilizada é a JSX, podemos dizer que é um mix de HTML gerando tráfego orgânico.
com JavaScript, duas linguagens tranquilas para o desenvolvedor.
2-Fácil de usar - Além da facilidade de escrita e compreensão, o React tem fácil
usabilidade.
3-Melhor desempenho - Realizar atualizações é muito mais rápido que a manipulação.
4- Amigável para SEO - A velocidade de carregamento de uma página é um fator
importante para a otimização do SEO. Além do mais, é mais amigável para SEO do que
outras bibliotecas JavaScript, possibilitando a criação de interfaces que podem ser
encontradas em vários motores de busca.
5- Suporte a Componente Reutilizável em Java - A possibilidade de reutilização dos
componentes é mais um dos grandes motivos para usar o React. Aproveitar a codificação
já desenvolvida em aplicações anteriores para a criação de novas interfaces representa
uma economia de tempo considerável para o programador.