8
WEB FRONT-END & REACT

WEB FRONT˜END & REACT Front-En… · em "background" e altere valores na página sem a necessidade de recarregá-la por completo, melhorando a experiência do usuário. ReactDOM

  • Upload
    others

  • View
    0

  • Download
    0

Embed Size (px)

Citation preview

Page 1: WEB FRONT˜END & REACT Front-En… · em "background" e altere valores na página sem a necessidade de recarregá-la por completo, melhorando a experiência do usuário. ReactDOM

WEB FRONT-END& REACT

Page 2: WEB FRONT˜END & REACT Front-En… · em "background" e altere valores na página sem a necessidade de recarregá-la por completo, melhorando a experiência do usuário. ReactDOM

Aprenda os principais conceitos para desenvolvimento front-end e biblioteca React para criação de web apps. No primeiro mês de curso, ensinaremos as ferramentas para criação da estrutura de uma página web com HTML 5, seu layout gráfico responsivo com CSS 3 e lógica da programação com JavaScript. Já no segundo mês, aprofundaremos em React e suas principais funções e componentes para a criação de interfaces.

INVESTIMENTO

CARGA HORÁRIA

TURMAS*

SOBRE

PRÉ REQUISITO

PRESENCIAL48h SLACK

ILIMITADO

Seg

19h 22h

Qua

Ter

*Turmas iniciam todo começo de mês

Qui

TAMANHO

Máximo de alunos/turma15

19h 22h

Nenhum

em até 5x à vista com 5% de descontoR$2.200R$2.200

Page 3: WEB FRONT˜END & REACT Front-En… · em "background" e altere valores na página sem a necessidade de recarregá-la por completo, melhorando a experiência do usuário. ReactDOM

CONTEÚDO PROGRAMÁTICO

HTML 5Linguagem que utiliza tags ani-nhadas para definir a estrutura-ção básica de uma página Web.

CSS 3As "Cascading Style Sheets" (CSS) tem como função definir a forma-tação da página, como ela deve aparecer para o usuário final.

Identificadores e ClassesFerramentas indispensáveis quando se está formatando uma página completa, permitem uma formatação de páginas muito mais simples.

Imagens e VídeosAdicionar elementos gráficos àsua página é fundamental paradeixá-la mais chamativa e atraente.

Posicionamento de ElementosComo posicionar os elementos dapágina nos locais desejados utilizando as propriedades "margin", "padding" e "posi-tion".

Flexbox e Media QueryUtilizadas para tornar sites responsivos. Cada vez mais as pessoas estão acessan-do sites via smartphone e isto só aumen-ta a demanda por sites que respondam bem independente da orientação da tela.

Page 4: WEB FRONT˜END & REACT Front-En… · em "background" e altere valores na página sem a necessidade de recarregá-la por completo, melhorando a experiência do usuário. ReactDOM

CONTEÚDO PROGRAMÁTICO

JavaScriptLinguagem de programação que permite definir algumas funções dentro das páginas que são desencadeadas através de eventos, permitindo assim tornar seu site interativo e prendendo mais a atenção do usuário, melhorando a visibilidade de sua marca.

AjaxAjax Permite que a página se comunique com bancos de dados em "background" e altere valores na página sem a necessidade de recarregá-la por completo, melhorando a experiência do usuário.

ReactDOMA ponte entre o framework react e as tecnologias web.

JSXLinguagem que alterna HTML e javas-cript para criação de componentes di-nâmicos e reativos.

Renderização de elementosReact na sua página web ou em apenas uma parte de seu HTML.

Componentes a partir de FunçõesComponentes React como funções que renderizam HTML na página.

Page 5: WEB FRONT˜END & REACT Front-En… · em "background" e altere valores na página sem a necessidade de recarregá-la por completo, melhorando a experiência do usuário. ReactDOM

CONTEÚDO PROGRAMÁTICO

Componentes a partir de ClassesPara componentes mais complexos, aproveite os benefícios da orientação a objetos.

Propriedades e EstadoComunicação entre componentes dife-rentes e manutenção e atualização de in-formações dentro de componentes.

Ciclo de Vida do ComponenteFuncionalidades que executam no mo-mento em que o componente é monta-do, desmontado ou renderizado.

EventosManipulação do estado dos componen-tes a partir de cliques, digitação no tecla-do, e demais eventos disponíveis no HTML.

Renderização CondicionalManipulação da renderização de um componente de acordo com o estado. Mostrando ou não informações de acordo com sua necessidade.

Renderização de Múltiplos Elemen-tos por MAPRenderização de listas de componen-tes com facilidade usando a função map().

A importância do Key ao renderizar listasImportância da propriedade key na renderização de listas e a inteligência do React em atualizar apenas o neces-sário dentro do HTML.

Page 6: WEB FRONT˜END & REACT Front-En… · em "background" e altere valores na página sem a necessidade de recarregá-la por completo, melhorando a experiência do usuário. ReactDOM

CONTEÚDO PROGRAMÁTICO

Formulários (entrada de dados)Todos os inputs, radio buttons, e che-ckboxes do HTML estão disponíveis como formas de entrada de dados no React.

Compartilhamento de estados e eventos entre ComponentesPassagem de informações entre com-ponentes e uso de funcionalidades de um componente pai de dentro de um compomente filho.

FragmentsReact precisa de um nó raiz em cada componente, mas podemos escapar da limitação usando fragment.

PropTypesTipagem forte e estática em proprie-dades.

Hooks (useState, useEffect, useCon-text)Hooks são o que há de mais moderno no React, possibilitando que compo-nentes do tipo função sejam tão pode-rosos quanto os do tipo classe e mani-pulem estados de formas avançadas.

Page 7: WEB FRONT˜END & REACT Front-En… · em "background" e altere valores na página sem a necessidade de recarregá-la por completo, melhorando a experiência do usuário. ReactDOM

DIFERENCIAIS LET’S CODE

Imersão de conteúdocom metodologia baseada em projetos

Resumo da aula digital e projetos exclusivos

Utilizamos cases reais em sala de aula

Somos rápidos e entendemos suas necessidades

EXPERIÊNCIAHANDS-ON

CONEXÃOCOM MERCADO

ATENDIMENTOLET'S CODE

CUSTOMIZAÇÃOPOR TURMA

Page 8: WEB FRONT˜END & REACT Front-En… · em "background" e altere valores na página sem a necessidade de recarregá-la por completo, melhorando a experiência do usuário. ReactDOM

[email protected] (11) 99409-9088(11) 2609-3807

MARQUE UM BATE-PAPOE GANHE 5% DE DESCONTO

Rua Gumercindo Saraiva, 2Jardim Europa - SP

UNIDADE I

Av Faria Lima, 13064º andar - SP

UNIDADE II