Primeiras aulas do curso React:Function Components, uma abordagem moderna

React:Function Components, uma abordagem moderna

Iniciando com Functions components - Introdução

Bem-vindo a mais um curso de React aqui na Alura. E nesse curso, a gente vai fazer um simples formulário de cadastro. Mas ele é só simples aqui no visual, ele só parece simples. [00:09] Porque, para fazer ele, a gente vai ver vários conceitos de como trabalhar com formulários, de como trabalhar de uma maneira pouco mais moderna no React.

Até agora a gente já tinha visto o classe componentes, então nós estávamos fazendo os componentes todos baseados em classes, mas, em uma abordagem mais nova e mais recente do React, é a abordagem de componentes funcionais. Então a gente vai usar uma função para declarar um componente.

A gente tem aqui o nosso formulário de cadastro. E como eu falei, ele é só simples na superfície, ele só parece simples. Olha quanta coisa a gente tem aqui dentro desse formulário de cadastro.

Então, algumas coisas que a gente vai usar nesse projeto são: o material ui, para a gente fazer essa interface aqui, uma interface um pouco mais bonita do que a gente já tinha feito anteriormente, já que ele é um design que está pronto para a gente utilizar, ele já vem “leiautando” os nossos componentes de uma maneira muito mais agradável do que só usar o HTML.

E a gente também vai usar a parte de hooks. Então, a gente vai usar, junto com os componentes funcionais, os hooks, que também são uma novidade ali do React.

Então, a gente vai criar esse formulário de cadastro, onde a gente consegue colocar o nosso nome, então, Ricardo. O nosso sobrenome, Bugan, e aí, o nosso CPF. E aí, se eu colocar um CPF que for válido, beleza, ele vai me deixar passar, e ele não vai me dar nenhum erro.

Além disso, eu tenho os meus switches. Eu quero receber promoções, eu só quero receber novidades.

Mas o meu CPF. Se eu colocar o número de dígitos errado, ele já vai me dar o erro. Ele fala que esse campo tem algum erro, e eu vou dar uma olhada nele.

Então, a gente tem toda essa parte de validação, no qual coloca o CPF. É uma validação bem simples, só de dígitos, mas é um jeito que a gente consegue, depois, explorar e ampliar as validações para qualquer formulário que a gente estiver fazendo.

Além disso, a gente tem o nosso evento de cadastrar, que, no final, ele vai vir aqui, se eu cadastrar, ele vai vir com todo o meu estado. Então ele vai trazer todo o estado do meu componente, do meu formulário, para eu conseguir aí, de verdade, se quiser, trabalhar com esses dados e fazer um cadastro de fato. Seja salvando os dados localmente, seja comunicando com uma API.

Então, isso é uma coisa que, no futuro, você consegue fazer, uma vez que você tenha um formulário bem montado.

E aí, para isso, a gente vai também ver alguns conceitos do React. Além da parte de componentes funcionais, e de hooks, no caso aqui a gente vai usar o use statment, vai usar bastante, como dá para ver aqui, a gente também vai ver como funcionou os formulários controlados e os não controlados do React.

E por que tem essa diferença, de eu controlar ou não controlar um formulário, e quais as vantagens, e qual é o recomendado dentro do React.

Então, a gente vai ver um formulário, a gente vai ver como esse formulário é controlado, como eu gerencio o estado dele, como eu valido erros entre formulários, e como a gente usa as novidades do React para componentes baseados em funções.

E a gente, então, vai ter um projetinho, no final, desse formulário aqui, de cadastro, onde a gente pode, depois, reutilizar ele em vários sites.

Eu te espero na aula. Eu sou o Ricardo Bugan, e vou ser o seu instrutor nesse curso.

Iniciando com Functions components - Primeiro Function Component

Bem-vindos a mais um curso de react aqui na Alura. E nesse curso, como a gente viu, a gente vai trabalhar com formulários. Então a gente vai fazer duas coisas: a gente vai começar a trabalhar com formulários, e vamos trabalhar com uma nova maneira de criar componentes lá no nosso react.

Então, para esse curso, projeto novo, estou aqui, acabei de rodar o creat react app, aquele que a gente rodou para criar o nosso primeiro projeto lá no primeiro curso de react, e eu estou com ele criado aqui, então o nosso localhost:3000 já está rodando.

