React

React � uma biblioteca JavaScript para a cria��o de interfaces de usu�rio e, nesse contexto, uma das tecnologias mais utilizadas pelo mercado. Aqui voc� aprender� quais s�o os pr�-requisitos para iniciar no React do jeito certo e como criar as suas primeiras SPAs com ela.

Comece sua carreira

Guia de React
DevMedia
12 Conte�dos
300 Exerc�cios
Avan�ado
725 avalia��es

O que � React?

O React � uma biblioteca JavaScript leve e simples para criar interfaces de usu�rio. Atrav�s do React criamos a parte que o usu�rio v� e interage do sistema.

Atrav�s do React criamos aplica��es Front-end web do tipo SPAs (Single Page Application).

O React foi criado como uma solu��o para a programa��o de interfaces grandes e complexas, com diversos componentes que precisam ser apresentados e atualizados constantemente.

Podemos dizer que o React:

� uma das tecnologias Front-end mais usadas.
Utiliza a sintaxe declarativa.
� baseado em componentes.
Pode ser inseridos aos poucos em projetos j� existentes.

Por que aprender React?

Atualmente ser um programador Front-end web significa utilizar um framework ou biblioteca para acelerar o processo de desenvolvimento de uma p�gina ou sistema web.

O React � f�cil de aprender por um simples motivo: ele utiliza a linguagem JavaScript para criar suas aplica��es.

Por ser uma tecnologia criada e testada pela equipe do Facebook � uma solu��o segura. Al�m disso a comunidade de programadores React � muito grande.

Por utilizar a linguagem JavaScript - que � indispens�vel na programa��o web - e por se tratar de uma tecnologia com grande aceita��o, um programador React tem grandes chances no mercado de trabalho.

Na DevMedia o aprendizado React est� dividido em duas se��es:

Linguagem JavaScript, que � utilizada pelo React e por isso � um pr�-requisito.
Biblioteca React, o acelerador do desenvolvimento Front-end web.

Exemplo de c�digo React

Veja um exemplo de c�digo React:


import React from 'react';
import './App.css';

function App() {
    return (
      <div className="App">
        <p>
		Hello World!
        </p>
      </div>
    );
}

export default App;

JavaScript � a linguagem necess�ria para programar em React;
JavaScript � uma linguagem com tipagem mut�vel;
JavaScript � uma linguagem multiparadigma.

Carreira Front-end React

O React � uma biblioteca criada pelo Facebook para desenvolver a interface do usu�rio, ou seja, tudo que o usu�rio consegue ver e interagir.

Nem tudo em um sistema � feito no Front-end e por isso uma p�gina web depende da camada back-end para que funcione como desejado (por exemplo exibir os produtos para um usu�rio).

A camada back-end vai processar e enviar os dados - a responsabilidade da camada front-end � receber estes dados e exibi-los de forma amig�vel para o usu�rio.

Programar com React significa criar a camada visual de um sistema, ou seja solicitar para o Back-end os dados necess�rios para cada tela. Depois que receber os dados o React vai manipular e exibir esses dados para o usu�rio.

Caracter�sticas da programa��o Front-end (web):

Envolve conhecimentos referentes a experi�ncia do usu�rio (UX).
Est� associado a programa��o da tela, ou seja, a programar o que aparece para o usu�rio e como ele vai interagir com a p�gina.
Sempre h� vagas para programador Front-end j� que � quase obrigat�rio para uma empresa ter uma p�gina web.
Envolve programar as a��es que o usu�rio vai fazer na p�gina.
Se preocupa com a navega��o entre as p�ginas.

Aprender React � o passo final na carreira programador Front-end.

**Figura.** Plano de estudo Programador Front-end React.

Utilize o React para se tornar um programador front-end completo.

Saiba mais sobre React

O que voc� vai aprender sobre React

