Douglas Antonio Braga Novato douglasabnovato
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from 'react'; | |
| ... | |
| function App() { | |
| return ( | |
| <div className="wrapper"> | |
| <h1>Animals</h1> | |
| {data.map(animal => ( | |
| <AnimalCard | |
| key={animal.name} | |
| name={animal.name} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| export default [ | |
| { | |
| name: 'Lion', | |
| scientificName: 'Panthero leo', | |
| size: 140, | |
| diet: ['meat'], | |
| }, | |
| { | |
| name: 'Gorilla', | |
| scientificName: 'Gorilla beringei', |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { useState, useEffect } from "react"; | |
| export default function App() { | |
| const [contador, setContador] = useState(0); | |
| useEffect(() => { | |
| return () => console.log("Aqui é quando o componente será desmontado!"); | |
| }, []); | |
| return ( |
douglasabnovato
/ codigo-4.js
Created
March 7, 2023 20:00
Código 4. Atualização do ciclo de vida de um componente
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { useState, useEffect } from "react"; | |
| export default function App() { | |
| const [contador, setContador] = useState(0); | |
| useEffect(() => { | |
| console.log("executará o useEffect toda a vez que o [contador] mudar"); | |
| }, [contador]); | |
| return ( |
douglasabnovato
/ montagem.js
Created
March 7, 2023 19:49
Código 3. Montagem do ciclo de vida de um componente
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { useState, useEffect } from "react"; | |
| export default function App() { | |
| const [contador, setContador] = useState(0); | |
| useEffect(() => { | |
| console.log("executa o useEffect ao renderizar o componente"); | |
| }, []); | |
| return ( |
douglasabnovato
/ useState.js
Created
March 7, 2023 19:46
Código 2. Inicialização do ciclo de vida de um componente
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { useState } from "react"; | |
| export default function App() { | |
| const [contador, setContador] = useState(0); | |
| return ( | |
| <div className="App"> | |
| <h1>Contador: {contador}</h1> | |
| <button onClick={() => setContador(contador + 1)}>+</button> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $fundo : aliceblue | |
| body | |
| background-color: $fundo | |
| width: 100vw | |
| height: 100vh | |
| display: flex | |
| flex-direction: column | |
| justify-content: center | |
| align-items: center |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Desafio Menu</title> | |
| <link href="./estilo.css" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <main> | |
| <h1>Lista:</h1> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| div | |
| /*formatações*/ | |
| nav | |
| /*formatações*/ | |
| h1 | |
| /*formatações*/ | |
| ul | |
| /*formatações*/ | |
| li | |
| /*formatações*/ |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| div { | |
| /*formatações*/ | |
| } | |
| div nav { | |
| /*formatações*/ | |
| } | |
| div nav h1{ | |
| /*formatações*/ |