O nosso projeto está aqui aberto no meu Visual Studio, e ele é o padrão que vem pelo creat react app. Então ele criou uma function app para mim, e essa função retorna aqui àquela árvore de renderização que a gente está fazendo.

Então, antes de começar, já vamos começar a tirar as coisas do projeto que ele traz para a gente e que a gente não vai usar. Então, primeiro, eu vou deletar toda essa renderização, já que eu não estou usando ela. Eu vou aproveitar e tirar aqui o nosso local.svg, porque eu também não vou usar ela, e o nosso app.css, eu posso deixar, não tem problema, ele vai ficar aí, já vem com o css padrão.

Mas a gente talvez não use. De qualquer jeito, vou deixar ele por aqui. Outra coisa que a gente não vai usar. A gente não vai usar aqui esse test. Então, o meu app.test, eu vou tirar. Eu não vou usar o meu logo, eu não vou usar o meu servisse worker, e eu não vou usar o setup de testes.

Então, eu vou tirar todos esses arquivos do meu projeto, vou deixar o meu projeto um pouco mais limpo. Vamos salvar isso. E, se a gente for lá, ele está falando que no nosso app.js, na linha sete, ele dá um unexpected token. Ou seja, ele procurou aqui, ele achou um parêntese, e não era o que ele estava esperando.

Por quê? Na nossa função de app, nosso componente de app, ele tem que retornar alguma coisa, tem que renderizar alguma coisa. Então, vamos renderizar um H1. E esse H1 eu vou colocar que é o meu formulário de cadastro.

Se a gente for lá, ele está procurando o service worker, porque o servisse worker está sendo importado lá no nosso projeto, no nosso index.js, e ele tem aqui a importação do servisse worker. Então eu não vou usar mais ele, vou apagar. Se eu não vou usar mais ele, essa parte aqui embaixo também pode ir embora. Não vou precisar mais dela.

Voltando lá, formulário, cadastro. Então, o nosso projeto agora já está limpo, sem as coisas que a gente não vai usar do create react app, e a gente pode começar a trabalhar. E aí, como eu falei, a gente vai trabalhar de uma nova maneira, de uma maneira um pouco diferente, para a gente criar os nossos formulários, para a gente criar os nossos componentes do react, na verdade.

Você pode ver que no nosso app.js, o padrão do creat react app é criar essa função app. E essa função app, no nosso curso anterior, a gente tinha substituído ela por uma classe, então a gente tinha criado uma classe app que estendia o nosso componente, o componente do react.

Então, a gente tinha feito assim: a gente tinha feito uma alteração, que era criar uma classe, então vai ser uma class.app. Essa class estende, então ela “extends” o nosso component. O nosso component do react. Ele já fez ali o autoimport.

E aí, ele tem nessa class.app, a extended do component, eu não tinha um retorno. Na hora de fazer essa renderização, o que eu tinha era um método render. Então, eu tinha que criar esse método, que é chamado render, e esse método ia fazer toda a renderização. Então ele ia ter aqui a nossa árvore de renderização.

Então, é isso o que a gente tinha feito até agora, esse tipo de componente, que é o que a gente chama de componente baseado em classe, ou class components. Mas, o mais comum de o pessoal chamar, é class components.

Se eu voltar lá no nosso Firefox, no nosso navegador, ele está funcionando da mesma maneira. Então, eu tenho aqui esse componente, ele funciona. Só que da maneira que eu tinha feito antes, da maneira que o create react app cria esse componente, ele não é uma classe, a gente viu que ele é uma função.

Então, a gente pode criar [...] para começar a trabalhar com essas ideias de usar mais funções do que classes nesse projeto. Então a gente vai usar, na verdade, só classes para criar os nossos componentes.

Então, eu vou deixar aqui o nosso app como uma classe, por enquanto, e a gente vai criar funções para criar os nossos componentes customizados. E a gente vai conseguindo ver a comparação entre uma classe e uma função como componentes.

Então, para isso, o nosso formulário de cadastro tem que ser criado, e ele vai ser um componente que eu quero chamar aqui. Então, para isso, a gente vem aqui no nosso source, a nossa passa, onde tem o código-fonte do meu projeto, e eu vou criar uma nova pasta, e essa pasta é aquela pasta-padrão que a gente sempre tem em todo projeto react, que é a minha pasta de componentes.

