Capítulo 1

Introdução ao React

Criado por: Malcon Toledo

Aula 01 - REACT - Instalação

Como Instalar - Passo a Passo:

Instalar node + npm: https://nodejs.org/pt-br/download/
Instalar react : npm i –g create-react-app
Criar aplicação: No diretório do projeto, digitar: create-react-app [nome do projeto]
Rodar o projeto: npm start

Sobre a estrutura dos arquivos:

Destaque para:index.html | index.js | app.js

Aula 02 - REACT - O que é um componente

O que é um componente?

Um componente é algo que sozinho tem um sentido, ele pode ser único, ou um conjunto de vários outros components.

Quando o componente sofre alteração, somente ele é atualizado, sem a necessidade de percorrer todo o DOM para alterar o que é exibido na tela

Criação de componente em HTML

index.html

  fala filho

Criação de componente em Javascript

index.js


	const rootElement=document.getElementById('root') 
	const element = document.createElement('p') 
	element.innerHTML = 'fala filho' 
	element.className = 'mss' 
	rootElement.appendChild(element)

Criação de componente em React - padrão

index.js


	const rootElement=document.getElementById('root') 
	const  element = React.createElement ('p', {className:'mss' } , 'fala filho' ) 
	ReactDOM.render(element, rootElement)

Criação de componente em React - jsx

Componente1.js


	function Componente1() {
		return (
			fala filho
		);
	}
	export default Componente1

index.js


	import React from 'react';
	import ReactDOM from 'react-dom';
	import Componente1 from './Componente1'

	ReactDOM.render(<Componente1/>, document.getElementById('root'))

Criação de um "Class Component"

Componente1.js


	import React, { Component } from 'react';
	export class Componente1 extends Component{
		render(){
			return (
				fala filho
			)
		}
	}
	export default Componente1

index.js


	import React from 'react';
	import ReactDOM from 'react-dom';
	import Componente1 from './Componente1'

	ReactDOM.render(<Componente1/>, document.getElementById('root'))

Aula 03 - REACT - Estilizando nossos componentes

Utilizando arquivo .CSS

Componente1.js


	import './componente.css'

	function Componente1() {
		return (
			
			   fala filho
				
					lista 1
				
				teste 1
	
			
		)
	}
	
	export default Componente1

Utilizando Stylesheet

Componente1.js

Criando Styled Components

Como Instalar - Passo a Passo:

Instalar a biblioteca: npm i styled-components --save

Styled Components

Componente1.js


import styled from 'styled-components'

const BoxTexto = styled.p`
width: 300px;
background-color:#f00;
color: #fff;
`

function Componente1(){
    return (
        fala filho
    )
}

export default Componente1

Styled Components - VANTAGENS

	Compatibilidade de Browsers
	Cada componente conhece apenas o seu CSS, uma mudança em um componente será refletida somente nele
	Reduz a quantidade de requisições HTTP
	É fácil a estilização dinâmcica usando as props
	Facilidade de manutenção pois tudo fica no componente e não ha necessidade de abrir vários arquivos para efetuar eventual correção

Aula 04 - REACT - Desmitificando o JSX

JSX

Ao invés de separar tecnologias artificialmente colocando markup e lógica em arquivos separados, o React separa conceitos com unidades pouco acopladas chamadas “componentes” que contém ambos.

Fonte: https://pt-br.reactjs.org

index.html


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    
    
    Exemplo 1
  </head>
  <body>
      
    
      
  </body>
</html>

Mensagem.js


function Mensagem(){
    function soma(a,b){
        return a+b
    }
    const resultado = soma(2,2)
    
    return(
        A soma de 2 + 2 é: {resultado} 
    )
}
export default Mensagem

index.js


import React from 'react';
import ReactDOM from 'react-dom';
import Componente1 from './Componente1'
import Mensagem from './Mensagem'
ReactDOM.render(
  <Componente1/>, 
  document.getElementById('root')
)

ReactDOM.render(
  <Mensagem/>, 
  document.getElementById('mensagem')
)

PRÁTICA: Desenvolver um Relógio

Relogio.js