Introdu��o keyboard_arrow_down
- lock O que � React?
- lock Como instalar o Node.js, NPM e o React no Windows
- lock 50 Exerc�cios
Componentes keyboard_arrow_down
- lock Criando meus primeiros componentes
- lock Aplica��o simples com os primeiros componentes
- lock 50 Exerc�cios
State Hook e evento onClick keyboard_arrow_down
- lock State Hook e evento onClick
- lock Gerador de N�mero Aleat�rio
- lock 50 Exerc�cios
Rotas keyboard_arrow_down
- lock Criando Minhas Primeiras Rotas
- lock Navegando entre telas
- lock 50 Exerc�cios
Props keyboard_arrow_down
- lock Trabalhando com props
- lock Passando e recebendo tags e componentes via props
- lock Baralho de signos utilizando props
- lock P�gina web de consult�rio dent�rio com React
- lock 50 Exerc�cios
Deploy keyboard_arrow_down
- lock Enviando seu app para a produ��o
- lock 50 Exerc�cios

Seja PRO Agora

Tenha acesso ilimitado a todo conte�do.

Comece Agora

Possui uma conta? Login

Por que aprender na DevMedia?

Estudar tecnologia na DevMedia � uma experi�ncia �nica. Nossa metodologia de ensino � baseada nos seguintes pilares:

Orientar

keyboard_arrow_down

Plano de estudo

Apresentar um caminho claro de por onde voc� deve come�ar os estudos e qual a ordem para se aprender cada mat�ria faz total diferen�a no resultado final. Assim voc� n�o vai perder tempo estudando tecnologias desnecess�rias para aquela etapa do aprendizado e poder� se dedicar inteiramente aos temas propostos.

Suporte ao aluno

Temos uma equipe especializada para tirar todas as d�vidas que surgirem durante os estudos. Todas as perguntas s�o respondidas por especialistas e somente voc� e a nossa equipe ter�o acesso as d�vidas postadas.

Orienta��o individual

Sempre que necess�rio fazemos contato individual com cada aluno para auxiliar no uso da plataforma, a fim de agilizar os estudos. Esse servi�o est� incluso no valor da sua assinatura e voc� poder� solicit�-lo quando desejar.

Ensinar

keyboard_arrow_down

A DevMedia ensina programa��o h� 20 anos, por isso conhecemos bem as principais dificuldades que os iniciantes enfrentam, de modo geral, s�o elas: excesso de termos t�cnicos, muitas tecnologias sendo vistas ao mesmo tempo, pouca pr�tica e quase nenhum entendimento do que est�o fazendo.

Baseado nesses problemas montamos uma metodologia de f�cil compreens�o, que possibilita aprender e praticar ao mesmo tempo, priorizando apenas os conte�dos que s�o essenciais para aquela fase do aprendizado. Evitando perdas de tempo e confus�es desnecess�rias.

Todo aprendizado � feito atrav�s de miss�es que simulam o dia a dia de um programador em come�o de carreira. Ao iniciar uma miss�o, voc� tem acesso a todo o material te�rico que deve ser estudado para conseguir conclu�-la com sucesso. Cada miss�o conclu�da � um mini-projeto que voc� poder� anexar em seu portf�lio.

Praticar

keyboard_arrow_down

Programa��o n�o se aprende sem praticar. Por isso nosso foco � incentivar a pr�tica o tempo todo. S�o muitas as formas de praticar na plataforma, entre elas:

Certificados para o Linkedin

Os exerc�cios tamb�m podem garantir um Certificado de Autoridade. Nele a DevMedia afirma para o mercado que, baseado nos exerc�cios realizados, voc� comprovou que tem conhecimentos sobre determinado assunto. Depois � s� publicar no Linkedin e multiplicar as chances de conseguir sua vaga.

Miss�es pr�ticas

Todo nosso ensino � baseado em concluir miss�es. Entre as miss�es iniciais est�o "Construa seu primeiro site", "Desenvolva uma calculadora", "Monte um App simples". Cada miss�o conclu�da � um passo a mais na sua carreira de programador e mais um projeto conclu�do em seu portf�lio. Isso vai te dar um bom empurr�o em suas primeiras entrevistas de emprego com programador!

Suporte em tempo real

keyboard_arrow_down

Suporte a d�vidas em tempo real

Outro ponto muito importante durante seus estudo � conseguir tirar d�vidas rapidamente. Na DevMedia temos um time de programadores que tem a miss�o de tirar sua d�vida em tempo real.

Veja o que nossos usu�rios dizem sobre o Suporte em tempo real :)

Agrade�o e venho aqui reconhecer o trabalho de voc�s, pois eu nunca fico sem solucionar uma d�vida, seja pelas respostas aos outros usu�rios ou a mim.
Voc�s se dedicam muito ao suporte e fico feliz por ter escolhido a DevMedia tendo em vista este quesito. Acho importante esse feedback pois � o m�nimo que posso fazer.