Então eu vou vir aqui, nova pasta, new folder, e aí eu vou chamar ela de components. Minha pasta de componentes, ela vai ter uma outra pasta dentro dela, porque o meu componente pode ter CSS, pode ser composto de subcomponentes, então ele é um módulo por si só.

Eu vou criar uma nova pasta, posso clicar aqui em cima também. E essa nova pasta vai ser o formulário de cadastro. E aí, dentro dessa pasta de formulário de cadastro, eu vou criar sim o meu componente, o meu arquivo jsx. Lembrando que o jsx é um subset, é um subconjunto do Java Script, porque no final ele vai ter transpilado para Java Script. Mas ele te dá uma outra maneira, uma outra sintex para a gente trabalhar.

Então, aqui dentro do nosso formulário cadastro, eu vou criar o meu componente de formulário cadastro. Então, formularicadastro.jsx. Então, criei meu componente, ele está aqui, e aí eu vou querer, então, usar o react. E aí, para isso, eu estou com aquele plugin, meus plugins estão aqui, e eu estou usando esse simple react [...], que ele vai me trazer algumas facilidades.

Uma delas é que eu posso digitar IMR, e ele vai criar para mim o import react from react. Então ele já faz o autocomplete para mim por causa desse plugin de simple react [...]. Que eu já estava usando nos cursos anteriores.

Então, voltando aqui para o meu explorer, vou fechar essa parte que eu não preciso mais, vamos salvar esse componente, e aí eu tenho meu formulariocadastro.jsx.

E, o que eu preciso fazer, é: nesse momento, eu preciso criar, realmente, o meu componente. E até agora, a gente tinha criado tudo baseado em classes. Então, eu viria aqui, criaria com o meu [...] um CC, uma nova classe, e ele já cria tudo para mim aqui.

O que eu quero fazer, é: eu não quero criar isso através de classes, então eu vou apagar tudo isso. Eu quero criar uma função que vai servir de componente. Então, se eu vou criar uma função, eu vou escrever aqui “function”.

É uma função. O nome da minha função vai ser o nome do meu componente, então vai ser o meu “formulário cadastro”, e ele é uma declaração de uma função, então eu preciso de parâmetros. E a gente vai ver aqui que parâmetros a gente receber depois. E aí o corpo da minha função entre chaves.

Então, eu tenho aqui a minha function “formulário cadastro”, abre parênteses, abre os meus parâmetros, e o corpo da minha função.

Só isso é suficiente para eu criar uma função que seja um componente do react? Vamos ver. Vamos pegar esse “formulário cadastro”, vamos exportar no export.default, então eu já estou exportando o meu formulário, e vamos tentar usar ele lá no meu app.

Então, eu não vou usar mais a index. A index é o que vem por padrão. A gente geralmente mexe na app.js. Então, aqui dentro, eu quero, além do meu “formulário cadastro” aqui, eu quero retornar o meu formulário de cadastro. Ele já fez o autoimpor para mim, tudo certo, e aí, como eu não quero ter filhos para ele, eu vou fazer o fechamento simples. Então eu vou fechar aqui na mesma tag.

E aí você pode ver que ele tem um erro, um parcing error. Ele está falando que o nosso jsx só pode retornar um elemento pai, certo? Porque aqui no nosso return, no nosso render, eu tenho retornado o meu H1 e o meu formulário cadastro.

Como eu não quero nenhum componente que seja um container de fato, eu vou criar aqui um fragment. Então eu posso usar o fragment, usando ele assim, e aí colocar o meu H1 e o meu formulário de cadastro ali dentro, como a gente já tinha visto no curso anterior.

Vou pedir para ele formatar aqui para mim, a gente pode ver que o meu fragment, vai servir como esse elemento pai desse componente app que a gente está criando. E esse é o componente que eu vou retornar.

Mas, como a gente viu na parte de fragments, revisando um pouquinho, ele não vai ser renderizado aqui no nosso app. Mas o nosso app não está funcionando, e ele está falando que o formulário cadastro, aquele componente que a gente criou agora, nada foi retornado para a minha renderização.

Então, nothing was return from render. Ou seja, ele está procurando aquele render. Mas espera, se eu estou criando uma função agora, eu não tenho um método render, certo? Então, se eu estou criando uma função, se eu volto aqui, e eu estou criando essa função aqui, normalmente, quando a gente trabalha com funções, eu não tenho métodos, então eu não teria um método render aqui dentro, que eu posso chamar, e aí ele vai fazer o meu return para renderização, para a minha árvore de renderização.

