#VemProReact #3

#VemProReact

#VemProReact #2

<title>#VemProReact</title>
animation: App-logo-spin infinite 10s linear reverse;

HTML

CSS

#VemProReact

#VemProReact #2

App.css

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

import Logo from './Logo'
import Text from './Text'
import Link from './Link'

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Logo />
        <Text />
        <Link />
      </header>
    </div>
  );
}

export default App;
.App {
  text-align: center;
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

App.js

#VemProReact

#VemProReact #2

import React from 'react';
import logo from './logo.svg';
import './Logo.css';

function Logo() {
  return (
    <img src={logo} className="App-logo" alt="logo" />
  );
}

export default Logo;

Logo.js

#VemProReact

#VemProReact #2

Logo.css

.App-logo {
  animation: App-logo-spin infinite 10s linear reverse;
  height: 40vmin;
  pointer-events: none;
  transition: all;
}

@keyframes App-logo-spin {
  0% {
    height: 40vmin;
    transform: rotate(0deg);
  }
  50% {
    height: 20vmin;
  }
  100% {
    height: 40vmin;
    transform: rotate(360deg);
  }
}

#VemProReact

#VemProReact #2

import React from 'react';

function Text() {
  return (
    <p>
      Edit <code>src/App.js</code> and save to reload.
    </p>
  );
}

export default Text;

Text.js

#VemProReact

#VemProReact #2

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

function Link() {
  return (
    <a
      className="App-link"
      href="https://reactjs.org"
      target="_blank"
      rel="noopener noreferrer"
    >
      Learn React
    </a>
  );
}

export default Link;

Link.js

Link.css

.App-link {
  color: #61dafb;
}

#VemProReact

#VemProReact #2

E as Arrow Functions?

#VemProReact

Arrow Functions

  • Este termo vem da utilização dos sinais "=>"
  • É uma maneira simplificada de escrever uma função
  • Não tem a palavra chave this
  • Não pode ser usada como constructor
  • Podem ser declaradas e executadas no mesmo instante (IIFE)

Exemplos:

const soma = (a, b) => {
  return a + b;
}
const soma = (a, b) => a + b;
let soma;

(() => {
    soma = a + b;
})(a, b);

#VemProReact

Arrow Functions

Como transformar uma function expression em arrow function?

#VemProReact

Arrow Functions

function soma(a, b) {
    return a + b;
}
const soma = (a, b) => {
    return a + b;
}
const soma = (a, b) => a + b;

Considerando a função soma abaixo:

Seria, simplesmente, criar uma variável para receber a função, remover a  palavra function e adicionar a arrow:

Como a função só retorna valores, ainda podemos omitir o return e as chaves:

#VemProReact

Components

  • São uma forma de você dividir sua aplicação React em partes menores de código
  • Facilita a manutenção
  • Evita a repetição de código comum
  • Facilita os testes unitários
  • Podem ser utilizados dentro de outros componentes
  • Existem duas maneiras de escrevermos componentes
  • Podem receber parâmetros (props)

Na teoria:

#VemProReact

Components

Na prática:

São uma um tipo de função que retorna um código HTML JSX, e que poderá ser utilizada várias vezes em qualquer lugar da aplicação

#VemProReact

Function Components

É a maneira mais simples de definir um componente React

Na teoria:

import React from 'react';

const Text = () => (
  <p>
    Edit <code>src/App.js</code> and save to reload.
  </p>
);

export default Text;

Exemplo:

#VemProReact

Function Components

Na prática...

import React from 'react';

Importamos o React:

const Text = () => (
  <p>
    Edit <code>src/App.js</code> and save to reload.
  </p>
);

Criamos a função:

export default Text;

Exportamos o componente:

#VemProReact

Function Components

E para utilizar...

import Text from './Text';

Importamos o componente:

<Text />

E utilizamos como se fosse uma tag HTML:

Simples assim!

#VemProReact

Class Components

Criamos uma classe e adicionamos o método render para retornar o JSX

Na teoria:

import React from 'react';

class Text extends React.Component {
  render() {
    return (
      <p>
        Edit <code>src/App.js</code> and save to reload.
      </p>
    );
  }
}

export default Text;

Exemplo:

#VemProReact

Class Components

Na prática...

import React from 'react';

Importamos o React:

class Text extends React.Component {
  render() {
    return (
      <p>
        Edit <code>src/App.js</code> and save to reload.
      </p>
    );
  }
}

Criamos a classe, extendendo React.Component:

export default Text;

Exportamos o componente:

#VemProReact

Class Components

E para utilizar...

import Text from './Text';

Importamos o componente:

<Text />

E utilizamos como se fosse uma tag HTML:

Simples assim! #Déjà vu

#VemProReact

props

Props, basicamente, são parâmetros que podemos passar para o componente

Existem props nativas do React.

Por exemplo: children

Não precisam ser declaradas dentro do componente

São imutáveis! Ou seja, não podemos modificar o valor de uma prop dentro do componente

#VemProReact

props

Lembrando da semelhança entre componentes e funções, as props são o primeiro parâmetro da função:

const Ola = (props) => <h1>Olá, {props.nome}!</h1>;
<Ola nome="Daniel" />

E num componente de classe, são um método:

class Ola extends Coponent {
    render() {
        return <h1>Olá, {this.props.nome}!</h1>;
    }
}

E para defini-las:

#VemProReact

Dúvidas?

#VemProReact

Dever de casa!

  • Converter todos os componentes para arrow functions

 

  • Criar um componente para o header que está dentro do App.js, também com arrow function
    Dica: use a prop "children" para manter o mesmo formato e deixar os outros components dentro da "tag"

 

  • Estudar o conceito de Destructuring Assignment e trazer o que entendeu para o nosso próximo encontro

#VemProReact

#Desafio!

Depois de fazer os deveres, adicione uma prop chamada "repeat" ao seu componente Logo, informando um número entre 1 e 6.

Dentro do componente Logo, crie uma inteligência para repetir a imagem o número de vezes que receber nesta prop.

Dica: lembre-se que um componente contém JSX, e não HTML.

Ou seja, você pode misturar JavaScript com HTML.

Isto vai te ajudar a resolver o desafio mais facilmente.

Além disto, faça com que cada imagem gire no sentido oposto à próxima. Por exemplo: a primeira em sentido horário, a segunda em sentido anti-horário e assim por diante.

#VemProReact

Obrigado!

#VemProReact #3

By Softplan Planejamento e Sistemas

Made with Slides.com

#VemProReact #3

  • 119

More from Softplan Planejamento e Sistemas