, \, \ e \, intermediários, até o \, que é o menor.
+#### Exemplo de uso:
+```HTML
+
+ Título com h1
+ Título com h2
+ Título com h3
+ Título com h4
+ Título com h5
+ Título com h6
+
+```
+
+
+### Div
+Essa tag é meramente separatória, serve para separar blocos sem ter a semântica de outras tags, como a section. Pode ser útil para facilitar a divisão e estilo de conjuntos de elementos.
+
+#### Exemplo de uso:
+```HTML
+
+
+
+
+
+```
+
+### Section
+Essa tag é semântica, serve para separar blocos de conteúdos relacionados. Por exemplo, poderia ter um título (alguma tag h1,h2...), um parágrafo e uma imagem relacionada ao texto.
+
+#### Exemplo de uso:
+```HTML
+
+ Título da página inteira
+
+ Titulo da seção 1
+ 
+ Texto relacionado à seção 1
+
+
+ Titulo da seção 2
+ 
+ Texto relacionado à seção 2
+
+
+```
+### Nav
+Essa tag é onde a navegação do site fica, geralmente tem links(tag \) para outras partes do site.
+
+#### Exemplo de uso:
+```HTML
+
+
+
+```
+
+### P
+Essa tag representa um parágrafo de texto, onde o texto fica dentro das tags \
+
+#### Exemplo de uso:
+```HTML
+
+
+ Texto em um parágrafo.
+
+
+```
+### Img
+Essa tag representa uma imagem. Para que o navegador saiba de onde encontrar o conteudo da imagem, é necessário o atributo "src" para indicar o caminho.
+#### Exemplo de uso:
+```HTML
+
+ 
+
+```
+
+
+OBS: \![]()
é uma tag que se fecha sozinha, como mostrada no exemplo.
+
+
+### A
+Essa tag é o link para outra página da web, outra página do próprio site ou outra parte do site. Para que o navegador saiba para onde o link vai, o atributo "href" é utilizado. Por padrão, o link é exibido com uma cor azul e tem uma decoração tipica de links no texto.
+
+#### Exemplo de uso:
+```HTML
+
+ Facebook
+ Página 2
+ Seção 2
+
+ Titulo da seção 2
+
+ Texto relacionado à seção 2
+
+
+```
+### Listas
+Aqui vamos falar de 2 tipos de listas no HTML: as listas ordenadas(\) e as listas não ordenadas(\). Ambas representam formas de listar elementos \- (list items), mas as \
tem números em alguma ordem(por padrão é crescente) e as \ tem apenas um símbolo para listar(por padrão é o "·")
+
+#### Exemplo de uso:
+```HTML
+
+ Lista de doces preferidos
+
+ - Chocolate
+ - Caramelo
+ - Bala
+
+ Lista de Países da América do Sul
+
+ - Brasil
+ - Argentina
+ - Uruguai
+
+
+```
+
+
+## Atributos
+Os atributos são utilizados dentro da "tag de abertura", no caso de uma tag que precisa de uma tag para abrir e outra para fechar, ou dentro da única tag, no caso de uma tag que "se fecha sozinha". A sintaxe para colocar os atributos geralmente é: nomedoatributo="valor", onde valor depende do que se quer colocar para o atributo.
+
+### Exemplo:
+```HTML
+
+
+
+
+ 
+
+```
+
+Nos exemplos passados, utilizamos os atributos como src e href, mas agora vamos aprender os principais atributos de algumas tags:
+
+### Atributos Gerais
+
+#### Id
+É um atributo de valor único que serve para identificar o elemento que o possui. Pode ser utilizado depois para se referenciar a esse elemento.
+
+#### Class
+É um atributo como o id, mas é utilizado o mesmo valor para diferentes elementos para agrupá-los em uma classe, para estilizarmos todos de uma vez (vamos ver isso mais tarde no css).
+
+```HTML
+
+
+
+
+```
+
+
+Obs: eles não são obrigatórios.
+
+
+### Atributos de \![]()
+
+#### Src
+É de onde vem a imagem; pode vir dentro do próprio conjunto de pastas ou ainda de um endereço na web.
+#### Alt
+É uma descrição da imagem, serve para quando a imagem não foi carregada ou para quando se usa um leitor de página. Não é obrigatório, porém é altamente recomendado por questões de acessibilidade.
+
+##### Exemplo de Uso:
+```HTML
+
+
+```
+
+### Atributos de \
+
+#### Href
+É para onde o link irá levar. Pode ser um site externo, um arquivo ou página dentro do site ou um elemento por meio de um id.
+
+#### Target
+Qual será o "alvo" do link. Pode ser "_self" para o link abrir na mesma página ou "_blank" para o link abrir em uma nova guia. Não é obrigatório.
+
+##### Exemplo de Uso:
+```HTML
+Minha página 1
+Facebook em outra página
+Seção 2
+
+ Titulo da seção 2
+
+ Texto relacionado à seção 2
+
+```
\ No newline at end of file
diff --git a/Execucao/front-end/react-js/README.md b/Execucao/front-end/react-js/README.md
new file mode 100644
index 00000000..18a599f7
--- /dev/null
+++ b/Execucao/front-end/react-js/README.md
@@ -0,0 +1,20 @@
+# React JS
+
+O react é uma das bibliotecas mais utilizadas atualmente, com o poder de desenvolver desde interfaces web simples até sistemas complexos que integram website, aplicativo e consomem alguma api.
+Construída sobre o Javascript, possibilita a componentização do website.
+
+
+Essa documentação irá assumir que os conceitos básicos de html, css e js apresentadas já são familiares ao leitor
+
+
+Continue:
+
+* [Instalação](instalacao.md)
+
+* [Componentes](componentes.md)
+
+* [Estilizando](estilizando.md)
+
+* [Hooks](hooks.md)
+
+* [Mais sobre](mais-sobre.md)
\ No newline at end of file
diff --git a/Execucao/front-end/react-js/componentes.md b/Execucao/front-end/react-js/componentes.md
new file mode 100644
index 00000000..5a7de3ad
--- /dev/null
+++ b/Execucao/front-end/react-js/componentes.md
@@ -0,0 +1,103 @@
+# Componentes
+
+A componentização é um processo de modularização do web site/app, e está presente em tudo feito com React. Pode ser feita uma analogia com um computador:
+
+
+
+Um computador pode ser dividido, de maneira simplificada, em memória, processador e placa-mãe. Agora imagine se tivéssemos que projetar novamente um processador toda vez que formos produzir um computador novo, o trabalho seria infinitamente mais difícil. Ao invés disso podemos criar apenas uma vez cada peça e apenas replicar ele em qualquer computador.
+
+O mesmo pode ser aplicado ao nosso código de React, ao criar um componente na tela, podemos facilmente utilizar ele em outro trecho de código de maneira simplificada. Imagine replicar o código da navbar em toda página que possuir uma navbar.
+
+## Criando um componente
+
+O React permite que sejam criados componentes a partir de classes, funções e arrow functions. A última maneira é a mais recomendada.
+Um componente pode receber argumentos em sua chamada e deve retornar um único elemento JSX (HTML escrito em javascript):
+
+```js
+// src/components/ComponentName/index.js
+const ComponentName = (props) => {
+ // props são as propriedades recebidas pelo componente
+ return Olá, {props.batata}
+};
+
+export default ComponentName;
+
+
+// src/pages/PageName/index.js
+import ComponentName from "../../components/ComponentName"
+
+const PageName = () => {
+ return(
+
+ Página
+
+ )
+};
+
+export default ComponentName;
+```
+
+A página criada renderizará um HTML semelhante a:
+
+```html
+
+ Página
+ Olá, um nome qualquer
+
+
+```
+
+Observações:
+
+- Pode ser utilizado javascript dentro de um componente, inclusive dentro do JSX ("HTML") se usado `{}` ao redor.
+- O componente recebe um objeto como argumento, contendo todas as propriedades passadas a ele. Pode ser destruturado para melhor legibilidade.
+- Caso deseje-se retornar duas tags irmãs como componente, o React fornece uma tag fantasma, que não será considerada ao construir o HTML:
+
+```js
+const ComponentName = ({ id, batata, ...props }) => {
+ return (
+ <>
+
+
+
+ );
+};
+
+export default ComponentName;
+```
+
+Uma propriedade importante é a children, que passa o interior da tag pra dentro do componente como uma propriedade:
+```js
+const StyledHeader = ({ id, batata, ...props }) => {
+ return (
+
+ {children}
+
+ );
+};
+
+
+const HomePage = () => {
+ return (
+
+ Homepage
+ Aqui é Home
+
+ );
+};
+
+export default HomePage;
+```
+
+O componente HomePage agora vai renderizar um html como:
+```html
+
+ Homepage
+ Aqui é Home
+
+```
+
+
+Aprenda mais com a [documentação oficial](https://reactjs.org/tutorial/tutorial.html).
+Também existe uma [documentação mais recente](https://beta.reactjs.org/learn), que ainda está no beta mas tem didática melhor.
diff --git a/Execucao/front-end/react-js/estilizando.md b/Execucao/front-end/react-js/estilizando.md
new file mode 100644
index 00000000..62d6d6ee
--- /dev/null
+++ b/Execucao/front-end/react-js/estilizando.md
@@ -0,0 +1,60 @@
+# Styled components
+
+Na Struct, usamos a biblioteca `styled-components` para estilizar nossos componentes.
+Para instalar, basta rodar no projeto:
+
+```bash
+yarn add styled-components
+```
+
+
+
+Como material de referência, podendo até editar: https://codesandbox.io/s/styled-components-demo-5ir4oo
+
+
+
+O styled-components nos fornece algumas ferramentas para criar componentes estilizados. Se o componente for uma simples tag HTML estilizada, podemos colocar o estilo diretamente no `index.js` do componente. Quando mais complexo, separamos os estilos no `styles.js`, e usamos eles no index.
+
+```js
+// src/components/button/index.js
+import styled from "styled-components";
+
+const Button = styled.button`
+ background-color: red;
+ font-size: 1.75rem;
+`;
+```
+
+
+
+Para adicionar sintaxe de css e aparência mais bonita, ao invés de ficar o laranja de string, adicionar alguma extensão. No vscode, existe a extensão "styled-components" para tal.
+
+
+
+Podemos também passar propriedades para customizar o estilo. Por exemplo, se o botão na verdade for:
+
+```js
+const Button = styled.button`
+ background-color: ${(props) => props.backgroundColor};
+ font-size: 1.75rem;
+`;
+```
+
+
+
+É boa prática deixar algum valor padrão a ser utilizado caso não seja passado a prop:
+
+`${(props) => props.backgroundColor || "red"}`
+
+
+
+Podemos chamar um botão da cor que quisermos, mantendo os outros estilos:
+
+```js
+
+```
+
+O bloco acima retorna um botão com cor de fundo "cyan".
+
+Saiba mais em:
+https://styled-components.com/docs/basics#getting-started
diff --git a/Execucao/front-end/react-js/hooks.md b/Execucao/front-end/react-js/hooks.md
new file mode 100644
index 00000000..56588cd7
--- /dev/null
+++ b/Execucao/front-end/react-js/hooks.md
@@ -0,0 +1,97 @@
+# Hooks
+
+O react possibilita a criação de componentes. Mas e quando queremos que o html renderizado pelo componente seja atualizado junto com alguma variável do javascript? Nos componentes funcionais (sem ser feitos com classes), usamos os [hooks](https://reactjs.org/docs/hooks-reference.html).
+
+### Um problema:
+
+Queremos fazer um contador, onde sempre que um botão é clicado, um número que aparece na tela aumenta. Porém, podemos ver que isso não funciona:
+
+```jsx
+import { Container } from "./styles";
+
+const Counter = () => {
+ var count = 1;
+
+ const handleCounterIncrement = () => {
+ counter = counter + 1;
+ };
+
+ return (
+
+ Counter: {counter}
+
+
+ );
+};
+export default Counter;
+```
+
+## useState
+
+Função que recebe um estado inicial e retorna uma variável e um setter.
+
+Serve para declarar variáveis com as quais se deseja sincronizar o conteúdo da página. Por exemplo:
+
+```jsx
+import { Container } from "./styles";
+import { useEffect, useState } from "react";
+
+const Counter = () => {
+ const [count, setCount] = useState(0);
+
+ const handleCounterIncrement = () => {
+ setCount(counter + 1);
+ };
+
+ return (
+
+ Count value = {count}
+
+
+ );
+};
+export default Counter;
+```
+
+## useEffect
+
+Função que recebe um callback (arrow function) e um array de dependências. Quando o componente for rerenderizado, se alguma das variáveis do array de dependências tiver mudado, o callback é executado.
+
+Serve principalmente para sincronizar um efeito com alguma mudança de variável. Por [exemplo](https://codesandbox.io/s/hooks-demo-0otg5h):
+
+```jsx
+import { Container } from "./styles";
+import { useEffect, useState } from "react";
+
+const Counter = () => {
+ const [count, setCount] = useState(0);
+
+ // acrescentando um efeito que é disparado na primeira renderização, e depois sempre que count muda:
+ useEffect(() => {
+ console.log(count);
+ if (count === 1) {
+ alert("count === 1 is true");
+ // some logic
+ }
+ }, [count]);
+
+ return (
+
+ Count value = {count}
+
+
+ );
+};
+export default Counter;
+```
+
+Atenção: se o useEffect não tiver array de dependêcia, a partir do react 18, ele roda com a mudança de qualquer estado no componente, o que pode gerar um useEffect rodando infinitamente até crashar seu servidor.
+
+## useContext
+
+Serve para criar um contexto. Considere uma aplicação web inteira que é baseada num usuário logado. Usando o que conhecemos até agora, teríamos que guardar o usuário na raíz da aplicação e passar pra todos os filhos que precisam (praticamente todos) o usuário e funções (como a de login) por _props_.
+Mas e se pudéssemos fazer um estado global, acessível sem ser apenas pelas _props_? É exatamente isso que é o contexto.
+
+Exemplos:
+https://codesandbox.io/s/usecontext-demo-qtugvt?file=/src/contexts/UserContext.js
+https://www.youtube.com/watch?v=Zz4icNdPzTM
\ No newline at end of file
diff --git a/Execucao/front-end/react-js/instalacao.md b/Execucao/front-end/react-js/instalacao.md
new file mode 100644
index 00000000..63c8d9c7
--- /dev/null
+++ b/Execucao/front-end/react-js/instalacao.md
@@ -0,0 +1,118 @@
+# Instalação
+
+Para iniciar um projeto react, precisamos instalar algumas coisas. Primeiro o Node e npm, e depois o yarn (no final desse guia).
+
+## Node e npm
+
+Browsers nativamente tem capacidade de rodar javascrpit. Para rodar javascript localmente, podemos usar o Node.js. Além disso, podemos instalar e controlar o versionamento de pacotes pelo npm (ou yarn, como visto mais a frente).
+Para instalar essas ferramentas, utilizaremos o `nvm` (node version manager)
+
+### Windows
+
+#### windows nvm
+
+Essa não é a mesma coisa que o `nvm`, mas é o recomendado para controlar versão do node para windows.
+
+Basta entrar em [repositório nvm-windows](https://github.com/coreybutler/nvm-windows#installation--upgrades), clicar em "`Download now`", selecionar a última versão e intalar.
+Para verificar a instalação, no terminal digitar:
+
+```bash
+nvm -v
+```
+
+#### node e npm
+
+Para instalar a última versão do node com _long term support_ (_lts_), use:
+
+```bash
+nvm install lts
+```
+
+Esse comando também instala o npm
+
+Para verificar as instalações,
+
+```bash
+node -v
+npm -v
+```
+Que deve ter como outupt algo semelhante a
+```bash
+v16.18.0
+8.19.2
+```
+
+
+### Linux
+
+#### nvm
+
+
+Para instalar, basta rodar no terminal:
+```bash
+sudo apt install curl
+curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash
+```
+
+O script para instalar o nvm cria depende do login do usuário corrente. Por isso, você pode deslogar e logar novamente pra poder utilizar o nvm, ou usar o script:
+
+```bash
+source ~/.bashrc
+```
+
+Para verificar a instalação, rodar
+
+```bash
+nvm --version
+```
+Que deve ter como output algo semelhante a:
+```bash
+0.35.0
+```
+
+
+#### node e npm
+
+Para instalar a última versão do node com _long term support_ (_lts_), use:
+
+```bash
+nvm install --lts
+```
+
+Esse comando também instala o npm
+
+Para verificar as instalações,
+
+```bash
+node -v
+npm -v
+```
+Que deve ter como outupt algo semelhante a
+```bash
+v16.18.0
+8.19.2
+```
+
+## Yarn
+
+O yarn é um gerenciador de pacotes similar ao npm, e é o utilizado em nossa EJ.
+
+### Windows e Linux
+
+Para instalar o yarn basta rodar:
+
+```bash
+npm install --global yarn
+```
+
+E, para verificar a instalação, rode:
+
+```bash
+yarn -v
+```
+
+Output:
+
+```bash
+3.2.2
+```
diff --git a/Execucao/front-end/react-js/mais-sobre.md b/Execucao/front-end/react-js/mais-sobre.md
new file mode 100644
index 00000000..b45fb62a
--- /dev/null
+++ b/Execucao/front-end/react-js/mais-sobre.md
@@ -0,0 +1,64 @@
+# O que realmente é?
+
+Uma biblioteca que fornece `createElement()`, hooks e algumas utilidades a mais. Junto com algum plugin como Babel (ou typescript), converte JSX em `createElement()` e cria um elemento HTML quando chamado. Hooks são as maneiras de manejar o ciclo de vida e renderização do HTML. Ou seja, os hooks são úteis para que, por exemplo, quando uma variável do `useState` mude, o react sabe que o elemento deve ser renderizado novamente para mostrar as mudanças.
+
+## Frameworks / Boilerplates
+
+Não só react, nós usamos [create-react-app](https://create-react-app.dev/). Construído usando webpack, babel e react, vem com uma camada de abstração bem grossa, praticamente não necessitando de configuração.
+
+Por mais que seja a maneira mais fácil de se iniciar no react, é altamente criticado por desenvolvedores por `facilitar más práticas` no gerenciamento e utilização de pacotes e `baixa configurabilidade` (o que dificulta manutenção e atualização). No contexto de nossa empresa, considerou-se que, apesar de seus problemas, vale a pena por ser a maneira mais `fácil de começar` um projeto com react.
+
+## Que outras opções existem?
+
+É sempre possível [configurar sua aplicação web do zero](https://thexcodes.com/crianto-uma-aplicacao-react-do-zero/), mas fica muito código e trabalho repetido entre projetos. Existem frameworks e boilerplates que já vem com a configuração inicial pronta pra isso:
+
+- [Vite](https://vitejs.dev/)
+
+ - Uma `ferramenta de construção` simples, que também inclui um `template` para react com ou sem typescript. Certamente a transição mais fácil de CRA (create-react-app).
+
+ - Possui HMR (hot module reload) otimizado em comparação com CRA (ou seja, `fluxo de desenvolvimento mais rápido`) e usa Esbuild no lugar do Webpack (ou seja, faz `bundling muito mais rápido`). Além disso, possui muitas das features de CRA e possui bons plugins.
+
+- [Next JS](https://nextjs.org/)
+
+ - Um `framework` construído em cima do React e Nodejs, implementando `SSR` (server side render) já por padrão. É um ótimo framework tanto para desenvolvimento `front end` quanto para `full stack`.
+
+ - SSR implica numa otimização do `carregamento inicial` das páginas (independe do pc lixo do usuário, somente do supercomputador usado como servidor), e de apresentação melhor de `metadados`.
+
+
+
+Vite e CRA são `SPA`s (single page applications) e `CSR` (client side rendered), isso `significa` que somente um HTML é dado para o cliente, e o resto do `HTML` é "`injetado`" pelo js `no próprio cliente`. Isso `implica` em `metadados` geralmente `ruins`, já que não se pode confiar no js para essa tarefa. Uma `solução` para esse problema é o `SSR`, já que o conteúdo da página é `injetado no servidor`, e só depois enviado para o cliente um HTML preenchido.
+
+
+
+- [Remix](https://remix.run/)
+
+ - Framework criado pela equipe responsável por React Router. Implementa SSR e o próprio react-router.
+
+---
+
+Menos úteis pra EJ:
+
+- [create-t3-app](https://github.com/t3-oss/create-t3-app)
+
+ - Alguns templates pra nextjs full stack, com configurações e integração de typescript entre algumas bibliotecas.
+
+- [Bun](https://bun.sh/)
+
+ - Será o novo node (aquele que roda código javascript fora do browser), e vai aumentar ainda mais a popularidade do SSR. Está sendo feito buscando compatibilidade máxima com aplicações já feitas. Ainda não está pronto pra produção, mas já tá sendo muito comentado.
+
+
+
+Fontes:
+https://medium.com/codex/you-should-choose-vite-over-cra-for-react-apps-heres-why-47e2e7381d13
+
+https://www.magnolia-cms.com/blog/spa-seo-mission-impossible.html
+
+https://blog.betrybe.com/ferramentas/webpack-tudo-sobre/
+
+https://webpack.js.org/
+
+https://www.youtube.com/c/TheoBrowne1017
+
+Além dos links já fornecidos na página.
+
+
diff --git a/Imagens DocStruct/Projetos/H123456_HTML.png b/Imagens DocStruct/Projetos/H123456_HTML.png
new file mode 100644
index 00000000..0e4f39b8
Binary files /dev/null and b/Imagens DocStruct/Projetos/H123456_HTML.png differ
diff --git a/Imagens DocStruct/Projetos/Lists_HTML.png b/Imagens DocStruct/Projetos/Lists_HTML.png
new file mode 100644
index 00000000..2eadb7b7
Binary files /dev/null and b/Imagens DocStruct/Projetos/Lists_HTML.png differ
diff --git a/Imagens DocStruct/Projetos/Title_HTML.png b/Imagens DocStruct/Projetos/Title_HTML.png
new file mode 100644
index 00000000..7a4a9c9b
Binary files /dev/null and b/Imagens DocStruct/Projetos/Title_HTML.png differ
diff --git a/Imagens DocStruct/Projetos/box_model.png b/Imagens DocStruct/Projetos/box_model.png
new file mode 100644
index 00000000..819c133a
Binary files /dev/null and b/Imagens DocStruct/Projetos/box_model.png differ
diff --git a/Imagens DocStruct/Projetos/computer_components.png b/Imagens DocStruct/Projetos/computer_components.png
new file mode 100644
index 00000000..d8d65767
Binary files /dev/null and b/Imagens DocStruct/Projetos/computer_components.png differ
diff --git a/Imagens DocStruct/Projetos/flexbox-column-align-items.png b/Imagens DocStruct/Projetos/flexbox-column-align-items.png
new file mode 100644
index 00000000..b75df33a
Binary files /dev/null and b/Imagens DocStruct/Projetos/flexbox-column-align-items.png differ
diff --git a/Imagens DocStruct/Projetos/flexbox-column-justify-content.png b/Imagens DocStruct/Projetos/flexbox-column-justify-content.png
new file mode 100644
index 00000000..15262551
Binary files /dev/null and b/Imagens DocStruct/Projetos/flexbox-column-justify-content.png differ
diff --git a/Imagens DocStruct/Projetos/flexbox-row-align-items.png b/Imagens DocStruct/Projetos/flexbox-row-align-items.png
new file mode 100644
index 00000000..19bf84fd
Binary files /dev/null and b/Imagens DocStruct/Projetos/flexbox-row-align-items.png differ
diff --git a/Imagens DocStruct/Projetos/flexbox-row-justify-content.png b/Imagens DocStruct/Projetos/flexbox-row-justify-content.png
new file mode 100644
index 00000000..27ea2a33
Binary files /dev/null and b/Imagens DocStruct/Projetos/flexbox-row-justify-content.png differ
diff --git a/Imagens DocStruct/Projetos/nth-child-even.png b/Imagens DocStruct/Projetos/nth-child-even.png
new file mode 100644
index 00000000..82cf87c9
Binary files /dev/null and b/Imagens DocStruct/Projetos/nth-child-even.png differ
diff --git a/Imagens DocStruct/Projetos/pixel.png b/Imagens DocStruct/Projetos/pixel.png
new file mode 100644
index 00000000..99c47dd2
Binary files /dev/null and b/Imagens DocStruct/Projetos/pixel.png differ
e \, intermediários, até o \, que é o menor.
+#### Exemplo de uso:
+```HTML
+
+ Título com h1
+ Título com h2
+ Título com h3
+ Título com h4
+ Título com h5
+ Título com h6
+
+```
+
+
+### Div
+Essa tag é meramente separatória, serve para separar blocos sem ter a semântica de outras tags, como a section. Pode ser útil para facilitar a divisão e estilo de conjuntos de elementos.
+
+#### Exemplo de uso:
+```HTML
+
+
+
+
+
+```
+
+### Section
+Essa tag é semântica, serve para separar blocos de conteúdos relacionados. Por exemplo, poderia ter um título (alguma tag h1,h2...), um parágrafo e uma imagem relacionada ao texto.
+
+#### Exemplo de uso:
+```HTML
+
+ Título da página inteira
+
+ Titulo da seção 1
+
+ Texto relacionado à seção 1
+
+
+ Titulo da seção 2
+
+ Texto relacionado à seção 2
+
+
+```
+### Nav
+Essa tag é onde a navegação do site fica, geralmente tem links(tag \) para outras partes do site.
+
+#### Exemplo de uso:
+```HTML
+
+
+
+```
+
+### P
+Essa tag representa um parágrafo de texto, onde o texto fica dentro das tags \
+
+#### Exemplo de uso:
+```HTML
+
+
+ Texto em um parágrafo.
+
+
+```
+### Img
+Essa tag representa uma imagem. Para que o navegador saiba de onde encontrar o conteudo da imagem, é necessário o atributo "src" para indicar o caminho.
+#### Exemplo de uso:
+```HTML
+
+
+
+```
+
+
+OBS: \![]()
é uma tag que se fecha sozinha, como mostrada no exemplo.
+
+
+### A
+Essa tag é o link para outra página da web, outra página do próprio site ou outra parte do site. Para que o navegador saiba para onde o link vai, o atributo "href" é utilizado. Por padrão, o link é exibido com uma cor azul e tem uma decoração tipica de links no texto.
+
+#### Exemplo de uso:
+```HTML
+
+ Facebook
+ Página 2
+ Seção 2
+
+ Titulo da seção 2
+
+ Texto relacionado à seção 2
+
+
+```
+### Listas
+Aqui vamos falar de 2 tipos de listas no HTML: as listas ordenadas(\) e as listas não ordenadas(\). Ambas representam formas de listar elementos \- (list items), mas as \
tem números em alguma ordem(por padrão é crescente) e as \ tem apenas um símbolo para listar(por padrão é o "·")
+
+#### Exemplo de uso:
+```HTML
+
+ Lista de doces preferidos
+
+ - Chocolate
+ - Caramelo
+ - Bala
+
+ Lista de Países da América do Sul
+
+ - Brasil
+ - Argentina
+ - Uruguai
+
+
+```
+
+
+## Atributos
+Os atributos são utilizados dentro da "tag de abertura", no caso de uma tag que precisa de uma tag para abrir e outra para fechar, ou dentro da única tag, no caso de uma tag que "se fecha sozinha". A sintaxe para colocar os atributos geralmente é: nomedoatributo="valor", onde valor depende do que se quer colocar para o atributo.
+
+### Exemplo:
+```HTML
+
+
+
+
+
+
+```
+
+Nos exemplos passados, utilizamos os atributos como src e href, mas agora vamos aprender os principais atributos de algumas tags:
+
+### Atributos Gerais
+
+#### Id
+É um atributo de valor único que serve para identificar o elemento que o possui. Pode ser utilizado depois para se referenciar a esse elemento.
+
+#### Class
+É um atributo como o id, mas é utilizado o mesmo valor para diferentes elementos para agrupá-los em uma classe, para estilizarmos todos de uma vez (vamos ver isso mais tarde no css).
+
+```HTML
+
+
+
+
+```
+
+
+Obs: eles não são obrigatórios.
+
+
+### Atributos de \![]()
+
+#### Src
+É de onde vem a imagem; pode vir dentro do próprio conjunto de pastas ou ainda de um endereço na web.
+#### Alt
+É uma descrição da imagem, serve para quando a imagem não foi carregada ou para quando se usa um leitor de página. Não é obrigatório, porém é altamente recomendado por questões de acessibilidade.
+
+##### Exemplo de Uso:
+```HTML
+
+
+```
+
+### Atributos de \
+
+#### Href
+É para onde o link irá levar. Pode ser um site externo, um arquivo ou página dentro do site ou um elemento por meio de um id.
+
+#### Target
+Qual será o "alvo" do link. Pode ser "_self" para o link abrir na mesma página ou "_blank" para o link abrir em uma nova guia. Não é obrigatório.
+
+##### Exemplo de Uso:
+```HTML
+Minha página 1
+Facebook em outra página
+Seção 2
+
+ Titulo da seção 2
+
+ Texto relacionado à seção 2
+
+```
\ No newline at end of file
diff --git a/Execucao/front-end/react-js/README.md b/Execucao/front-end/react-js/README.md
new file mode 100644
index 00000000..18a599f7
--- /dev/null
+++ b/Execucao/front-end/react-js/README.md
@@ -0,0 +1,20 @@
+# React JS
+
+O react é uma das bibliotecas mais utilizadas atualmente, com o poder de desenvolver desde interfaces web simples até sistemas complexos que integram website, aplicativo e consomem alguma api.
+Construída sobre o Javascript, possibilita a componentização do website.
+
+
+Essa documentação irá assumir que os conceitos básicos de html, css e js apresentadas já são familiares ao leitor
+
+
+Continue:
+
+* [Instalação](instalacao.md)
+
+* [Componentes](componentes.md)
+
+* [Estilizando](estilizando.md)
+
+* [Hooks](hooks.md)
+
+* [Mais sobre](mais-sobre.md)
\ No newline at end of file
diff --git a/Execucao/front-end/react-js/componentes.md b/Execucao/front-end/react-js/componentes.md
new file mode 100644
index 00000000..5a7de3ad
--- /dev/null
+++ b/Execucao/front-end/react-js/componentes.md
@@ -0,0 +1,103 @@
+# Componentes
+
+A componentização é um processo de modularização do web site/app, e está presente em tudo feito com React. Pode ser feita uma analogia com um computador:
+
+
+
+Um computador pode ser dividido, de maneira simplificada, em memória, processador e placa-mãe. Agora imagine se tivéssemos que projetar novamente um processador toda vez que formos produzir um computador novo, o trabalho seria infinitamente mais difícil. Ao invés disso podemos criar apenas uma vez cada peça e apenas replicar ele em qualquer computador.
+
+O mesmo pode ser aplicado ao nosso código de React, ao criar um componente na tela, podemos facilmente utilizar ele em outro trecho de código de maneira simplificada. Imagine replicar o código da navbar em toda página que possuir uma navbar.
+
+## Criando um componente
+
+O React permite que sejam criados componentes a partir de classes, funções e arrow functions. A última maneira é a mais recomendada.
+Um componente pode receber argumentos em sua chamada e deve retornar um único elemento JSX (HTML escrito em javascript):
+
+```js
+// src/components/ComponentName/index.js
+const ComponentName = (props) => {
+ // props são as propriedades recebidas pelo componente
+ return Olá, {props.batata}
+};
+
+export default ComponentName;
+
+
+// src/pages/PageName/index.js
+import ComponentName from "../../components/ComponentName"
+
+const PageName = () => {
+ return(
+
+ Página
+
+ )
+};
+
+export default ComponentName;
+```
+
+A página criada renderizará um HTML semelhante a:
+
+```html
+
+ Página
+ Olá, um nome qualquer
+
+
+```
+
+Observações:
+
+- Pode ser utilizado javascript dentro de um componente, inclusive dentro do JSX ("HTML") se usado `{}` ao redor.
+- O componente recebe um objeto como argumento, contendo todas as propriedades passadas a ele. Pode ser destruturado para melhor legibilidade.
+- Caso deseje-se retornar duas tags irmãs como componente, o React fornece uma tag fantasma, que não será considerada ao construir o HTML:
+
+```js
+const ComponentName = ({ id, batata, ...props }) => {
+ return (
+ <>
+
+
+
+ );
+};
+
+export default ComponentName;
+```
+
+Uma propriedade importante é a children, que passa o interior da tag pra dentro do componente como uma propriedade:
+```js
+const StyledHeader = ({ id, batata, ...props }) => {
+ return (
+
+ {children}
+
+ );
+};
+
+
+const HomePage = () => {
+ return (
+
+ Homepage
+ Aqui é Home
+
+ );
+};
+
+export default HomePage;
+```
+
+O componente HomePage agora vai renderizar um html como:
+```html
+
+ Homepage
+ Aqui é Home
+
+```
+
+
+Aprenda mais com a [documentação oficial](https://reactjs.org/tutorial/tutorial.html).
+Também existe uma [documentação mais recente](https://beta.reactjs.org/learn), que ainda está no beta mas tem didática melhor.
diff --git a/Execucao/front-end/react-js/estilizando.md b/Execucao/front-end/react-js/estilizando.md
new file mode 100644
index 00000000..62d6d6ee
--- /dev/null
+++ b/Execucao/front-end/react-js/estilizando.md
@@ -0,0 +1,60 @@
+# Styled components
+
+Na Struct, usamos a biblioteca `styled-components` para estilizar nossos componentes.
+Para instalar, basta rodar no projeto:
+
+```bash
+yarn add styled-components
+```
+
+
+
+Como material de referência, podendo até editar: https://codesandbox.io/s/styled-components-demo-5ir4oo
+
+
+
+O styled-components nos fornece algumas ferramentas para criar componentes estilizados. Se o componente for uma simples tag HTML estilizada, podemos colocar o estilo diretamente no `index.js` do componente. Quando mais complexo, separamos os estilos no `styles.js`, e usamos eles no index.
+
+```js
+// src/components/button/index.js
+import styled from "styled-components";
+
+const Button = styled.button`
+ background-color: red;
+ font-size: 1.75rem;
+`;
+```
+
+
+
+Para adicionar sintaxe de css e aparência mais bonita, ao invés de ficar o laranja de string, adicionar alguma extensão. No vscode, existe a extensão "styled-components" para tal.
+
+
+
+Podemos também passar propriedades para customizar o estilo. Por exemplo, se o botão na verdade for:
+
+```js
+const Button = styled.button`
+ background-color: ${(props) => props.backgroundColor};
+ font-size: 1.75rem;
+`;
+```
+
+
+
+É boa prática deixar algum valor padrão a ser utilizado caso não seja passado a prop:
+
+`${(props) => props.backgroundColor || "red"}`
+
+
+
+Podemos chamar um botão da cor que quisermos, mantendo os outros estilos:
+
+```js
+
+```
+
+O bloco acima retorna um botão com cor de fundo "cyan".
+
+Saiba mais em:
+https://styled-components.com/docs/basics#getting-started
diff --git a/Execucao/front-end/react-js/hooks.md b/Execucao/front-end/react-js/hooks.md
new file mode 100644
index 00000000..56588cd7
--- /dev/null
+++ b/Execucao/front-end/react-js/hooks.md
@@ -0,0 +1,97 @@
+# Hooks
+
+O react possibilita a criação de componentes. Mas e quando queremos que o html renderizado pelo componente seja atualizado junto com alguma variável do javascript? Nos componentes funcionais (sem ser feitos com classes), usamos os [hooks](https://reactjs.org/docs/hooks-reference.html).
+
+### Um problema:
+
+Queremos fazer um contador, onde sempre que um botão é clicado, um número que aparece na tela aumenta. Porém, podemos ver que isso não funciona:
+
+```jsx
+import { Container } from "./styles";
+
+const Counter = () => {
+ var count = 1;
+
+ const handleCounterIncrement = () => {
+ counter = counter + 1;
+ };
+
+ return (
+
+ Counter: {counter}
+
+
+ );
+};
+export default Counter;
+```
+
+## useState
+
+Função que recebe um estado inicial e retorna uma variável e um setter.
+
+Serve para declarar variáveis com as quais se deseja sincronizar o conteúdo da página. Por exemplo:
+
+```jsx
+import { Container } from "./styles";
+import { useEffect, useState } from "react";
+
+const Counter = () => {
+ const [count, setCount] = useState(0);
+
+ const handleCounterIncrement = () => {
+ setCount(counter + 1);
+ };
+
+ return (
+
+ Count value = {count}
+
+
+ );
+};
+export default Counter;
+```
+
+## useEffect
+
+Função que recebe um callback (arrow function) e um array de dependências. Quando o componente for rerenderizado, se alguma das variáveis do array de dependências tiver mudado, o callback é executado.
+
+Serve principalmente para sincronizar um efeito com alguma mudança de variável. Por [exemplo](https://codesandbox.io/s/hooks-demo-0otg5h):
+
+```jsx
+import { Container } from "./styles";
+import { useEffect, useState } from "react";
+
+const Counter = () => {
+ const [count, setCount] = useState(0);
+
+ // acrescentando um efeito que é disparado na primeira renderização, e depois sempre que count muda:
+ useEffect(() => {
+ console.log(count);
+ if (count === 1) {
+ alert("count === 1 is true");
+ // some logic
+ }
+ }, [count]);
+
+ return (
+
+ Count value = {count}
+
+
+ );
+};
+export default Counter;
+```
+
+Atenção: se o useEffect não tiver array de dependêcia, a partir do react 18, ele roda com a mudança de qualquer estado no componente, o que pode gerar um useEffect rodando infinitamente até crashar seu servidor.
+
+## useContext
+
+Serve para criar um contexto. Considere uma aplicação web inteira que é baseada num usuário logado. Usando o que conhecemos até agora, teríamos que guardar o usuário na raíz da aplicação e passar pra todos os filhos que precisam (praticamente todos) o usuário e funções (como a de login) por _props_.
+Mas e se pudéssemos fazer um estado global, acessível sem ser apenas pelas _props_? É exatamente isso que é o contexto.
+
+Exemplos:
+https://codesandbox.io/s/usecontext-demo-qtugvt?file=/src/contexts/UserContext.js
+https://www.youtube.com/watch?v=Zz4icNdPzTM
\ No newline at end of file
diff --git a/Execucao/front-end/react-js/instalacao.md b/Execucao/front-end/react-js/instalacao.md
new file mode 100644
index 00000000..63c8d9c7
--- /dev/null
+++ b/Execucao/front-end/react-js/instalacao.md
@@ -0,0 +1,118 @@
+# Instalação
+
+Para iniciar um projeto react, precisamos instalar algumas coisas. Primeiro o Node e npm, e depois o yarn (no final desse guia).
+
+## Node e npm
+
+Browsers nativamente tem capacidade de rodar javascrpit. Para rodar javascript localmente, podemos usar o Node.js. Além disso, podemos instalar e controlar o versionamento de pacotes pelo npm (ou yarn, como visto mais a frente).
+Para instalar essas ferramentas, utilizaremos o `nvm` (node version manager)
+
+### Windows
+
+#### windows nvm
+
+Essa não é a mesma coisa que o `nvm`, mas é o recomendado para controlar versão do node para windows.
+
+Basta entrar em [repositório nvm-windows](https://github.com/coreybutler/nvm-windows#installation--upgrades), clicar em "`Download now`", selecionar a última versão e intalar.
+Para verificar a instalação, no terminal digitar:
+
+```bash
+nvm -v
+```
+
+#### node e npm
+
+Para instalar a última versão do node com _long term support_ (_lts_), use:
+
+```bash
+nvm install lts
+```
+
+Esse comando também instala o npm
+
+Para verificar as instalações,
+
+```bash
+node -v
+npm -v
+```
+Que deve ter como outupt algo semelhante a
+```bash
+v16.18.0
+8.19.2
+```
+
+
+### Linux
+
+#### nvm
+
+
+Para instalar, basta rodar no terminal:
+```bash
+sudo apt install curl
+curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash
+```
+
+O script para instalar o nvm cria depende do login do usuário corrente. Por isso, você pode deslogar e logar novamente pra poder utilizar o nvm, ou usar o script:
+
+```bash
+source ~/.bashrc
+```
+
+Para verificar a instalação, rodar
+
+```bash
+nvm --version
+```
+Que deve ter como output algo semelhante a:
+```bash
+0.35.0
+```
+
+
+#### node e npm
+
+Para instalar a última versão do node com _long term support_ (_lts_), use:
+
+```bash
+nvm install --lts
+```
+
+Esse comando também instala o npm
+
+Para verificar as instalações,
+
+```bash
+node -v
+npm -v
+```
+Que deve ter como outupt algo semelhante a
+```bash
+v16.18.0
+8.19.2
+```
+
+## Yarn
+
+O yarn é um gerenciador de pacotes similar ao npm, e é o utilizado em nossa EJ.
+
+### Windows e Linux
+
+Para instalar o yarn basta rodar:
+
+```bash
+npm install --global yarn
+```
+
+E, para verificar a instalação, rode:
+
+```bash
+yarn -v
+```
+
+Output:
+
+```bash
+3.2.2
+```
diff --git a/Execucao/front-end/react-js/mais-sobre.md b/Execucao/front-end/react-js/mais-sobre.md
new file mode 100644
index 00000000..b45fb62a
--- /dev/null
+++ b/Execucao/front-end/react-js/mais-sobre.md
@@ -0,0 +1,64 @@
+# O que realmente é?
+
+Uma biblioteca que fornece `createElement()`, hooks e algumas utilidades a mais. Junto com algum plugin como Babel (ou typescript), converte JSX em `createElement()` e cria um elemento HTML quando chamado. Hooks são as maneiras de manejar o ciclo de vida e renderização do HTML. Ou seja, os hooks são úteis para que, por exemplo, quando uma variável do `useState` mude, o react sabe que o elemento deve ser renderizado novamente para mostrar as mudanças.
+
+## Frameworks / Boilerplates
+
+Não só react, nós usamos [create-react-app](https://create-react-app.dev/). Construído usando webpack, babel e react, vem com uma camada de abstração bem grossa, praticamente não necessitando de configuração.
+
+Por mais que seja a maneira mais fácil de se iniciar no react, é altamente criticado por desenvolvedores por `facilitar más práticas` no gerenciamento e utilização de pacotes e `baixa configurabilidade` (o que dificulta manutenção e atualização). No contexto de nossa empresa, considerou-se que, apesar de seus problemas, vale a pena por ser a maneira mais `fácil de começar` um projeto com react.
+
+## Que outras opções existem?
+
+É sempre possível [configurar sua aplicação web do zero](https://thexcodes.com/crianto-uma-aplicacao-react-do-zero/), mas fica muito código e trabalho repetido entre projetos. Existem frameworks e boilerplates que já vem com a configuração inicial pronta pra isso:
+
+- [Vite](https://vitejs.dev/)
+
+ - Uma `ferramenta de construção` simples, que também inclui um `template` para react com ou sem typescript. Certamente a transição mais fácil de CRA (create-react-app).
+
+ - Possui HMR (hot module reload) otimizado em comparação com CRA (ou seja, `fluxo de desenvolvimento mais rápido`) e usa Esbuild no lugar do Webpack (ou seja, faz `bundling muito mais rápido`). Além disso, possui muitas das features de CRA e possui bons plugins.
+
+- [Next JS](https://nextjs.org/)
+
+ - Um `framework` construído em cima do React e Nodejs, implementando `SSR` (server side render) já por padrão. É um ótimo framework tanto para desenvolvimento `front end` quanto para `full stack`.
+
+ - SSR implica numa otimização do `carregamento inicial` das páginas (independe do pc lixo do usuário, somente do supercomputador usado como servidor), e de apresentação melhor de `metadados`.
+
+
+
+Vite e CRA são `SPA`s (single page applications) e `CSR` (client side rendered), isso `significa` que somente um HTML é dado para o cliente, e o resto do `HTML` é "`injetado`" pelo js `no próprio cliente`. Isso `implica` em `metadados` geralmente `ruins`, já que não se pode confiar no js para essa tarefa. Uma `solução` para esse problema é o `SSR`, já que o conteúdo da página é `injetado no servidor`, e só depois enviado para o cliente um HTML preenchido.
+
+
+
+- [Remix](https://remix.run/)
+
+ - Framework criado pela equipe responsável por React Router. Implementa SSR e o próprio react-router.
+
+---
+
+Menos úteis pra EJ:
+
+- [create-t3-app](https://github.com/t3-oss/create-t3-app)
+
+ - Alguns templates pra nextjs full stack, com configurações e integração de typescript entre algumas bibliotecas.
+
+- [Bun](https://bun.sh/)
+
+ - Será o novo node (aquele que roda código javascript fora do browser), e vai aumentar ainda mais a popularidade do SSR. Está sendo feito buscando compatibilidade máxima com aplicações já feitas. Ainda não está pronto pra produção, mas já tá sendo muito comentado.
+
+
+
+Fontes:
+https://medium.com/codex/you-should-choose-vite-over-cra-for-react-apps-heres-why-47e2e7381d13
+
+https://www.magnolia-cms.com/blog/spa-seo-mission-impossible.html
+
+https://blog.betrybe.com/ferramentas/webpack-tudo-sobre/
+
+https://webpack.js.org/
+
+https://www.youtube.com/c/TheoBrowne1017
+
+Além dos links já fornecidos na página.
+
+
diff --git a/Imagens DocStruct/Projetos/H123456_HTML.png b/Imagens DocStruct/Projetos/H123456_HTML.png
new file mode 100644
index 00000000..0e4f39b8
Binary files /dev/null and b/Imagens DocStruct/Projetos/H123456_HTML.png differ
diff --git a/Imagens DocStruct/Projetos/Lists_HTML.png b/Imagens DocStruct/Projetos/Lists_HTML.png
new file mode 100644
index 00000000..2eadb7b7
Binary files /dev/null and b/Imagens DocStruct/Projetos/Lists_HTML.png differ
diff --git a/Imagens DocStruct/Projetos/Title_HTML.png b/Imagens DocStruct/Projetos/Title_HTML.png
new file mode 100644
index 00000000..7a4a9c9b
Binary files /dev/null and b/Imagens DocStruct/Projetos/Title_HTML.png differ
diff --git a/Imagens DocStruct/Projetos/box_model.png b/Imagens DocStruct/Projetos/box_model.png
new file mode 100644
index 00000000..819c133a
Binary files /dev/null and b/Imagens DocStruct/Projetos/box_model.png differ
diff --git a/Imagens DocStruct/Projetos/computer_components.png b/Imagens DocStruct/Projetos/computer_components.png
new file mode 100644
index 00000000..d8d65767
Binary files /dev/null and b/Imagens DocStruct/Projetos/computer_components.png differ
diff --git a/Imagens DocStruct/Projetos/flexbox-column-align-items.png b/Imagens DocStruct/Projetos/flexbox-column-align-items.png
new file mode 100644
index 00000000..b75df33a
Binary files /dev/null and b/Imagens DocStruct/Projetos/flexbox-column-align-items.png differ
diff --git a/Imagens DocStruct/Projetos/flexbox-column-justify-content.png b/Imagens DocStruct/Projetos/flexbox-column-justify-content.png
new file mode 100644
index 00000000..15262551
Binary files /dev/null and b/Imagens DocStruct/Projetos/flexbox-column-justify-content.png differ
diff --git a/Imagens DocStruct/Projetos/flexbox-row-align-items.png b/Imagens DocStruct/Projetos/flexbox-row-align-items.png
new file mode 100644
index 00000000..19bf84fd
Binary files /dev/null and b/Imagens DocStruct/Projetos/flexbox-row-align-items.png differ
diff --git a/Imagens DocStruct/Projetos/flexbox-row-justify-content.png b/Imagens DocStruct/Projetos/flexbox-row-justify-content.png
new file mode 100644
index 00000000..27ea2a33
Binary files /dev/null and b/Imagens DocStruct/Projetos/flexbox-row-justify-content.png differ
diff --git a/Imagens DocStruct/Projetos/nth-child-even.png b/Imagens DocStruct/Projetos/nth-child-even.png
new file mode 100644
index 00000000..82cf87c9
Binary files /dev/null and b/Imagens DocStruct/Projetos/nth-child-even.png differ
diff --git a/Imagens DocStruct/Projetos/pixel.png b/Imagens DocStruct/Projetos/pixel.png
new file mode 100644
index 00000000..99c47dd2
Binary files /dev/null and b/Imagens DocStruct/Projetos/pixel.png differ
, que é o menor.
+#### Exemplo de uso:
+```HTML
+
+ Título com h1
+ Título com h2
+ Título com h3
+ Título com h4
+ Título com h5
+ Título com h6
+
+```
+
+
+### Div
+Essa tag é meramente separatória, serve para separar blocos sem ter a semântica de outras tags, como a section. Pode ser útil para facilitar a divisão e estilo de conjuntos de elementos.
+
+#### Exemplo de uso:
+```HTML
+
+
+
+
+
+```
+
+### Section
+Essa tag é semântica, serve para separar blocos de conteúdos relacionados. Por exemplo, poderia ter um título (alguma tag h1,h2...), um parágrafo e uma imagem relacionada ao texto.
+
+#### Exemplo de uso:
+```HTML
+
+ Título da página inteira
+
+ Titulo da seção 1
+
+ Texto relacionado à seção 1
+
+
+ Titulo da seção 2
+
+ Texto relacionado à seção 2
+
+
+```
+### Nav
+Essa tag é onde a navegação do site fica, geralmente tem links(tag \) para outras partes do site.
+
+#### Exemplo de uso:
+```HTML
+
+
+
+```
+
+### P
+Essa tag representa um parágrafo de texto, onde o texto fica dentro das tags \
+
+#### Exemplo de uso:
+```HTML
+
+
+ Texto em um parágrafo.
+
+
+```
+### Img
+Essa tag representa uma imagem. Para que o navegador saiba de onde encontrar o conteudo da imagem, é necessário o atributo "src" para indicar o caminho.
+#### Exemplo de uso:
+```HTML
+
+
+
+```
+
+
+OBS: \![]()
é uma tag que se fecha sozinha, como mostrada no exemplo.
+
+
+### A
+Essa tag é o link para outra página da web, outra página do próprio site ou outra parte do site. Para que o navegador saiba para onde o link vai, o atributo "href" é utilizado. Por padrão, o link é exibido com uma cor azul e tem uma decoração tipica de links no texto.
+
+#### Exemplo de uso:
+```HTML
+
+ Facebook
+ Página 2
+ Seção 2
+
+ Titulo da seção 2
+
+ Texto relacionado à seção 2
+
+
+```
+### Listas
+Aqui vamos falar de 2 tipos de listas no HTML: as listas ordenadas(\) e as listas não ordenadas(\). Ambas representam formas de listar elementos \- (list items), mas as \
tem números em alguma ordem(por padrão é crescente) e as \ tem apenas um símbolo para listar(por padrão é o "·")
+
+#### Exemplo de uso:
+```HTML
+
+ Lista de doces preferidos
+
+ - Chocolate
+ - Caramelo
+ - Bala
+
+ Lista de Países da América do Sul
+
+ - Brasil
+ - Argentina
+ - Uruguai
+
+
+```
+
+
+## Atributos
+Os atributos são utilizados dentro da "tag de abertura", no caso de uma tag que precisa de uma tag para abrir e outra para fechar, ou dentro da única tag, no caso de uma tag que "se fecha sozinha". A sintaxe para colocar os atributos geralmente é: nomedoatributo="valor", onde valor depende do que se quer colocar para o atributo.
+
+### Exemplo:
+```HTML
+
+
+
+
+
+
+```
+
+Nos exemplos passados, utilizamos os atributos como src e href, mas agora vamos aprender os principais atributos de algumas tags:
+
+### Atributos Gerais
+
+#### Id
+É um atributo de valor único que serve para identificar o elemento que o possui. Pode ser utilizado depois para se referenciar a esse elemento.
+
+#### Class
+É um atributo como o id, mas é utilizado o mesmo valor para diferentes elementos para agrupá-los em uma classe, para estilizarmos todos de uma vez (vamos ver isso mais tarde no css).
+
+```HTML
+
+
+
+
+```
+
+
+Obs: eles não são obrigatórios.
+
+
+### Atributos de \![]()
+
+#### Src
+É de onde vem a imagem; pode vir dentro do próprio conjunto de pastas ou ainda de um endereço na web.
+#### Alt
+É uma descrição da imagem, serve para quando a imagem não foi carregada ou para quando se usa um leitor de página. Não é obrigatório, porém é altamente recomendado por questões de acessibilidade.
+
+##### Exemplo de Uso:
+```HTML
+
+
+```
+
+### Atributos de \
+
+#### Href
+É para onde o link irá levar. Pode ser um site externo, um arquivo ou página dentro do site ou um elemento por meio de um id.
+
+#### Target
+Qual será o "alvo" do link. Pode ser "_self" para o link abrir na mesma página ou "_blank" para o link abrir em uma nova guia. Não é obrigatório.
+
+##### Exemplo de Uso:
+```HTML
+Minha página 1
+Facebook em outra página
+Seção 2
+
+ Titulo da seção 2
+
+ Texto relacionado à seção 2
+
+```
\ No newline at end of file
diff --git a/Execucao/front-end/react-js/README.md b/Execucao/front-end/react-js/README.md
new file mode 100644
index 00000000..18a599f7
--- /dev/null
+++ b/Execucao/front-end/react-js/README.md
@@ -0,0 +1,20 @@
+# React JS
+
+O react é uma das bibliotecas mais utilizadas atualmente, com o poder de desenvolver desde interfaces web simples até sistemas complexos que integram website, aplicativo e consomem alguma api.
+Construída sobre o Javascript, possibilita a componentização do website.
+
+
+Essa documentação irá assumir que os conceitos básicos de html, css e js apresentadas já são familiares ao leitor
+
+
+Continue:
+
+* [Instalação](instalacao.md)
+
+* [Componentes](componentes.md)
+
+* [Estilizando](estilizando.md)
+
+* [Hooks](hooks.md)
+
+* [Mais sobre](mais-sobre.md)
\ No newline at end of file
diff --git a/Execucao/front-end/react-js/componentes.md b/Execucao/front-end/react-js/componentes.md
new file mode 100644
index 00000000..5a7de3ad
--- /dev/null
+++ b/Execucao/front-end/react-js/componentes.md
@@ -0,0 +1,103 @@
+# Componentes
+
+A componentização é um processo de modularização do web site/app, e está presente em tudo feito com React. Pode ser feita uma analogia com um computador:
+
+
+
+Um computador pode ser dividido, de maneira simplificada, em memória, processador e placa-mãe. Agora imagine se tivéssemos que projetar novamente um processador toda vez que formos produzir um computador novo, o trabalho seria infinitamente mais difícil. Ao invés disso podemos criar apenas uma vez cada peça e apenas replicar ele em qualquer computador.
+
+O mesmo pode ser aplicado ao nosso código de React, ao criar um componente na tela, podemos facilmente utilizar ele em outro trecho de código de maneira simplificada. Imagine replicar o código da navbar em toda página que possuir uma navbar.
+
+## Criando um componente
+
+O React permite que sejam criados componentes a partir de classes, funções e arrow functions. A última maneira é a mais recomendada.
+Um componente pode receber argumentos em sua chamada e deve retornar um único elemento JSX (HTML escrito em javascript):
+
+```js
+// src/components/ComponentName/index.js
+const ComponentName = (props) => {
+ // props são as propriedades recebidas pelo componente
+ return Olá, {props.batata}
+};
+
+export default ComponentName;
+
+
+// src/pages/PageName/index.js
+import ComponentName from "../../components/ComponentName"
+
+const PageName = () => {
+ return(
+
+ Página
+
+ )
+};
+
+export default ComponentName;
+```
+
+A página criada renderizará um HTML semelhante a:
+
+```html
+
+ Página
+ Olá, um nome qualquer
+
+
+```
+
+Observações:
+
+- Pode ser utilizado javascript dentro de um componente, inclusive dentro do JSX ("HTML") se usado `{}` ao redor.
+- O componente recebe um objeto como argumento, contendo todas as propriedades passadas a ele. Pode ser destruturado para melhor legibilidade.
+- Caso deseje-se retornar duas tags irmãs como componente, o React fornece uma tag fantasma, que não será considerada ao construir o HTML:
+
+```js
+const ComponentName = ({ id, batata, ...props }) => {
+ return (
+ <>
+
+
+
+ );
+};
+
+export default ComponentName;
+```
+
+Uma propriedade importante é a children, que passa o interior da tag pra dentro do componente como uma propriedade:
+```js
+const StyledHeader = ({ id, batata, ...props }) => {
+ return (
+
+ {children}
+
+ );
+};
+
+
+const HomePage = () => {
+ return (
+
+ Homepage
+ Aqui é Home
+
+ );
+};
+
+export default HomePage;
+```
+
+O componente HomePage agora vai renderizar um html como:
+```html
+
+ Homepage
+ Aqui é Home
+
+```
+
+
+Aprenda mais com a [documentação oficial](https://reactjs.org/tutorial/tutorial.html).
+Também existe uma [documentação mais recente](https://beta.reactjs.org/learn), que ainda está no beta mas tem didática melhor.
diff --git a/Execucao/front-end/react-js/estilizando.md b/Execucao/front-end/react-js/estilizando.md
new file mode 100644
index 00000000..62d6d6ee
--- /dev/null
+++ b/Execucao/front-end/react-js/estilizando.md
@@ -0,0 +1,60 @@
+# Styled components
+
+Na Struct, usamos a biblioteca `styled-components` para estilizar nossos componentes.
+Para instalar, basta rodar no projeto:
+
+```bash
+yarn add styled-components
+```
+
+
+
+Como material de referência, podendo até editar: https://codesandbox.io/s/styled-components-demo-5ir4oo
+
+
+
+O styled-components nos fornece algumas ferramentas para criar componentes estilizados. Se o componente for uma simples tag HTML estilizada, podemos colocar o estilo diretamente no `index.js` do componente. Quando mais complexo, separamos os estilos no `styles.js`, e usamos eles no index.
+
+```js
+// src/components/button/index.js
+import styled from "styled-components";
+
+const Button = styled.button`
+ background-color: red;
+ font-size: 1.75rem;
+`;
+```
+
+
+
+Para adicionar sintaxe de css e aparência mais bonita, ao invés de ficar o laranja de string, adicionar alguma extensão. No vscode, existe a extensão "styled-components" para tal.
+
+
+
+Podemos também passar propriedades para customizar o estilo. Por exemplo, se o botão na verdade for:
+
+```js
+const Button = styled.button`
+ background-color: ${(props) => props.backgroundColor};
+ font-size: 1.75rem;
+`;
+```
+
+
+
+É boa prática deixar algum valor padrão a ser utilizado caso não seja passado a prop:
+
+`${(props) => props.backgroundColor || "red"}`
+
+
+
+Podemos chamar um botão da cor que quisermos, mantendo os outros estilos:
+
+```js
+
+```
+
+O bloco acima retorna um botão com cor de fundo "cyan".
+
+Saiba mais em:
+https://styled-components.com/docs/basics#getting-started
diff --git a/Execucao/front-end/react-js/hooks.md b/Execucao/front-end/react-js/hooks.md
new file mode 100644
index 00000000..56588cd7
--- /dev/null
+++ b/Execucao/front-end/react-js/hooks.md
@@ -0,0 +1,97 @@
+# Hooks
+
+O react possibilita a criação de componentes. Mas e quando queremos que o html renderizado pelo componente seja atualizado junto com alguma variável do javascript? Nos componentes funcionais (sem ser feitos com classes), usamos os [hooks](https://reactjs.org/docs/hooks-reference.html).
+
+### Um problema:
+
+Queremos fazer um contador, onde sempre que um botão é clicado, um número que aparece na tela aumenta. Porém, podemos ver que isso não funciona:
+
+```jsx
+import { Container } from "./styles";
+
+const Counter = () => {
+ var count = 1;
+
+ const handleCounterIncrement = () => {
+ counter = counter + 1;
+ };
+
+ return (
+
+ Counter: {counter}
+
+
+ );
+};
+export default Counter;
+```
+
+## useState
+
+Função que recebe um estado inicial e retorna uma variável e um setter.
+
+Serve para declarar variáveis com as quais se deseja sincronizar o conteúdo da página. Por exemplo:
+
+```jsx
+import { Container } from "./styles";
+import { useEffect, useState } from "react";
+
+const Counter = () => {
+ const [count, setCount] = useState(0);
+
+ const handleCounterIncrement = () => {
+ setCount(counter + 1);
+ };
+
+ return (
+
+ Count value = {count}
+
+
+ );
+};
+export default Counter;
+```
+
+## useEffect
+
+Função que recebe um callback (arrow function) e um array de dependências. Quando o componente for rerenderizado, se alguma das variáveis do array de dependências tiver mudado, o callback é executado.
+
+Serve principalmente para sincronizar um efeito com alguma mudança de variável. Por [exemplo](https://codesandbox.io/s/hooks-demo-0otg5h):
+
+```jsx
+import { Container } from "./styles";
+import { useEffect, useState } from "react";
+
+const Counter = () => {
+ const [count, setCount] = useState(0);
+
+ // acrescentando um efeito que é disparado na primeira renderização, e depois sempre que count muda:
+ useEffect(() => {
+ console.log(count);
+ if (count === 1) {
+ alert("count === 1 is true");
+ // some logic
+ }
+ }, [count]);
+
+ return (
+
+ Count value = {count}
+
+
+ );
+};
+export default Counter;
+```
+
+Atenção: se o useEffect não tiver array de dependêcia, a partir do react 18, ele roda com a mudança de qualquer estado no componente, o que pode gerar um useEffect rodando infinitamente até crashar seu servidor.
+
+## useContext
+
+Serve para criar um contexto. Considere uma aplicação web inteira que é baseada num usuário logado. Usando o que conhecemos até agora, teríamos que guardar o usuário na raíz da aplicação e passar pra todos os filhos que precisam (praticamente todos) o usuário e funções (como a de login) por _props_.
+Mas e se pudéssemos fazer um estado global, acessível sem ser apenas pelas _props_? É exatamente isso que é o contexto.
+
+Exemplos:
+https://codesandbox.io/s/usecontext-demo-qtugvt?file=/src/contexts/UserContext.js
+https://www.youtube.com/watch?v=Zz4icNdPzTM
\ No newline at end of file
diff --git a/Execucao/front-end/react-js/instalacao.md b/Execucao/front-end/react-js/instalacao.md
new file mode 100644
index 00000000..63c8d9c7
--- /dev/null
+++ b/Execucao/front-end/react-js/instalacao.md
@@ -0,0 +1,118 @@
+# Instalação
+
+Para iniciar um projeto react, precisamos instalar algumas coisas. Primeiro o Node e npm, e depois o yarn (no final desse guia).
+
+## Node e npm
+
+Browsers nativamente tem capacidade de rodar javascrpit. Para rodar javascript localmente, podemos usar o Node.js. Além disso, podemos instalar e controlar o versionamento de pacotes pelo npm (ou yarn, como visto mais a frente).
+Para instalar essas ferramentas, utilizaremos o `nvm` (node version manager)
+
+### Windows
+
+#### windows nvm
+
+Essa não é a mesma coisa que o `nvm`, mas é o recomendado para controlar versão do node para windows.
+
+Basta entrar em [repositório nvm-windows](https://github.com/coreybutler/nvm-windows#installation--upgrades), clicar em "`Download now`", selecionar a última versão e intalar.
+Para verificar a instalação, no terminal digitar:
+
+```bash
+nvm -v
+```
+
+#### node e npm
+
+Para instalar a última versão do node com _long term support_ (_lts_), use:
+
+```bash
+nvm install lts
+```
+
+Esse comando também instala o npm
+
+Para verificar as instalações,
+
+```bash
+node -v
+npm -v
+```
+Que deve ter como outupt algo semelhante a
+```bash
+v16.18.0
+8.19.2
+```
+
+
+### Linux
+
+#### nvm
+
+
+Para instalar, basta rodar no terminal:
+```bash
+sudo apt install curl
+curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash
+```
+
+O script para instalar o nvm cria depende do login do usuário corrente. Por isso, você pode deslogar e logar novamente pra poder utilizar o nvm, ou usar o script:
+
+```bash
+source ~/.bashrc
+```
+
+Para verificar a instalação, rodar
+
+```bash
+nvm --version
+```
+Que deve ter como output algo semelhante a:
+```bash
+0.35.0
+```
+
+
+#### node e npm
+
+Para instalar a última versão do node com _long term support_ (_lts_), use:
+
+```bash
+nvm install --lts
+```
+
+Esse comando também instala o npm
+
+Para verificar as instalações,
+
+```bash
+node -v
+npm -v
+```
+Que deve ter como outupt algo semelhante a
+```bash
+v16.18.0
+8.19.2
+```
+
+## Yarn
+
+O yarn é um gerenciador de pacotes similar ao npm, e é o utilizado em nossa EJ.
+
+### Windows e Linux
+
+Para instalar o yarn basta rodar:
+
+```bash
+npm install --global yarn
+```
+
+E, para verificar a instalação, rode:
+
+```bash
+yarn -v
+```
+
+Output:
+
+```bash
+3.2.2
+```
diff --git a/Execucao/front-end/react-js/mais-sobre.md b/Execucao/front-end/react-js/mais-sobre.md
new file mode 100644
index 00000000..b45fb62a
--- /dev/null
+++ b/Execucao/front-end/react-js/mais-sobre.md
@@ -0,0 +1,64 @@
+# O que realmente é?
+
+Uma biblioteca que fornece `createElement()`, hooks e algumas utilidades a mais. Junto com algum plugin como Babel (ou typescript), converte JSX em `createElement()` e cria um elemento HTML quando chamado. Hooks são as maneiras de manejar o ciclo de vida e renderização do HTML. Ou seja, os hooks são úteis para que, por exemplo, quando uma variável do `useState` mude, o react sabe que o elemento deve ser renderizado novamente para mostrar as mudanças.
+
+## Frameworks / Boilerplates
+
+Não só react, nós usamos [create-react-app](https://create-react-app.dev/). Construído usando webpack, babel e react, vem com uma camada de abstração bem grossa, praticamente não necessitando de configuração.
+
+Por mais que seja a maneira mais fácil de se iniciar no react, é altamente criticado por desenvolvedores por `facilitar más práticas` no gerenciamento e utilização de pacotes e `baixa configurabilidade` (o que dificulta manutenção e atualização). No contexto de nossa empresa, considerou-se que, apesar de seus problemas, vale a pena por ser a maneira mais `fácil de começar` um projeto com react.
+
+## Que outras opções existem?
+
+É sempre possível [configurar sua aplicação web do zero](https://thexcodes.com/crianto-uma-aplicacao-react-do-zero/), mas fica muito código e trabalho repetido entre projetos. Existem frameworks e boilerplates que já vem com a configuração inicial pronta pra isso:
+
+- [Vite](https://vitejs.dev/)
+
+ - Uma `ferramenta de construção` simples, que também inclui um `template` para react com ou sem typescript. Certamente a transição mais fácil de CRA (create-react-app).
+
+ - Possui HMR (hot module reload) otimizado em comparação com CRA (ou seja, `fluxo de desenvolvimento mais rápido`) e usa Esbuild no lugar do Webpack (ou seja, faz `bundling muito mais rápido`). Além disso, possui muitas das features de CRA e possui bons plugins.
+
+- [Next JS](https://nextjs.org/)
+
+ - Um `framework` construído em cima do React e Nodejs, implementando `SSR` (server side render) já por padrão. É um ótimo framework tanto para desenvolvimento `front end` quanto para `full stack`.
+
+ - SSR implica numa otimização do `carregamento inicial` das páginas (independe do pc lixo do usuário, somente do supercomputador usado como servidor), e de apresentação melhor de `metadados`.
+
+
+
+Vite e CRA são `SPA`s (single page applications) e `CSR` (client side rendered), isso `significa` que somente um HTML é dado para o cliente, e o resto do `HTML` é "`injetado`" pelo js `no próprio cliente`. Isso `implica` em `metadados` geralmente `ruins`, já que não se pode confiar no js para essa tarefa. Uma `solução` para esse problema é o `SSR`, já que o conteúdo da página é `injetado no servidor`, e só depois enviado para o cliente um HTML preenchido.
+
+
+
+- [Remix](https://remix.run/)
+
+ - Framework criado pela equipe responsável por React Router. Implementa SSR e o próprio react-router.
+
+---
+
+Menos úteis pra EJ:
+
+- [create-t3-app](https://github.com/t3-oss/create-t3-app)
+
+ - Alguns templates pra nextjs full stack, com configurações e integração de typescript entre algumas bibliotecas.
+
+- [Bun](https://bun.sh/)
+
+ - Será o novo node (aquele que roda código javascript fora do browser), e vai aumentar ainda mais a popularidade do SSR. Está sendo feito buscando compatibilidade máxima com aplicações já feitas. Ainda não está pronto pra produção, mas já tá sendo muito comentado.
+
+
+
+Fontes:
+https://medium.com/codex/you-should-choose-vite-over-cra-for-react-apps-heres-why-47e2e7381d13
+
+https://www.magnolia-cms.com/blog/spa-seo-mission-impossible.html
+
+https://blog.betrybe.com/ferramentas/webpack-tudo-sobre/
+
+https://webpack.js.org/
+
+https://www.youtube.com/c/TheoBrowne1017
+
+Além dos links já fornecidos na página.
+
+
diff --git a/Imagens DocStruct/Projetos/H123456_HTML.png b/Imagens DocStruct/Projetos/H123456_HTML.png
new file mode 100644
index 00000000..0e4f39b8
Binary files /dev/null and b/Imagens DocStruct/Projetos/H123456_HTML.png differ
diff --git a/Imagens DocStruct/Projetos/Lists_HTML.png b/Imagens DocStruct/Projetos/Lists_HTML.png
new file mode 100644
index 00000000..2eadb7b7
Binary files /dev/null and b/Imagens DocStruct/Projetos/Lists_HTML.png differ
diff --git a/Imagens DocStruct/Projetos/Title_HTML.png b/Imagens DocStruct/Projetos/Title_HTML.png
new file mode 100644
index 00000000..7a4a9c9b
Binary files /dev/null and b/Imagens DocStruct/Projetos/Title_HTML.png differ
diff --git a/Imagens DocStruct/Projetos/box_model.png b/Imagens DocStruct/Projetos/box_model.png
new file mode 100644
index 00000000..819c133a
Binary files /dev/null and b/Imagens DocStruct/Projetos/box_model.png differ
diff --git a/Imagens DocStruct/Projetos/computer_components.png b/Imagens DocStruct/Projetos/computer_components.png
new file mode 100644
index 00000000..d8d65767
Binary files /dev/null and b/Imagens DocStruct/Projetos/computer_components.png differ
diff --git a/Imagens DocStruct/Projetos/flexbox-column-align-items.png b/Imagens DocStruct/Projetos/flexbox-column-align-items.png
new file mode 100644
index 00000000..b75df33a
Binary files /dev/null and b/Imagens DocStruct/Projetos/flexbox-column-align-items.png differ
diff --git a/Imagens DocStruct/Projetos/flexbox-column-justify-content.png b/Imagens DocStruct/Projetos/flexbox-column-justify-content.png
new file mode 100644
index 00000000..15262551
Binary files /dev/null and b/Imagens DocStruct/Projetos/flexbox-column-justify-content.png differ
diff --git a/Imagens DocStruct/Projetos/flexbox-row-align-items.png b/Imagens DocStruct/Projetos/flexbox-row-align-items.png
new file mode 100644
index 00000000..19bf84fd
Binary files /dev/null and b/Imagens DocStruct/Projetos/flexbox-row-align-items.png differ
diff --git a/Imagens DocStruct/Projetos/flexbox-row-justify-content.png b/Imagens DocStruct/Projetos/flexbox-row-justify-content.png
new file mode 100644
index 00000000..27ea2a33
Binary files /dev/null and b/Imagens DocStruct/Projetos/flexbox-row-justify-content.png differ
diff --git a/Imagens DocStruct/Projetos/nth-child-even.png b/Imagens DocStruct/Projetos/nth-child-even.png
new file mode 100644
index 00000000..82cf87c9
Binary files /dev/null and b/Imagens DocStruct/Projetos/nth-child-even.png differ
diff --git a/Imagens DocStruct/Projetos/pixel.png b/Imagens DocStruct/Projetos/pixel.png
new file mode 100644
index 00000000..99c47dd2
Binary files /dev/null and b/Imagens DocStruct/Projetos/pixel.png differ
Titulo da seção 1
+
+ Texto relacionado à seção 1
+Titulo da seção 2
+
+ Texto relacionado à seção 2
+Titulo da seção 2
+
+ Texto relacionado à seção 2
+- ). Ambas representam formas de listar elementos \
- (list items), mas as \
- tem números em alguma ordem(por padrão é crescente) e as \
- Chocolate +
- Caramelo +
- Bala +
- Brasil +
- Argentina +
- Uruguai +
- tem apenas um símbolo para listar(por padrão é o "·")
+
+#### Exemplo de uso:
+```HTML
+
+
Lista de doces preferidos
+-
+
Lista de Países da América do Sul
+-
+
+
+```
+
+Nos exemplos passados, utilizamos os atributos como src e href, mas agora vamos aprender os principais atributos de algumas tags:
+
+### Atributos Gerais
+
+#### Id
+É um atributo de valor único que serve para identificar o elemento que o possui. Pode ser utilizado depois para se referenciar a esse elemento.
+
+#### Class
+É um atributo como o id, mas é utilizado o mesmo valor para diferentes elementos para agrupá-los em uma classe, para estilizarmos todos de uma vez (vamos ver isso mais tarde no css).
+
+```HTML
+
+
+
+
+```
+
+
+Obs: eles não são obrigatórios.
+
+
+### Atributos de \+ +#### Src +É de onde vem a imagem; pode vir dentro do próprio conjunto de pastas ou ainda de um endereço na web. +#### Alt +É uma descrição da imagem, serve para quando a imagem não foi carregada ou para quando se usa um leitor de página. Não é obrigatório, porém é altamente recomendado por questões de acessibilidade. + +##### Exemplo de Uso: +```HTML +
+
+```
+
+### Atributos de \
+
+#### Href
+É para onde o link irá levar. Pode ser um site externo, um arquivo ou página dentro do site ou um elemento por meio de um id.
+
+#### Target
+Qual será o "alvo" do link. Pode ser "_self" para o link abrir na mesma página ou "_blank" para o link abrir em uma nova guia. Não é obrigatório.
+
+##### Exemplo de Uso:
+```HTML
+Minha página 1
+Facebook em outra página
+Seção 2
++ +``` \ No newline at end of file diff --git a/Execucao/front-end/react-js/README.md b/Execucao/front-end/react-js/README.md new file mode 100644 index 00000000..18a599f7 --- /dev/null +++ b/Execucao/front-end/react-js/README.md @@ -0,0 +1,20 @@ +# React JS + +O react é uma das bibliotecas mais utilizadas atualmente, com o poder de desenvolver desde interfaces web simples até sistemas complexos que integram website, aplicativo e consomem alguma api. +Construída sobre o Javascript, possibilita a componentização do website. + + +Essa documentação irá assumir que os conceitos básicos de html, css e js apresentadas já são familiares ao leitor + + +Continue: + +* [Instalação](instalacao.md) + +* [Componentes](componentes.md) + +* [Estilizando](estilizando.md) + +* [Hooks](hooks.md) + +* [Mais sobre](mais-sobre.md) \ No newline at end of file diff --git a/Execucao/front-end/react-js/componentes.md b/Execucao/front-end/react-js/componentes.md new file mode 100644 index 00000000..5a7de3ad --- /dev/null +++ b/Execucao/front-end/react-js/componentes.md @@ -0,0 +1,103 @@ +# Componentes + +A componentização é um processo de modularização do web site/app, e está presente em tudo feito com React. Pode ser feita uma analogia com um computador: + + + +Um computador pode ser dividido, de maneira simplificada, em memória, processador e placa-mãe. Agora imagine se tivéssemos que projetar novamente um processador toda vez que formos produzir um computador novo, o trabalho seria infinitamente mais difícil. Ao invés disso podemos criar apenas uma vez cada peça e apenas replicar ele em qualquer computador. + +O mesmo pode ser aplicado ao nosso código de React, ao criar um componente na tela, podemos facilmente utilizar ele em outro trecho de código de maneira simplificada. Imagine replicar o código da navbar em toda página que possuir uma navbar. + +## Criando um componente + +O React permite que sejam criados componentes a partir de classes, funções e arrow functions. A última maneira é a mais recomendada. +Um componente pode receber argumentos em sua chamada e deve retornar um único elemento JSX (HTML escrito em javascript): + +```js +// src/components/ComponentName/index.js +const ComponentName = (props) => { + // props são as propriedades recebidas pelo componente + returnTitulo da seção 2
+
+ Texto relacionado à seção 2
+Olá, {props.batata}+}; + +export default ComponentName; + + +// src/pages/PageName/index.js +import ComponentName from "../../components/ComponentName" + +const PageName = () => { + return( ++ + ) +}; + +export default ComponentName; +``` + +A página criada renderizará um HTML semelhante a: + +```html +Página
++ + +``` + +Observações: + +- Pode ser utilizado javascript dentro de um componente, inclusive dentro do JSX ("HTML") se usado `{}` ao redor. +- O componente recebe um objeto como argumento, contendo todas as propriedades passadas a ele. Pode ser destruturado para melhor legibilidade. +- Caso deseje-se retornar duas tags irmãs como componente, o React fornece uma tag fantasma, que não será considerada ao construir o HTML: + +```js +const ComponentName = ({ id, batata, ...props }) => { + return ( + <> + + + + ); +}; + +export default ComponentName; +``` + +Uma propriedade importante é a children, que passa o interior da tag pra dentro do componente como uma propriedade: +```js +const StyledHeader = ({ id, batata, ...props }) => { + return ( +Página
+Olá, um nome qualquer+ ++ {children} + + ); +}; + + +const HomePage = () => { + return ( ++ + ); +}; + +export default HomePage; +``` + +O componente HomePage agora vai renderizar um html como: +```html +Homepage
+Aqui é Home
++ +``` + + +Aprenda mais com a [documentação oficial](https://reactjs.org/tutorial/tutorial.html). +Também existe uma [documentação mais recente](https://beta.reactjs.org/learn), que ainda está no beta mas tem didática melhor. diff --git a/Execucao/front-end/react-js/estilizando.md b/Execucao/front-end/react-js/estilizando.md new file mode 100644 index 00000000..62d6d6ee --- /dev/null +++ b/Execucao/front-end/react-js/estilizando.md @@ -0,0 +1,60 @@ +# Styled components + +Na Struct, usamos a biblioteca `styled-components` para estilizar nossos componentes. +Para instalar, basta rodar no projeto: + +```bash +yarn add styled-components +``` + + + +Como material de referência, podendo até editar: https://codesandbox.io/s/styled-components-demo-5ir4oo + + + +O styled-components nos fornece algumas ferramentas para criar componentes estilizados. Se o componente for uma simples tag HTML estilizada, podemos colocar o estilo diretamente no `index.js` do componente. Quando mais complexo, separamos os estilos no `styles.js`, e usamos eles no index. + +```js +// src/components/button/index.js +import styled from "styled-components"; + +const Button = styled.button` + background-color: red; + font-size: 1.75rem; +`; +``` + + + +Para adicionar sintaxe de css e aparência mais bonita, ao invés de ficar o laranja de string, adicionar alguma extensão. No vscode, existe a extensão "styled-components" para tal. + + + +Podemos também passar propriedades para customizar o estilo. Por exemplo, se o botão na verdade for: + +```js +const Button = styled.button` + background-color: ${(props) => props.backgroundColor}; + font-size: 1.75rem; +`; +``` + + + +É boa prática deixar algum valor padrão a ser utilizado caso não seja passado a prop: + +`${(props) => props.backgroundColor || "red"}` + + + +Podemos chamar um botão da cor que quisermos, mantendo os outros estilos: + +```js + +``` + +O bloco acima retorna um botão com cor de fundo "cyan". + +Saiba mais em: +https://styled-components.com/docs/basics#getting-started diff --git a/Execucao/front-end/react-js/hooks.md b/Execucao/front-end/react-js/hooks.md new file mode 100644 index 00000000..56588cd7 --- /dev/null +++ b/Execucao/front-end/react-js/hooks.md @@ -0,0 +1,97 @@ +# Hooks + +O react possibilita a criação de componentes. Mas e quando queremos que o html renderizado pelo componente seja atualizado junto com alguma variável do javascript? Nos componentes funcionais (sem ser feitos com classes), usamos os [hooks](https://reactjs.org/docs/hooks-reference.html). + +### Um problema: + +Queremos fazer um contador, onde sempre que um botão é clicado, um número que aparece na tela aumenta. Porém, podemos ver que isso não funciona: + +```jsx +import { Container } from "./styles"; + +const Counter = () => { + var count = 1; + + const handleCounterIncrement = () => { + counter = counter + 1; + }; + + return ( +Homepage
+Aqui é Home
++ + ); +}; +export default Counter; +``` + +## useState + +Função que recebe um estado inicial e retorna uma variável e um setter. + +Serve para declarar variáveis com as quais se deseja sincronizar o conteúdo da página. Por exemplo: + +```jsx +import { Container } from "./styles"; +import { useEffect, useState } from "react"; + +const Counter = () => { + const [count, setCount] = useState(0); + + const handleCounterIncrement = () => { + setCount(counter + 1); + }; + + return ( +Counter: {counter}
+ ++ + ); +}; +export default Counter; +``` + +## useEffect + +Função que recebe um callback (arrow function) e um array de dependências. Quando o componente for rerenderizado, se alguma das variáveis do array de dependências tiver mudado, o callback é executado. + +Serve principalmente para sincronizar um efeito com alguma mudança de variável. Por [exemplo](https://codesandbox.io/s/hooks-demo-0otg5h): + +```jsx +import { Container } from "./styles"; +import { useEffect, useState } from "react"; + +const Counter = () => { + const [count, setCount] = useState(0); + + // acrescentando um efeito que é disparado na primeira renderização, e depois sempre que count muda: + useEffect(() => { + console.log(count); + if (count === 1) { + alert("count === 1 is true"); + // some logic + } + }, [count]); + + return ( +Count value = {count}
+ ++ + ); +}; +export default Counter; +``` + +Atenção: se o useEffect não tiver array de dependêcia, a partir do react 18, ele roda com a mudança de qualquer estado no componente, o que pode gerar um useEffect rodando infinitamente até crashar seu servidor. + +## useContext + +Serve para criar um contexto. Considere uma aplicação web inteira que é baseada num usuário logado. Usando o que conhecemos até agora, teríamos que guardar o usuário na raíz da aplicação e passar pra todos os filhos que precisam (praticamente todos) o usuário e funções (como a de login) por _props_. +Mas e se pudéssemos fazer um estado global, acessível sem ser apenas pelas _props_? É exatamente isso que é o contexto. + +Exemplos: +https://codesandbox.io/s/usecontext-demo-qtugvt?file=/src/contexts/UserContext.js +https://www.youtube.com/watch?v=Zz4icNdPzTM \ No newline at end of file diff --git a/Execucao/front-end/react-js/instalacao.md b/Execucao/front-end/react-js/instalacao.md new file mode 100644 index 00000000..63c8d9c7 --- /dev/null +++ b/Execucao/front-end/react-js/instalacao.md @@ -0,0 +1,118 @@ +# Instalação + +Para iniciar um projeto react, precisamos instalar algumas coisas. Primeiro o Node e npm, e depois o yarn (no final desse guia). + +## Node e npm + +Browsers nativamente tem capacidade de rodar javascrpit. Para rodar javascript localmente, podemos usar o Node.js. Além disso, podemos instalar e controlar o versionamento de pacotes pelo npm (ou yarn, como visto mais a frente). +Para instalar essas ferramentas, utilizaremos o `nvm` (node version manager) + +### Windows + +#### windows nvm + +Essa não é a mesma coisa que o `nvm`, mas é o recomendado para controlar versão do node para windows. + +Basta entrar em [repositório nvm-windows](https://github.com/coreybutler/nvm-windows#installation--upgrades), clicar em "`Download now`", selecionar a última versão e intalar. +Para verificar a instalação, no terminal digitar: + +```bash +nvm -v +``` + +#### node e npm + +Para instalar a última versão do node com _long term support_ (_lts_), use: + +```bash +nvm install lts +``` + +Esse comando também instala o npm + +Para verificar as instalações, + +```bash +node -v +npm -v +``` +Que deve ter como outupt algo semelhante a +```bash +v16.18.0 +8.19.2 +``` + + +### Linux + +#### nvm + + +Para instalar, basta rodar no terminal: +```bash +sudo apt install curl +curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash +``` + +O script para instalar o nvm cria depende do login do usuário corrente. Por isso, você pode deslogar e logar novamente pra poder utilizar o nvm, ou usar o script: + +```bash +source ~/.bashrc +``` + +Para verificar a instalação, rodar + +```bash +nvm --version +``` +Que deve ter como output algo semelhante a: +```bash +0.35.0 +``` + + +#### node e npm + +Para instalar a última versão do node com _long term support_ (_lts_), use: + +```bash +nvm install --lts +``` + +Esse comando também instala o npm + +Para verificar as instalações, + +```bash +node -v +npm -v +``` +Que deve ter como outupt algo semelhante a +```bash +v16.18.0 +8.19.2 +``` + +## Yarn + +O yarn é um gerenciador de pacotes similar ao npm, e é o utilizado em nossa EJ. + +### Windows e Linux + +Para instalar o yarn basta rodar: + +```bash +npm install --global yarn +``` + +E, para verificar a instalação, rode: + +```bash +yarn -v +``` + +Output: + +```bash +3.2.2 +``` diff --git a/Execucao/front-end/react-js/mais-sobre.md b/Execucao/front-end/react-js/mais-sobre.md new file mode 100644 index 00000000..b45fb62a --- /dev/null +++ b/Execucao/front-end/react-js/mais-sobre.md @@ -0,0 +1,64 @@ +# O que realmente é? + +Uma biblioteca que fornece `createElement()`, hooks e algumas utilidades a mais. Junto com algum plugin como Babel (ou typescript), converte JSX em `createElement()` e cria um elemento HTML quando chamado. Hooks são as maneiras de manejar o ciclo de vida e renderização do HTML. Ou seja, os hooks são úteis para que, por exemplo, quando uma variável do `useState` mude, o react sabe que o elemento deve ser renderizado novamente para mostrar as mudanças. + +## Frameworks / Boilerplates + +Não só react, nós usamos [create-react-app](https://create-react-app.dev/). Construído usando webpack, babel e react, vem com uma camada de abstração bem grossa, praticamente não necessitando de configuração. + +Por mais que seja a maneira mais fácil de se iniciar no react, é altamente criticado por desenvolvedores por `facilitar más práticas` no gerenciamento e utilização de pacotes e `baixa configurabilidade` (o que dificulta manutenção e atualização). No contexto de nossa empresa, considerou-se que, apesar de seus problemas, vale a pena por ser a maneira mais `fácil de começar` um projeto com react. + +## Que outras opções existem? + +É sempre possível [configurar sua aplicação web do zero](https://thexcodes.com/crianto-uma-aplicacao-react-do-zero/), mas fica muito código e trabalho repetido entre projetos. Existem frameworks e boilerplates que já vem com a configuração inicial pronta pra isso: + +- [Vite](https://vitejs.dev/) + + - Uma `ferramenta de construção` simples, que também inclui um `template` para react com ou sem typescript. Certamente a transição mais fácil de CRA (create-react-app). + + - Possui HMR (hot module reload) otimizado em comparação com CRA (ou seja, `fluxo de desenvolvimento mais rápido`) e usa Esbuild no lugar do Webpack (ou seja, faz `bundling muito mais rápido`). Além disso, possui muitas das features de CRA e possui bons plugins. + +- [Next JS](https://nextjs.org/) + + - Um `framework` construído em cima do React e Nodejs, implementando `SSR` (server side render) já por padrão. É um ótimo framework tanto para desenvolvimento `front end` quanto para `full stack`. + + - SSR implica numa otimização do `carregamento inicial` das páginas (independe do pc lixo do usuário, somente do supercomputador usado como servidor), e de apresentação melhor de `metadados`. + + + +Vite e CRA são `SPA`s (single page applications) e `CSR` (client side rendered), isso `significa` que somente um HTML é dado para o cliente, e o resto do `HTML` é "`injetado`" pelo js `no próprio cliente`. Isso `implica` em `metadados` geralmente `ruins`, já que não se pode confiar no js para essa tarefa. Uma `solução` para esse problema é o `SSR`, já que o conteúdo da página é `injetado no servidor`, e só depois enviado para o cliente um HTML preenchido. + + + +- [Remix](https://remix.run/) + + - Framework criado pela equipe responsável por React Router. Implementa SSR e o próprio react-router. + +--- + +Menos úteis pra EJ: + +- [create-t3-app](https://github.com/t3-oss/create-t3-app) + + - Alguns templates pra nextjs full stack, com configurações e integração de typescript entre algumas bibliotecas. + +- [Bun](https://bun.sh/) + + - Será o novo node (aquele que roda código javascript fora do browser), e vai aumentar ainda mais a popularidade do SSR. Está sendo feito buscando compatibilidade máxima com aplicações já feitas. Ainda não está pronto pra produção, mas já tá sendo muito comentado. + + + +Fontes: +https://medium.com/codex/you-should-choose-vite-over-cra-for-react-apps-heres-why-47e2e7381d13 + +https://www.magnolia-cms.com/blog/spa-seo-mission-impossible.html + +https://blog.betrybe.com/ferramentas/webpack-tudo-sobre/ + +https://webpack.js.org/ + +https://www.youtube.com/c/TheoBrowne1017 + +Além dos links já fornecidos na página. + + diff --git a/Imagens DocStruct/Projetos/H123456_HTML.png b/Imagens DocStruct/Projetos/H123456_HTML.png new file mode 100644 index 00000000..0e4f39b8 Binary files /dev/null and b/Imagens DocStruct/Projetos/H123456_HTML.png differ diff --git a/Imagens DocStruct/Projetos/Lists_HTML.png b/Imagens DocStruct/Projetos/Lists_HTML.png new file mode 100644 index 00000000..2eadb7b7 Binary files /dev/null and b/Imagens DocStruct/Projetos/Lists_HTML.png differ diff --git a/Imagens DocStruct/Projetos/Title_HTML.png b/Imagens DocStruct/Projetos/Title_HTML.png new file mode 100644 index 00000000..7a4a9c9b Binary files /dev/null and b/Imagens DocStruct/Projetos/Title_HTML.png differ diff --git a/Imagens DocStruct/Projetos/box_model.png b/Imagens DocStruct/Projetos/box_model.png new file mode 100644 index 00000000..819c133a Binary files /dev/null and b/Imagens DocStruct/Projetos/box_model.png differ diff --git a/Imagens DocStruct/Projetos/computer_components.png b/Imagens DocStruct/Projetos/computer_components.png new file mode 100644 index 00000000..d8d65767 Binary files /dev/null and b/Imagens DocStruct/Projetos/computer_components.png differ diff --git a/Imagens DocStruct/Projetos/flexbox-column-align-items.png b/Imagens DocStruct/Projetos/flexbox-column-align-items.png new file mode 100644 index 00000000..b75df33a Binary files /dev/null and b/Imagens DocStruct/Projetos/flexbox-column-align-items.png differ diff --git a/Imagens DocStruct/Projetos/flexbox-column-justify-content.png b/Imagens DocStruct/Projetos/flexbox-column-justify-content.png new file mode 100644 index 00000000..15262551 Binary files /dev/null and b/Imagens DocStruct/Projetos/flexbox-column-justify-content.png differ diff --git a/Imagens DocStruct/Projetos/flexbox-row-align-items.png b/Imagens DocStruct/Projetos/flexbox-row-align-items.png new file mode 100644 index 00000000..19bf84fd Binary files /dev/null and b/Imagens DocStruct/Projetos/flexbox-row-align-items.png differ diff --git a/Imagens DocStruct/Projetos/flexbox-row-justify-content.png b/Imagens DocStruct/Projetos/flexbox-row-justify-content.png new file mode 100644 index 00000000..27ea2a33 Binary files /dev/null and b/Imagens DocStruct/Projetos/flexbox-row-justify-content.png differ diff --git a/Imagens DocStruct/Projetos/nth-child-even.png b/Imagens DocStruct/Projetos/nth-child-even.png new file mode 100644 index 00000000..82cf87c9 Binary files /dev/null and b/Imagens DocStruct/Projetos/nth-child-even.png differ diff --git a/Imagens DocStruct/Projetos/pixel.png b/Imagens DocStruct/Projetos/pixel.png new file mode 100644 index 00000000..99c47dd2 Binary files /dev/null and b/Imagens DocStruct/Projetos/pixel.png differCount value = {count}
+ +