O que a gente normalmente tem com funções, não que eu não possa ter esse tipo de método aqui dentro, se eu criar uma cloud ali, com Java Script, eu posso, mas não é muito costumeiro a gente trabalhar com métodos dentro de funções, não faz muito sentido.

Método é uma propriedade de classe, e não de função. Então, quando ele está falando aqui que nada foi retornado do render, para a renderização, ele está falando que quando a gente cria um componente do tipo de função, o retorno dele tem que ser a minha árvore de renderização.

Então, na verdade, eu não vou ter um método render aqui, mas eu vou ter que ter um retorno da minha função, e esse retorno é quem vai fazer a renderização de fato. Então, no caso, se eu estou fazendo o meu formulário de cadastro, eu vou abrir aqui a minha tag, eu vou retornar o form, e aí, dentro desse form, eu vou criar um input.

Eu vou criar um input, e eu vou colocar que o type dele vai ser text, “input type text”. E aí eu vou fechar o meu input. Preciso desses, vamos fazer um fechamento simples também.

Então, dessa maneira, se eu voltar lá, ele ainda não recarregou, vamos ver se o meu app está certo, então, “formulário cadastro”, ele tem aqui o meu return, o meu return está retornando uma árvore de jsx, e aí, se eu salvar, agora a gente voltou nele e eu consigo recarregar aqui a página, e você viu que ele está funcionando, então ele tem aqui o meu input.

Como eu estava falando, voltando aqui na revisão dos fragments, você dá um inspecionar elemento, o meu inspetor está aqui, uma letra bem grande para que você consiga ver. Eu tenho a minha [...], que vem em todo o projeto react, você tem essa [...], e eu tenho o meu H1 e o meu form.

E aquele fragment que a gente tinha criado, ele não foi renderizado, ele não veio para cá, porque ele só serve, ele só está aqui para a gente cumprir aquela regra de que todo componente do react, inclusive o nosso app é um componente, ele tem que retornar um único elemento pai.

E aí o fragment faz essa função. Ele consegue encapsular todos os elementos filhos. Mas ele, no final, não vai ser renderizado, ele não vai vir aqui para a minha árvore de renderização.

Então, para a gente está suficiente isso. E a gente conseguiu ver que eu consigo criar um formulário de cadastro, F12 para eu navegar até ele. Esse formulário de cadastro é uma função, não é uma classe, e quando eu crio uma função, eu preciso que o retorno dela seja o retorno da renderização dela, o retorno da minha árvore jsx.

Vou pedir para ele formatar aqui, para ficar um pouco mais fácil. Então aqui eu tenho o meu function, o meu function é o meu formulário de cadastro, e ele retorna à árvore de renderização dele, o que ele está querendo renderizar, o que esse componente vai desenhar.

E isso também faz a gente lembrar daquele conceito de que a gente tinha visto, de statless coponents e stateful components. Quando a gente trabalha com funções, se a gente está revendo aqui, só retornando à alguma propriedade, se a gente está retornando à nossa área de renderização, é muito mais natural que a gente trabalhe com os function components como sendo statless, ou seja, ele não guarda estado. E a gente vai ver isso em mais detalhes.

Iniciando com Functions components - Facilitando a prototipação

Bom, então aqui a gente já viu que a gente consegue criar o nosso formulário através de uma função, e não de uma classe. E aí, é uma questão de costume, ou do projeto que você está usando, se você vai usar classes, ou se você vai usar as funções.

Acontece que, a parte de function components, de criar componentes como função no react é uma coisa bem nova. Então é uma coisa supernova, os projetos mais atuais devem usar os function componentes, o pessoal está, na própria documentação, nas palestras e nos eventos, eles estão batendo bastante, falando dos function components, estão meio que falando que é o futuro do react, mas eles garantem que eles não vão descontinuar a partir de classes components.

Mesmo porque, a gente tem muitos projetos que ainda estão com o código um pouco mais antigo, que ainda vão usar os classes components. Mas, é bom você saber que existem as duas variações de como trabalhar com componentes aqui no react.

Então, a gente tem o nosso formulário, a gente viu que ele renderiza aqui certinho, ou seja, o nosso function component tem que ter o retorno dele, a árvore de renderização que eu quero que redesenhe, e aqui, a gente pode começar a trabalhar no nosso formulário.