function Relogio() {
	let data = new Date().toLocaleTimeString()
	return (
		Hora atual: {data}
	)
}
export default Relogio

index.js


import React from 'react';
import ReactDOM from 'react-dom';
import Relogio from './Relogio'
setInterval (
  ()=>(ReactDOM.render(
	<Relogio/>, 
	document.getElementById('root')
    )
), 1000 )

Peceba que só o necessário é atualizado na template

Aula 05 - Comunicação entre componentes

Props

Props são informações que podem ser passadas para um componente.

index.js


import React from 'react';
import ReactDOM from 'react-dom';
import Componente1 from './Componente1'

ReactDOM.render(
  <Componente1 mensagem="teste de mensagem" CorFundo="#546"></Componente1>,
  document.getElementById('root')
);

Componte1.js


import styled from 'styled-components'

const BoxTexto = styled.button`
width: 300px;
padding: 20px;
background-color: ${props => props.CorFundo || 'red'};
color: #fff;
&:hover {
	background-color: black;
	color: white;
}
`;

function Componente1(props){
	return (
		{props.mensagem + props.CorFundo}
	)
}

export default Componente1

Comunicação entre componente pai e filho

Projeto: Férias

Parte 1/3

Objetivo:

Consolidar conhecimento de props

index.js


	import React from 'react';
	import ReactDOM from 'react-dom';
	import ListaUsuario from './ListaUsuario'
	
	ReactDOM.render(
	  <ListaUsuario/>,
	  document.getElementById('root')
	);

ListaUsuario.js


	import styled from 'styled-components'
	import ListaUsuarioLi from './ListaUsuarioLi'
	
	const ListaUUL = styled.ul`
	margin: 0px 0px 0px 0px; 
	list-style:cilcle; 
	padding: 20px 30px;
	border: 1px solid #e1e1e1; 
	`;
	
	
	function ListaUsuario(){
	
		//lista de usuarios
		const listaUsuarios = [
			{nome: "malcon", codigo: 1, ferias:"sim"},
			{nome: "Zé", codigo: 2, ferias:"não"},
			{nome: "Ruela", codigo: 3, ferias:"não"},
		]
	
		return (
			<ListaUUL>
				{console.log(listaUsuarios)}
				{listaUsuarios.map(user => <ListaUsuarioLi { ... user}  /> )}
			</ListaUUL>
		)
	
	}
	
	export default ListaUsuario;

ListaUsuarioLi.js


	import styled from 'styled-components'
 
	const ListaLi = styled.li`
	border-bottom: 1px solid #81be9993;
	padding-bottom: 10px;
	margin-bottom: 10px;   
	`;
	
	const Botao = styled.button`
	padding: 10px;
	background-color: #f00;
	color: white;
	&:hover {
		background-color: black;
		color: white;
		cursor:pointer;
	  }
	`;
	const Coluna = styled.div`
	  width: 150px;
	  display: inline-block;
	`
	
	function ListaUsuarioLi(props){
		return (
			<ListaLi>
				 {props.nome}  
				 Férias: {(props.ferias === 'sim' ? 'ok' : 'pendente')}  
				 {(props.ferias === 'não' ? Conceder Férias : '' ) }  
				   
			</ListaLi>
		)
	}
	export default ListaUsuarioLi;

Resultado na Tela:

Esquema de comunicação

Projeto: Férias

Parte 2/3

Objetivo:

Comunicação entre "filho" e "pai"

index.js


	import React from 'react';
	import ReactDOM from 'react-dom';
	import ListaUsuario from './ListaUsuario'
	
	ReactDOM.render(
	  <ListaUsuario/>,
	  document.getElementById('root')
	);

ListaUsuario.js


	import styled from 'styled-components'
	import ListaUsuarioLi from './ListaUsuarioLi'
	
	const ListaUUL = styled.ul`
	margin: 0px 0px 0px 0px; 
	list-style:cilcle; 
	padding: 20px 30px;
	border: 1px solid #e1e1e1; 
	`;
	
	
	function ListaUsuario(){
	
		//lista de usuarios
		const listaUsuarios = [
			{nome: "malcon", codigo: 1, ferias:"sim"},
			{nome: "Zé", codigo: 2, ferias:"não"},
			{nome: "Ruela", codigo: 3, ferias:"não"},
		]

		function concederFerias(codUsuario){
			alert("conceder férias para o usuário " + codUsuario)
		}
	
		return (
			<ListaUUL>
				{listaUsuarios.map(user => <ListaUsuarioLi mudaFerias={concederFerias} { ... user}  /> )}
			</ListaUUL>
		)
	
	}
	
	export default ListaUsuario;

