Curso

Minha Primeira Single Page Application com React

Name: Minha Primeira Single Page Application com React
Rating: 5 (476 reviews)

Neste curso aprenderemos a desenvolver uma Single Page Application utilizando o React, uma das principais bibliotecas JavaScript da atualidade. Veremos aqui conceitos fundamentais como componentes e rotas, al�m de como consumir um web service RESTful utilizando a Fetch API do JavaScript. E para estilizar visualmente e dar � nossa interface a caracter�stica de responsividade, utilizaremos o Bootstrap 4.

Iniciar agora

Carga hor�ria deste curso 19h

Para obter a contagem de carga hor�ria do curso levamos em considera��o que cada aula possui, em m�dia, a dura��o t�cnica de uma hora - que cont�m o tempo de acompanhamento, codifica��o, assimila��o do aluno al�m do pr�prio tempo total do v�deo.

Favorito

Esse curso inclui:

Suporte em tempo real

Certificado

Cursos JavaScript Minha Primeira Single Page Application com React

Curso de React Online

(19 aulas)

Aula 1 - Introdu��o

Neste curso desenvolveremos uma Single Page Application com React. Para isso aprenderemos a criar componentes, usar rotas e consumir web service RESTful.

Aula 2 - Criando o projeto

O primeiro passo no desenvolvimento da aplica��o ser� criar um novo projeto com a ferramenta de linha de comando create-react-app. Ela cria para n�s uma estrutura de pastas e arquivos e configura alguns pacotes necess�rios de forma autom�tica.

Aula 3 - Instalando o Bootstrap

O Bootstrap � um dos principais frameworks front-end do mercado. Ele tem como depend�ncia a biblioteca jQuery e na vers�o 4 passou a depender tamb�m do Popper.js. Neste v�deo vamos ver como instal�-lo em uma aplica��o React.

Aula 4 - Criando o menu superior

O menu superior ser� o primeiro componente do projeto. Ele utilizar� o navbar do Bootstrap para exibir uma barra de navega��o com links no topo da p�gina.

Aula 5 - Exibindo o menu superior

Tendo criado o menu superior no v�deo passado, veremos agora como importar esse componente dentro do App.js e exibi-lo na p�gina.

Aula 6 - Conhecendo o web service RESTful

Cada p�gina da aplica��o ser� representada por um componente que consome dados de um web service RESTful. Neste v�deo conheceremos a estrutura dos dados que ser�o retornados por cada um desses endpoints.

Aula 7 - Criando o componente Resumo

O componente Resumo, que ser� criado neste v�deo, obter� seus dados do endpoint /resumo do web service e exibir� informa��es a respeito das consultas e do faturamento da empresa.

Aula 8 - Definindo a interface do resumo

Na interface gr�fica do componente de resumo vamos usar o sistema de grid do Bootstrap, al�m de cards e tables. Esses elementos ser�o usados para exibir as informa��es para o usu�rio de forma clara e responsiva.

Aula 9 - Obtendo dados do web service

Agora que temos a interface do componente pronta, vamos obter os dados do web service atrav�s de uma requisi��o HTTP GET. Para isso usaremos um m�todo padr�o dos componentes do React, o componentDidMount.

Aula 10 - Definindo classes CSS dinamicamente

Da mesma forma que exibimos dados no HTML por meio de instru��es JavaScript, tamb�m podemos definir classes CSS dinamicamente. Para isso, veremos como atribuir um valor � propriedade className de acordo com uma express�o condicional.

Ver todas as 19 aulas

Gostou do curso? Comece a aprender agora!

Iniciar agora

Mais cursos

JavaScript: Input

Ver curso

JavaScript: Aplica��o em camadas

Ver curso

JavaScript: Objeto Literal e cole��o de objetos

Ver curso

Fa�a a sua matr�cula