Ismael Lima

star star star star star_border

Muito obrigada! Super claro e objetivo, adorei a aten��o que voc�s d�o aos alunos... Parab�ns!!! At� a pr�xima...

Tain� Rocha

star star star star star

Exerc�cios Gamificados

keyboard_arrow_down

Fortale�a o conhecimento com games de exerc�cios

Todos os conte�dos da Plataforma possuem exerc�cios pr�ticos e todos eles s�o gamificados. Isso significa que ao acertar voc� ganha pontos, medalhas, participa do ranking mensal e v� o seu card de programador evoluir a cada dia. A gamifica��o vai te motivar a estudar com frequ�ncia e seguir progredindo.

Para te manter motivado e fortalecer os conhecimentos adquiridos na mem�ria, a plataforma DevMedia tamb�m � um game de exerc�cios de programa��o.

Cada t�pico de estudos cont�m um game de exerc�cios! Ao acertar os exerc�cios voc� ganha pontos, medalhas e tamb�m sobe sua posi��o ranking da plataforma.

Al�m disso toda vez que voc� acerta exerc�cios de programa��o voc� evolui o seu card! Veja abaixo:

Certificados de Autoridade

keyboard_arrow_down

Os Certificados de Autoridade s�o a sua nova maneira de certificar seus conhecimentos para o mercado!

Ap�s responder corretamente 30 exerc�cios de um t�pico, voc� desbloqueia o seu certificado.

Este evolui conforme voc� pratica mais exerc�cios e consome mais conte�dos da tecnologia escolhida por voc�.

Seus Certificados de Autoridade podem ser compartilhados diretamente no seu perfil do LinkedIn!

Inicie sua carreira

Seja um Assinante e mude de vida

Comece Agora

Possui uma conta? Login

O que dizem

Confira o que andam dizendo sobre n�s ap�s conclu�rem seus objetivos em nossa Plataforma.

Estou Inteiramente satisfeito! J� vim com conhecimento em java de nivel m�dio, mas estou seguindo toda a guia de Java desde o inicio. Muito Bom, parab�ns!

Luis Ferreira

star star star star star

Achei muito top o trabalho que a DevMedia est� fazendo, ensinando passo a passo deste jeito � muito mais facil...Parab�ns pelo �timo trabalho!

Moises

star star star star star_border

Acho que esse tipo de material organizado e em formato de arvore � muito favoravel para o aprendizado! Achei super positivo o conte�do feito desta forma, perincipalmente para os novos programadores! Parab�ns pelo empenho!

Erik

star star star star star

Muito boa a qualidade das aulas online, estou gostando bastante de aprender diversas tecnologias com a Devmedia!

Graciomar Mascarenhas

star star star star star_border

Gostei bastante do primeiro contato. Em seguida assinei por um ano e j� conclui o meu primeiro curso no portal. Gostei muito e espero enquanto esteja buscando me tornar um profissional da �rea de analista e programador de sistemas, ter muita ajuda dos cursos da DevMedia.

Eberton Ferreira

star star star star_border star_border

Tudo o que voc� precisa e mais um pouco. Cheguei no site a pouco tempo como assinante, e j� vi que foi o melhor investimento que poderia ter feito. Conte�do excelente e o que mais me chamou aten��o foram as v�rias formas de aprender. Assistindo, ouvindo, lendo, consertando c�digos. As ferramentas est�o aqui, s� depende de voc� utiliza-las. Recomendo mais do que tudo!

Elen Pires

star star star star star

Parab�ns pelo acompanhamento. Nunca vi um lugar onde o suporte � t�o r�pido.

Gabriel

star star star star star

Feedback dos Alunos

4.7

star star star star star_border

725 avalia��es

star star star star star

83% close

star star star star star_border

star star star star_border star_border

star star star_border star_border star_border

star star_border star_border star_border star_border

H� 23 dias

Arisson Freire

star star star star_border star_border

Cada vez mais tenho tido dificuldades para estudar/aprender. O corre corre do dia a dia faz a gente as vezes n�o consegui focar nas coisas, mas com esses primeiros passos com React t� bem confiante de que vou aprender, o conte�do b�sico desse curso me fez aprender muito bem.