Então, no nosso formulário, ele vai ter um label para cada input, e nesse caso, esse label vai ser o de nome, e aí eu copiar essas duas linhas porque eu vou ter outros inputs que vão ser muito parecidos.

Então, eu tenho o de nome, eu vou ter o meu de sobrenome. Então, sobrenome, que também vai ser do tipo text. Eu vou ter um de CPF, e ele também vai ser do tipo text, e aí eu vou ter dois outros tipos de input.

Então eu vou ter um label que vai ser de promoções, então eu quero saber se quem estiver usando esse formulário, esse projeto, vai querer receber promoções nessa loja que a gente está criando, então, promoções.

E aí, ele não vai ser do tipo text, ele tem que ser do tipo checkbox, porque eu quero que a pessoa dê um sim ou um não. Então, só escolher simples, sim ou não, é um checkbox que a gente vai usar. E ele vai ficar aqui.

Se a gente voltar lá no nosso formulário, no Firefox, ele já começou a renderizar ele certinho. Então, a última coisa que faltou, além das promoções, eu quero que ele tenha um outro checkbox para a pessoa escolher se ele quer receber as novidades separadas das promoções.

Que promoções é uma coisa, e novidades, ou a newsletter do nosso sistema, é outra. E aí a pessoa pode escolher individualmente se ela quer outro. Então, eu vou chamar aqui de novidades.

E aí, a última coisa, todo formulário vai ter um botão, porque até agora, eu posso preencher aqui todos esses campos, mas eu não tenho nenhum botão que eu esteja usando para submeter esse formulário.

Então, eu vou criar aqui um botão, um button. Ele vai ser do tipo submit, que eu quero que esse botão vai submeter o formulário automaticamente, e aí, dentro desse botão, eu vou querer confirmar, ou cadastrar.

E aí, se a gente voltar aqui, o nosso formulário está completo. Só que, de novo, a gente está usando só escritura do HTML, a gente gerou um formulário padrão, com a cara do HTML mesmo, e se eu estou prototipando alguma ideia, se eu quero testar um layout, eu quero testar a funcionalidade, eu não quero ter essa cara de HTML.

Ao mesmo tempo, não é o meu foco criar CSS nesse momento. Porque o meu CSS, se a gente validar essa ideia, validar esse protótipo, ele vai ser uma coisa customizada, então eu vou ter que trabalhar nele, componentizar o nosso CSS.

Inclusive, a gente tem cursos de componentização de elementos através de CSS aqui na Alura. Não usa react, ele usa só o CSS com o HTML puro. Mas eu teria que fazer todo esse trabalho de criar o meu próprio design system aqui na minha aplicação, para aí sim eu ter o meu layout final.

E se eu ter uma fase só de prototipação, como é mais ou menos o caso aqui, e eu não quero dar o foco nesse layout, mas eu também não quero ter essa cara de HTML, eu posso usar um design system que já venha pronto.

Então, eu posso usar uma biblioteca que já me traga alguns componentes prontos para eu utilizar. E uma biblioteca que a gente pode usar, que é muito utilizada para prototipação, é a material ui.

E a material ui, ela é uma biblioteca que traz vários componentes já pré-estilizados para a gente poder usar, e que agiliza muito a nossa fase de prototipação.

Então, ela tem aqui esse material ui. Para você instalar, a gente pode ver aqui embaixo, a gente vai usar o NPM, que é aquele gerenciador de pacotes do [...]. Se você não tem muita familiaridade com o NPM, ele é basicamente um jeito de você compartilhar código ali entre vários projetos, compartilhar código até com a comunidade.

Então, o material ui é uma biblioteca que ela é aberta, a gente pode usar, e ela está disponível através do NPM. Assim como a gente tem lá o NPX, que é o executador de pacotes do meu NPM.

Então, eu vou vir aqui, e eu vou instalar o nosso material ui através do NPM. Para isso, eu vou copiar essa linha dele. Então, npm.install.materialui/core. Eu vou abrir o meu terminal. No caso desse terminal que eu tenho aqui, ele é o terminal que está rodando o meu projeto do react, então eu vou clicar no + para abrir um novo terminal. E nesse novo terminal, eu vou colar aquela linha.

Então, npm.install.materialui/core. Vou dar um enter e ele vai começar a baixar as dependências lá do NPM, vai pegar o repositório e vai começar a baixar tudo para a minha máquina.