Escolha seu Plano	Plano Start	Plano Prime
Pagamento recorrente. N�o compromete o limite do cart�o!	R$ 69,00 /m�s R$ 64,90 /m�s	R$ 149,00 /m�s R$ 145,80 /m�s
Forma��o completa Programador Fullstack
Uso de IAs e automa��es
Exerc�cios gamificados
Projetos pr�ticos
Suporte ao conte�do
Comunidade de alunos
Cursos e artigos em +40 tecnologias
Trilha Monetize seu conhecimento
Mentoria T�cnica personalizada
Mentoria fazendo $ em 60 dias
Mentoria Primeiro emprego
Suporte humanizado 24 horas
Aulas exclusivas com especialistas
	Come�ar Agora	Come�ar Agora

Plano Start

R$64,90/m�s

Come�ar

Plano Prime

R$145,80/m�s

Come�ar

Quero tirar uma d�vida

<Perguntas frequentes>

Carreira

Por onde devo iniciar os estudos?

Recomendamos come�ar pelo Plano de Estudo Carreira Programador Front-End. Essa �rea da programa��o � mais visual e intuitiva, tornando-a ideal para iniciantes. No Front-End, voc� aprender� a criar a parte visual dos sites, como layout, cores e interatividade. Depois de dominar o Front-End, voc� pode avan�ar para Programador Back-End, onde aprender� a lidar com a l�gica e o funcionamento interno dos sites, e, finalmente, para Programador Mobile, focando no desenvolvimento de aplicativos para smartphones. Nossa metodologia � estruturada de forma progressiva para garantir que voc� desenvolva confian�a e experi�ncia ao criar projetos reais, como sites est�ticos e din�micos.

Em quanto tempo vou me tornar um programador?

O tempo necess�rio para se tornar um programador varia de acordo com a dedica��o de cada estudante. Com nossa metodologia, que inclui um Plano de Estudo detalhado e suporte cont�nuo, voc� pode se tornar um programador de 6 meses a um ano, dependendo do seu ritmo e esfor�o. Nossa abordagem pr�tica e orientada a projetos ajudar� a acelerar seu aprendizado.

Eu preciso de um diploma de faculdade para come�ar a atuar como programador?

N�o. Ser programador � uma excelente oportunidade para quem n�o possui diploma de faculdade. Muitas empresas contratam baseadas nas habilidades t�cnicas e experi�ncia pr�tica, n�o necessariamente em diplomas. Ap�s conquistar uma vaga, voc� pode optar por complementar sua forma��o com um diploma.

Por que a programa��o se tornou a profiss�o mais promissora da atualidade?

A necessidade de programadores cresceu exponencialmente, especialmente ap�s a pandemia de Covid-19, que for�ou muitas empresas a se adaptarem ao digital. Com o crescimento das empresas de tecnologia, a demanda por programadores aumentou. Atualmente, h� mais de 200 mil vagas abertas no Brasil devido � falta de profissionais qualificados.

Metodologia

Quais s�o os principais diferenciais da DevMedia?

Did�tica e Metodologia Com mais de 20 anos de experi�ncia, nossa metodologia foca em menos aulas e mais pr�tica. Desenvolvemos dezenas de projetos e exerc�cios para ajudar voc� a se tornar um programador completo. Nossos projetos s�o desafiadores e aut�nticos, n�o apenas exerc�cios repetitivos.
Projetos reais e exerc�cios Voc� desenvolver� diversos projetos pr�ticos em cada carreira (Front-End, Back-End e Mobile), recebendo mentoria e suporte cont�nuo. A pr�tica � essencial, e oferecemos milhares de exerc�cios para ajudar voc� a fixar o conte�do e melhorar sua posi��o no ranking.
Suporte ao aluno Nossa plataforma oferece suporte dedicado com professores experientes, respondendo suas d�vidas em menos de uma hora. Isso garante que voc� receba a ajuda necess�ria durante toda a sua jornada de aprendizado.
Gamifica��o A DevMedia utiliza gamifica��o para tornar o aprendizado mais envolvente e motivador. Voc� acumula pontos e moedas por acertos, que podem ser trocados por produtos e customiza��es no seu card pessoal. Al�m disso, o sistema de ranking mensal incentiva a competi��o amig�vel e a melhoria cont�nua.