ListaUsuarioLi.js


	import styled from 'styled-components'
 
	const ListaLi = styled.li`
	border-bottom: 1px solid #81be9993;
	padding-bottom: 10px;
	margin-bottom: 10px;   
	`;
	
	const Botao = styled.button`
	padding: 10px;
	background-color: #f00;
	color: white;
	&:hover {
		background-color: black;
		color: white;
		cursor:pointer;
	  }
	`;
	const Coluna = styled.div`
	  width: 150px;
	  display: inline-block;
	`
	
	function ListaUsuarioLi(props){
		return (
			<ListaLi>
				 {props.nome}  
				 Férias: {(props.ferias === 'sim' ? 'ok' : 'pendente')}  
				  {(props.ferias === 'não' ? Conceder Férias : '' ) }  
				>
				   
			</ListaLi>
		)
	}
	export default ListaUsuarioLi;

Esquema de comunicação

Aula 06 - Usando o State do Hook

Projeto: Contador

Parte 1/2

Objetivo:

Fazer o contador usando javascript

Index.js


import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'

ReactDOM.render(
	<App/>,
	document.getElementById('root')
);

App.js


import styled from 'styled-components'

const BtnIncrement = styled.button`
padding: 10px;
background-color: #f00;
color: white;
float: left;
&:hover {
    background-color: black;
    color: white;
    cursor:pointer;
  }
`;

const ValorContador = styled.div`
padding: 10px;
font-size: 30px;
line-height: 20px;
margin-left: 20px;
display:inline-block;
text-align: center;
width: 50px;
background-color: #f1f1f1;
`

function Incrementar(){
  var numero = document.getElementById("contador").innerText;
  numero++;
  document.getElementById("contador").innerText = numero;
}


function App() {
  return (
   
     <BtnIncrement onClick={Incrementar}>Adicionar 1</BtnIncrement>
     <ValorContador id="contador" >2</ValorContador>
   
  );
}

export default App;

State do Hook

Hooks são uma nova adição ao React 16.8. Eles permitem que você use o state e outros recursos do React sem escrever uma classe

State é um "local especial" onde é possível armazenar variáveis que podem ser utilizadas para definir/armazenar o conteúdo de um componente.

useState é um "Gancho do Hook" uma epécie de "cabo" que permite conectar variáveis de estado a componentes funcionais.

Projeto: Contador

Parte 2/2

Objetivo:

Praticar uso do useState

Index.js


import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'

ReactDOM.render(
	<App/>,
	document.getElementById('root')
);

App.js


import React, { useState } from 'react'
import styled from 'styled-components'

const BtnIncrement = styled.button`
padding: 10px;
background-color: #f00;
color: white;
float: left;
&:hover {
    background-color: black;
    color: white;
    cursor:pointer;
  }
`;

const ValorContador = styled.div`
padding: 10px;
font-size: 30px;
line-height: 20px;
margin-left: 20px;
display:inline-block;
text-align: center;
width: 50px;
background-color: #f1f1f1;
`

function App() {
  
  //definindo uma variável no state
  //tem que ser definido dentro do componente
  //React Hook "useState" cannot be called at the top level. React Hooks must be called in a React function component or a custom React Hook function
  const [ valorContador, setValorContador ] = useState( 0 )
  
  function Incrementar(){
    setValorContador( valorContador + 1 )
  }

  return (
   
     <BtnIncrement onClick={Incrementar}>Adicionar 1</BtnIncrement>
     <ValorContador id="contador" >{ valorContador }</ValorContador>
   
  );
}

export default App;

Projeto: Relógio

Parte 1/1

Objetivo:

Reforçar uso do useState

Index.js