Enquanto isso, vamos ver o que eu posso fazer com esse material ui, que componentes ele traz. [05:30] Então eu vou vir aqui no “comece a usar”, e aqui ele fala várias características dele, maneira de instalação. Tem essa parte de uso, que você consegue ler um pouco mais de como ele pode ser usado.

Mas, a ideia principal é que os componentes funcionem isoladamente, ou seja, ele não depende de outros componentes, ele não tem interdependência entre vários componentes, então eles são independentes, e o que é muito bom para a gente, porque eu não preciso, para usar um componente, ter uma árvore de renderização supercomplicada ou depende de outro, ou depender de um container específico.

Não, eu uso aquele componente, sozinho, e ele vai funcionar certinho. E aí, a maneira de usar. Por exemplo, se a gente quer ter um botão no nosso layout, é criar aqui o componente button. E ele já cria esse componente com essa carinha aqui, é uma cara um pouco já mais bonita do que aquele componente que a gente tem, padrão, do HTML.

Então, eu tenho componentes customizados que vieram dessa material ui, a gente consegue ver aqui que ele está fazendo importação, e eu só vou usar eles como tags. Então, é outra vantagem que o react traz para a gente. [06:32] A gente está usando essa lib, ou a gente vai usar essa biblioteca aqui de renderização, de layout já pré-feita, mas se eu quiser criar o meu próprio layout, eu posso me basear em alguma coisa do tipo.

Olha, sempre que eu vou usar um botão, eu vou usar a tag button. E, internamente, ela já sendo utilizada para uma maneira que o meu designer, meu ui, meu [...] pensaram na hora de usar.

Então, vamos fazer esse button aqui funcionar no nosso react. Então, para isso, a nossa citação já terminou aqui, ele já deu o ok. Ele está falando que eu tenho uma vulnerabilidade aqui, então eu posso dar um npm.auditfix para ele consertar as vulnerabilidades.

O NPM já traz essa ferramenta que verifica vulnerabilidades do nosso projeto, e aí ele vai baixar o que ele precisar para fazer essa verificação de vulnerabilidade. Enquanto ele faz isso, eu vou baixar o meu terminal aqui, control+J, fechei.

E vamos, então, importar aqui, usar, em vez desse button, que é o componente do HTML, do JSX padrão, eu vou importar. Então eu vou dar um import no meu button do meu material ui. Então, from, entre aspas, arroba, material ui core/button.

Ele já tem o autocomplete, então ele já me ajuda. E aí esse button, que é o componente, eu vou substituir por esse daqui. Então você pode ver que um era com letra minúscula, e como a gente está trabalhando com customizado, que ele é com letra maiúscula, ele já até muda aqui para gente de cor, porque ele está falando que ele é um componente customizado.

E aí a gente dá um save, e se eu voltar aqui no nosso react, você pode ver que o meu botão já mudou, ele já está com uma cara um pouco diferente. Mas ele não está exatamente igual a esse aqui. Por quê? Porque a gente não colocou essas propriedades de variante e de cor.

Então, a minha variante vai ser o contained, e a color vai ser o primary. Então, vamos mudar isso aqui para ver como que ele vai se comportar. Então vamos adicionar essas propriedades aqui no meu botão, vamos dar um control+v, pedir para ele formatar aqui para mim, ele já quebrou a linha, e se eu voltar lá no meu aplicativo, cadastrar, aí ele já está com a carinha do nosso material ui.

Então, é um jeito muito fácil de a gente trabalhar, e não precisar me preocupar tanto com o layout. O componente já está pré-customizado, e aí é fácil de eu trabalhar e prototipar as minhas ideias.

Sobre o curso React:Function Components, uma abordagem moderna

O curso React:Function Components, uma abordagem moderna possui 117 minutos de vídeos, em um total de 35 atividades. Gostou? Conheça nossos outros cursos de React em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda React acessando integralmente esse e outros cursos, comece hoje!

  • 1266 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

Premium

  • 1266 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75
à vista R$900
Matricule-se

Premium Plus

  • 1266 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100
à vista R$1.200
Matricule-se

Max

  • 1266 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120
à vista R$1.440
Matricule-se
Conheça os Planos para Empresas

Acesso por 1 ano

Estude 24h/dia onde e quando quiser

Novos cursos todas as semanas