O que eu irei aprender estudando pela DevMedia?

Ao estudar conosco, voc� se tornar� um programador Full Stack, dominando Front-End, Back-End e Mobile. Utilizamos a linguagem JavaScript, a mais utilizada no mercado, preparando voc� para criar sistemas webs e aplicativos celulares. Nossa abordagem pr�tica inclui exerc�cios para fixar o conhecimento e desenvolvimento de projetos reais que te preparam, para o mercado de trabalho.

Quais as vantagens de aprender programa��o atrav�s da linguagem JavaScript?

Ela � Multiplataforma, ela vai te permitir programar para web e para celulares utilizando praticamente a mesma sintaxe.
El� � Full Stack. Ela te permite criar aplica��es Front-end, Back-end e Mobile. Isso acelera muito sua carreira e aumenta suas possibilidades de pegar trabalhos aut�nomos e conquistar uma vaga no mercado.
Ela � f�cil de aprender. Como ela n�o exige conhecimento inicial em �Orienta��o a Objetos� ela se torna mais simples com uma curva de aprendizado suave e vai te permitir come�ar a programar mais r�pido do que outras linguagens

A plataforma oferece certificados?

Sim, oferecemos dois tipos de certificados: o certificado de conclus�o, que voc� adquire ao consumir o conte�do, e o certificado de autoridade, que voc� obt�m ao acertar exerc�cios. Ambos possuem carga hor�ria, que pode ser utilizada para fins acad�micos, como atividades complementares na faculdade, e tamb�m para comprova��es em processos seletivos ou no seu curr�culo.

A plataforma tem suporte ao aluno, como funciona?

Sim, temos uma equipe de programadores pronta para ajudar com todas as suas d�vidas! Durante o hor�rio comercial, o tempo m�dio de resposta � de at� 10 minutos. E n�o se preocupe, tamb�m oferecemos suporte � noite e nos finais de semana, com um prazo de resposta um pouco maior.

A DevMedia me forma como programador Full Stack?

Sim! Oferecemos uma forma��o completa, do zero at� Full Stack. Nosso foco � na pr�tica, ent�o voc� vai encontrar muitos exerc�cios e projetos reais ao longo do curso. Garantimos que voc� sair� com a autonomia necess�ria para desenvolver seus pr�prios projetos com confian�a!

Tem hor�rio para as aulas?

N�o, n�o temos hor�rios fixos para as aulas. Todo o nosso conte�do est� dispon�vel para voc� acessar a qualquer momento, permitindo que voc� estude conforme sua pr�pria disponibilidade e ritmo. Dessa forma, voc� pode integrar o aprendizado � sua rotina de maneira mais flex�vel e eficaz.

Por que a DevMedia n�o usa videoaulas em sua did�tica?

Nosso foco principal � formar programadores de verdade. Sabemos que o dia a dia de um programador envolve muita leitura, interpreta��o e escrita de c�digo. Por isso, nosso conte�do � desenvolvido para ambientar voc� nesse processo desde o in�cio, proporcionando mais autonomia e acelerando seu aprendizado.
Na v�deo-aula � o professor que est� lendo, interpretando e escrevndo o c�digo para voc�, isso limita o seu progresso. Ao ler e interagir diretamente com o conte�do, voc� exercita sua capacidade de leitura e concentra��o, al�m de poder avan�ar no seu pr�prio ritmo. Dessa forma, voc� se torna um programador mais independente e preparado para os desafios reais do mercado.

Preciso de um computador espec�fico para estudar na DevMedia?

N�o � necess�rio nada espec�fico. Qualquer computador com processador atual e mem�ria de 8 GB � suficiente.

Eu consigo estudar pelo celular?

Sim, a DevMedia possui um aplicativo que te permite seguir com seus estudos de qualquer lugar.

A DevMedia tem aplicativo?