import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'

ReactDOM.render(
	<Relogio/>,
	document.getElementById('root')
);

Relogio.js


	import React, { useState } from 'react'


	function Relogio() {
	
		function calculaTempoAtual(data) {
			let hora = data.getHours().toString();
			hora = (hora.length == 1 ? "0" + hora : hora);
			let minuto = data.getMinutes().toString();
			minuto = (minuto.length == 1 ? "0" + minuto : minuto);
			let segundo = data.getSeconds().toString();
			segundo = (segundo.length == 1 ? "0" + segundo : segundo);
			let horas = `Hora Atual = ${hora}:${minuto}:${segundo}`
			
			return horas;
		}
	
		//valor inicial do tempo   
		let tempoAgora = calculaTempoAtual(new Date);
	
		//construindo o state
		let [ tempoExibicao, setTempoAtual ] = useState(tempoAgora)
	
		//atualizando state
		setInterval(() => {
			setTempoAtual(tempoExibicao = calculaTempoAtual(new Date))
		}, 1000);
	
	
		return (
			{tempoExibicao}
		)
	}
	
	export default Relogio

Projeto: Calculadora IMC

Parte 1/2

Objetivo:

Lembrar como é o "Mindset JavaScript"

Index.js


import React from 'react';
import ReactDOM from 'react-dom';
import CalculoIMC from './CalculoIMC'

ReactDOM.render(
  <CalculoIMC/>,
  document.getElementById('root')
);

imc.css


.campo {
    margin:20px 0px;
}
.resultado-container {
    padding: 30px;
    font-size: 30px;
}

.resultado {
    color: #f00;
}

CalculoIMC.js


import React from 'react'
import './imc.css'

function CalculoIMC() {

    function calcularIMC(){
        let peso = document.getElementById("peso").value;
        let altura = document.getElementById("altura").value;

        let resultado = parseFloat(peso) / ( parseFloat(altura)*parseFloat(altura) )  ;

        document.getElementById("resultado").innerText = resultado;
    }

    return (
        
            Calculador de IMC
            
                Peso:
                
            
            
                Altura:
                
            
            
            
                Resultado: resultado
               
        
    )
}

export default CalculoIMC

Projeto: Calculadora IMC

Parte 2/2

Objetivo:

Saber mais sobre o "Mindset React"

Index.js


import React from 'react';
import ReactDOM from 'react-dom';
import CalculoIMC from './CalculoIMC'

ReactDOM.render(
  <CalculoIMC/>,
  document.getElementById('root')
);

CalculoIMC.js

							

import React, { useState } from 'react'
import styled from 'styled-components'

//criação dos componentes estruturais
const Campo = styled.div`
margin:20px 0px;
`;
const ResultadoCotainer = styled.div`
padding: 30px;
font-size: 30px;
`;
const Resultado = styled.div`
color: #f00;
`;

//função para calcular IMC 
function CalculoIMC() {

    let [peso, setPeso] = useState()
    let [altura, setAltura] = useState(1)
    let [resultado, setResultado] = useState()

    //calcula efetivamente resultado do IMC
    function mudaResultado(tipo, valor){
        if (tipo=="peso") {
            let resultado = parseFloat(valor) / ( parseFloat(altura) * parseFloat(altura) )  
            setResultado(resultado)    
        }
        if (tipo=="altura") {
            let resultado = parseFloat(peso) / ( parseFloat(valor) * parseFloat(valor) )  
            setResultado(resultado)    
        }
    }

    //incia processo de calculo do IMC
    function calcularIMC(e){
        if (e.target.id=="peso") {
            setPeso(e.target.value)
            mudaResultado("peso", e.target.value)
        }
        if (e.target.id=="altura") {
            setAltura(e.target.value)
            mudaResultado("altura", e.target.value)
        }
    }

    return (
        
            Calculador de IMC
            <Campo>
                Peso:
                
            </Campo>
            <Campo>
                Altura:
                
            </Campo>
            <ResultadoCotainer>
                Resultado: <Resultado>{resultado}</Resultado>
            </ResultadoCotainer>   
        
    )
}

export default CalculoIMC

Index.js