Por que Web Front-End & React?
Já imaginou criar web apps da forma que quiser e com o layout que deseja? Nesse curso você aprenderá os principais conceitos para o desenvolvimento front-end e a biblioteca React para a criação do seu site. No início do curso abordaremos 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. Na sequência, aprofundaremos em React e suas principais funções e componentes para a criação de interfaces.
O que aprenderei neste curso?
Ícone ilustrativo de nivelamento
Nível

Básico/Intermediário
Ícone ilustrativo de relógio
Duração

3 meses
Ícone ilustrativo de formato
Formato

Presencial ou Remoto
Ícone ilustrativo de investimento
Investimento

10x R$ 400
Saiba Mais
Ícone do Input name
Ícone do Input email
Ícone do Input phone

Conteúdo
Programático

HTML 5
Linguagem que utiliza tags aninhadas para definir a estruturação básica de uma página Web.
CSS 3
As 'Cascading Style Sheets' (CSS) tem como função definir a formatação da página, como ela deve aparecer para o usuário final.
Identificadores e Classes
Ferramentas indispensáveis quando se está formatando uma página completa, permitem uma formatação de páginas muito mais simples.
Imagens e Vídeos
Adicionar elementos gráficos à sua página é fundamental para deixá-la mais chamativa e atraente.
Posicionamento de Elementos
Como posicionar os elementos da página nos locais desejados utilizando as propriedades 'margin', 'padding' e 'position'.
Flexbox e Media Query
Utilizadas para tornar sites responsivos. Cada vez mais as pessoas estão acessando sites via smartphone e isto só aumenta a demanda por sites que respondam bem independente da orientação da tela.
JavaScript
Linguagem 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.
Ajax
Ajax 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.
ReactDOM
A ponte entre o framework react e as tecnologias web.
JSX
Linguagem que alterna HTML e javascript para criação de componentes dinâmicos e reativos.
Renderização de elementos
React na sua página web ou em apenas uma parte de seu HTML.
Componentes a partir de Funções
Componentes React como funções que renderizam HTML na página.
Componentes a partir de Classes
Para componentes mais complexos, aproveite os benef ícios da orientação a objetos.
Propriedades e Estado
Comunicação entre componentes diferentes e manutenção e atualização de informações dentro de componentes.
Ciclo de Vida do Componente
Funcionalidades que executam no momento em que o componente é montado, desmontado ou renderizado.
Eventos
Manipulação do estado dos componentes a partir de cliques, digitação no teclado, e demais eventos disponíveis no HTML.
Renderização Condicional
Manipulaçã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 Elementos por MAP
Renderização de listas de componentes com facilidade usando a função map().
A importância do Key ao renderizar listas
Importância da propriedade key na renderização de listas e a inteligência do React em atualizar apenas o necessário dentro do HTML.
Formulários (entrada de dados)
Todos os inputs, radio buttons, e checkboxes do HTML estão disponíveis como formas de entrada de dados no React.
Compartilhamento de estados e eventos entre Componentes
Passagem de informações entre componentes e uso de funcionalidades de um componente pai de dentro de um compomente filho.
Fragments
React precisa de um nó raiz em cada componente, mas podemos escapar da limitação usando fragment.
PropTypes
Tipagem forte e estática em propriedades.
Hooks (useState, useEffect, useContext)
Hooks são o que há de mais moderno no React, possibilitando que componentes do tipo função sejam tão poderosos quanto os do tipo classe e manipulem estados de formas avançadas.
"Para mim a Let's Code é impecável"
Assista agora!

Diferenciais

Ícone ilustrativo de NPS
Índice de Satisfação (NPS)
Net Promoter Score é muito valorizado dentro da Let's Code como um ótimo indicador de satisfação de nossos clientes. Ao longo dos nossos quatro anos e mais de 4 mil alunos, temos um NPS -muito positivo- de 72, resultado de alunos extremamente satisfeitos com nosso serviço. As principais menções estão relacionadas à qualidade dos nossos coders e conteúdos. Queremos cada vez mais tornar a sua jornada conosco única!
Ícone ilustrativo do nosso time
Nossos Coders
Professores com alta qualificação a disposição para auxiliar você presencialmente ou através dos plantões, acompanhando sua evolução ao longo do curso e proporcionando todo o suporte necessário.
Ícone ilustrativo de nossa infraestrutura
Infraestrutura Let's Code
O ambiente físico da Let's Code é descontraído, dinâmico e tech. Focamos em uma metodologia de ensino moderna, mesas divididas em squads e com alta interatividade. Nosso espaço é um exemplo da nossa principal cultura, uma escola de aluno para alunos. Buscamos modernizar e evoluir a educação!
Ícone ilustrativo da nossa plataforma de ensino
Class, nossa plataforma de ensino
Plataforma de ensino digital para maximizar sua experiência ao longo do curso. Nossa metodologia hands-on proporciona imersão de conteúdo com diversos projetos num ambiente desenvolvido pelos nossos coders. Oferecemos um fórum e chat, nos quais você pode encontrar perguntas e respostas com votação no formato do Stack Overflow. A plataforma também contém atividades e exercícios para treino e fixação do conteúdo.
FAQ
1.
Como funciona o modelo remoto?
O aluno pode escolher em realizar as aulas presencialmente ou assistir remotamente de maneira síncrona ("ao vivo").
2.
Nunca programei antes, eu consigo acompanhar o curso?
Nós desenhamos esse curso para seu primeiro contato na linguagem e temos muita experiência com pessoas que nunca programaram antes. Importante ressaltar que programação é treino, portanto, dedique-se nesses dois meses e aproveite ao máximo a experiência com nossos coders.
3.
Existe algum acompanhamento online?
Sim! Temos nossa plataforma, Class, para auxiliar sua jornada ao longo do curso. Você encontrará além do material de aula, exercícios para praticar, um chat de comunicação com nossos coders, um fórum de perguntas e respostas e muito mais! Aproveite também nossa comunidade para fazer networking.
4.
Qual é a carga horária deste curso?
O curso tem uma carga horária de 72 horas distribuídas ao longo de 3 meses.
5.
Quais são as formas de pagamento?
Você pode pagar no cartão de crédito, débito ou transferência bancária. As condições de pagamento e descontos variam de acordo com a forma de pagamento. Entre em contato se precisar de maiores informações.
6.
Como é formato de aula ao longo da semana?
As aulas acontecem 2x na semana (segundas e quartas ou terças e quintas) das 19h às 22h. O aluno pode escolher qual dia da semana melhor encaixa em sua agenda.
7.
Eu preciso trazer meu computador para a sala de aula?
Sim. Todos os nossos cursos exigem que você traga o seu próprio computador. Mas não se preocupe, a maior parte dos laptops dão conta do recado.
8.
Tem estacionamento no local?
Sim. Contamos com estacionamento no local para facilitar a entrada do aluno. Além disso, a escola fica a apenas 3 min do metrô Faria Lima.
Ícone de expansão