This file contains 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
.article { | |
height: 100%; | |
position: relative; | |
overflow: hidden; | |
} | |
.picture { | |
object-fit: cover; | |
width: 100%; | |
height: 100%; |
This file contains 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 styles from "./Image.module.css"; | |
import background from "../../assets/img/background.png"; | |
const Image = () => { | |
return ( | |
<article className={styles.article}> | |
<img className={styles.image} src={background} alt="background" /> | |
<h1 className={styles.header}>React Is Awesome</h1> | |
</article> |
This file contains 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
.article { | |
height: 100%; | |
background-repeat: no-repeat; | |
background-position: center; | |
background-size: cover; | |
display: grid; | |
place-items: center; | |
} | |
.header { |
This file contains 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 styles from "./Background.module.css"; | |
import background from "../../assets/img/background.png"; | |
const Background = () => { | |
return ( | |
<article | |
className={styles.article} | |
style={{ backgroundImage: `url(${background})` }} | |
> |
This file contains 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 uniq from "lodash/uniq"; | |
const users = ["Aaron", "John", "Mary", "John", "Angel", "Mary"]; | |
const Users = () => { | |
return ( | |
<div> | |
<strong>Unique names</strong> | |
<ul> | |
{uniq(users).map((user) => ( |
This file contains 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, useCallback } from "react"; | |
import debounce from "lodash/debounce"; | |
const Input = () => { | |
const [inputValue, setInputValue] = useState(""); | |
const sendQuery = (query) => { | |
// Call API with query parameter here | |
console.log(query); | |
}; |
This file contains 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
const users = [ | |
{ name: "John", age: 24 }, | |
{ name: "Linda", age: 19 }, | |
{ name: "Josh", age: 33 } | |
]; | |
function App () { | |
return ( | |
<div className="App"> | |
{users |
This file contains 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
const users = [ | |
{ name: "John", age: 24 }, | |
{ name: "Linda", age: 19 }, | |
{ name: "Josh", age: 33 } | |
]; | |
function App() { | |
return ( | |
<div className="App"> | |
<ul> |
This file contains 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
const users = [ | |
{ name: "John", age: 24 }, | |
{ name: "Linda", age: 19 }, | |
{ name: "Josh", age: 33 } | |
]; | |
function App() { | |
const renderUsers = () => { | |
const result = []; |
This file contains 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
const users = [ | |
{ name: "John", age: 24 }, | |
{ name: "Linda", age: 19 }, | |
{ name: "Josh", age: 33 } | |
]; | |
function App() { | |
const renderUsers = () => { | |
const result = []; | |
for (const userIndex in users) { |