Sim, nosso aplicativo est� dispon�vel na Play Store e na Apple Store, permitindo que voc� estude de forma pr�tica e conveniente em qualquer lugar.

Preciso estar na faculdade para acompanhar os estudos na DevMedia?

N�o, a faculdade n�o � necess�ria. Voc� n�o precisa de nenhum conhecimento pr�vio para iniciar os estudos na nossa plataforma.

Assinatura e Pagamentos

Quais s�o os planos de assinatura dispon�veis?

Oferecemos dois tipos de planos: o plano recorrente e o plano anual. No plano recorrente, a cobran�a � lan�ada mensalmente no cart�o de cr�dito, necessitando apenas do limite para uma parcela. No plano anual, o valor total � lan�ado no cart�o de cr�dito, parcelado em 12 vezes, e voc� precisa dispor do valor total no limite do seu cart�o. Voc� tamb�m pode optar por pagar no PIX ou no Boleto parcelado (sujeito � analise de cr�dito)

Adquirindo o plano, terei acesso a todo o conte�do?

Sim, ao assinar nossa plataforma, voc� desbloqueia acesso total a todo o nosso conte�do, sem precisar comprar nada separadamente.

A plataforma tem planos vital�cios?

N�o, nossos planos s�o anuais, garantindo que voc� tenha acesso cont�nuo �s atualiza��es mais recentes e aos novos conte�dos. A tecnologia evolui rapidamente, e um plano vital�cio oferece um conte�do est�tico que se tornar� ultrapassado em pouco tempo. Com nossos planos anuais, voc� est� sempre � frente, aprendendo as novidades e tend�ncias mais atuais no mundo da programa��o.

A DevMedia tem fidelidade?

Sim, nosso plano tem uma fidelidade de 12 meses, o que garante o tempo ideal para voc� explorar nosso conte�do e desenvolver a autonomia necess�ria para trabalhar com programa��o.

Como funciona o cancelamento?

N�s garantimos seu direito de cancelamento com reembolso total dentro dos primeiros 7 dias, tanto no plano anual quanto no plano recorrente. Ap�s esse per�odo, se voc� estiver no plano recorrente e optar por cancelar antes de completar 12 meses, h� uma taxa de 10% sobre o valor total. No plano anual, n�o h� multas adicionais, mas o valor pago n�o � reembols�vel.
Para que voc� aproveite ao m�ximo seu investimento, oferecemos suporte personalizado para orient�-lo na utiliza��o da plataforma. Tamb�m temos a op��o de transfer�ncia de titularidade do plano, permitindo que outra pessoa aproveite o restante do seu per�odo de assinatura.

A renova��o � autom�tica?

Sim, nosso plano anual renova automaticamente ap�s 12 meses, proporcionando conveni�ncia e continuidade no seu aprendizado. Na renova��o autom�tica n�o � debitado do seu cart�o as 12 parcelas. Para facilitar e n�o prejudicar o seu limite, a renova��o � feita no modelo recorrente, cobrando uma mensalidade a cada m�s.
Al�m disso, a renova��o n�o tem fidelidade, oferecendo total flexibilidade. Voc� tamb�m tem a liberdade de desativar a renova��o autom�tica a qualquer momento, garantindo controle absoluto sobre sua assinatura.

Cadastro

Como excluir meus dados da plataforma?

Para excluir seus dados da plataforma, acesse o link : https://www.devmedia.com.br/fale-conosco/ e abra um protocolo de 'Exclus�o de dados'. Nossa equipe processar� a solicita��o e remover� todas as informa��es do seu cadastro.

Para marcar o curso como favorito � preciso estar logado. Caso n�o tenha um cadastro DevMedia, clique aqui para se cadastrar (gratuito)

Curso adicionado aos favoritos. Clique aqui para ver todos seus favoritos

Curso j� adicionado aos favoritos. Clique aqui para ver todos seus favoritos

Para baixar o c�digo-fonte � preciso ser um assinante