React > React > Flashcards

React Flashcards

(16 cards)

Study These Flashcards
1
Q

Como adicionar um elemento no DOM do react?

A

ReactDOM.render(elemento, selecionar onde será inserido)

ReactDOM.render(<p>olá, sou o Paulo</p>, document.getElementById(“root”);

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q 
// Challenge: Create your own custom React component!
// Call it "MainContent", and have it return a simple
// h1 element that says "I'm learning React!"

// Afterward, render it below the Navbar (which
// you can do inside the ReactDOM.render call below)

function Navbar() {
    return (

        <a href="#">Navbar</a>

            <span></span>
            <div>
                <ul>
                <li>
                    <a href="#">Home <span>(current)</span></a>
                </li>
                <li>
                    <a href="#">Link</a>
                </li>
                <li>
                    <a href="#">
                    Dropdown
                    </a>
                    <div>
                    <a href="#">Action</a>
                    <a href="#">Another action</a>
                    <div></div>
                    <a href="#">Something else here</a>
                    </div>
                </li>
                <li>
                    <a href="#">Disabled</a>
                </li>
                </ul>
                Search

        </div>

) }

ReactDOM.render(
<div>

</div>,
document.getElementById("root") )
A 
function Navbar() {
    return (

        <a href="#">Navbar</a>

            <span></span>
            <div>
                <ul>
                <li>
                    <a href="#">Home <span>(current)</span></a>
                </li>
                <li>
                    <a href="#">Link</a>
                </li>
                <li>
                    <a href="#">
                    Dropdown
                    </a>
                    <div>
                    <a href="#">Action</a>
                    <a href="#">Another action</a>
                    <div></div>
                    <a href="#">Something else here</a>
                    </div>
                </li>
                <li>
                    <a href="#">Disabled</a>
                </li>
                </ul>

                Search

        </div>

) }
// Challenge: Create your own custom React component!
// Call it "MainContent", and have it return a simple
// h1 element that says "I'm learning React!"

// Afterward, render it below the Navbar (which
// you can do inside the ReactDOM.render call below)

function MainContent() {
    return (
        <h1>I'm learning React!</h1>
    )
}

ReactDOM.render(
<div>

</div>,
document.getElementById("root") )
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Why React?

A

É possível quebrar elementos do HTML em componentes.
É declarativo => O que precisa ser feito? Apenas me diga o que fazer e não se preocupe como eu vou fazer isso.

Imperativo é mais algo como faço isso? Me descreva cada paço de como fazer isso e eu farei.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

// ReactDOM.render(<h1>Hello, React!</h1>, document.getElementById(“root”))

/*
Challenge - recreate the above line of code in vanilla JS by creating and
appending an h1 to our div#root (without using innerHTML).

  • Create a new h1 element
  • Give it some textContent
  • Give it a class name of “header”
  • append it as a child of the div#root

*/

A

const h1 = document.createElement(“h1”)

h1. textContent = “This is an imperative way to program”
h1. className = “header”
document. getElementById(“root”).append(h1)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

O que é JSX?

A

É chamada JSX e é uma extensão de sintaxe para JavaScript. Recomendamos usar JSX com o React para descrever como a UI deveria parecer.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

Como reenderizar mais de um componente com o ReactDOM?

A 
// JSX
const page = (
    <div>
        <h1>This is JSX</h1>
        <p>This is a paragraph</p>
    </div>
)

console.log(page)

ReactDOM.render(
page,
document.getElementById(“root”)
)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

/*
Challenge: Starting from scratch, build and render the
HTML for our section project. Check the Google slide for
what you’re trying to build.

We’ll be adding styling to it later.

Hints:
* The React logo is a file in the project tree, so you can
access it by using src="./react-logo.png" in your image element * You can also set the width` attribute of the image element
just like in HTML. In the slide, I have it set to 40px
*/

A

import React from “react”
import ReactDOM from “react-dom”

const page = (
    <div>
    <img>
    <h1>Fun facts about React</h1>
    <ul>
        <li>Was first released in 2013</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Itme 4</li>
    </ul>
    </div>
);

ReactDOM.render(page, document.getElementById(“root”))

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

O que é necessário para uma função javascript ser um componente do React?

A 
Ter seu nome em camel case e a sintaxe em sua chamada:
function TemporaryName() {
    return ( ) 
}

ReactDOM.render(, document.getElementById(“root”))

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q 
/**
Challenge:

Part 1: Create a page of your own using a custom Page component

It should return an ordered list with the reasons why you’re
excited to be learning React :)

Render your list to the page

*/

A

import React from ‘react’
import ReactDOM from ‘react-dom’

function ListComponent() {
    return (
        <ol>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
        </ol>
    )
}

ReactDOM.render(, document.getElementById(“root”));

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

What is a React component?

A

A function that returns React elements. (UI)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

import React from “react”
import ReactDOM from “react-dom”

/**
Mini Challenge:
Move the `header` element from Page into 
its own component called "Header"
*/
function Page() {
    return (
        <div>
                <img>

        <h1>Reasons I'm excited to learn React</h1>
        <ol>
            <li>It's a popular library, so I'll be 
            able to fit in with the cool kids!</li>
            <li>I'm more likely to get a job as a developer
            if I know React</li>
        </ol>

            <small>© 2021 Ziroll development. All rights reserved.</small>

    </div>
) }

ReactDOM.render(, document.getElementById(“root”))

A

import React from “react”
import ReactDOM from “react-dom”

/**
Mini Challenge:
Move the `header` element from Page into 
its own component called "Header"
*/
function Header() {
    return (
            <img>

) }
function Page() {
    return (
        <div>
        <h1>Reasons I'm excited to learn React</h1>
        <ol>
            <li>It's a popular library, so I'll be 
            able to fit in with the cool kids!</li>
            <li>I'm more likely to get a job as a developer
            if I know React</li>
        </ol>

            <small>© 2021 Ziroll development. All rights reserved.</small>

    </div>
) }

ReactDOM.render(, document.getElementById(“root”))

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q 
/**
Challenge: Project setup
  • Create a components folder
  • Create the following components in separate files inside
    the components folder. In each one, just render an h1
    with the name of the component (e.g. return <h1>Navbar goes here</h1>):
    • Navbar
    • Main
  • Create an App component outside the components folder (sibling to
    the index.js file)
    • Have App render the Navbar and Main components
  • Import and render the App component inside of index.js using ReactDOM
    • At this point you should have your “Navbar goes here” etc. showing up
      in the mini-browser.
  • Go to Google fonts and get the “Inter” font with weights 400, 600, and 700.
    Put the links to those fonts ABOVE the style.css link in index.html (Use
    the `` elements instead of the @import or npm options for getting
    the fonts. You may need to do some extra research to figure out how this
    works if you haven’t done it before)
    */
A 
//components/Main.js
import React from 'react'

export default function Main() {
    return (
        <h1>Main goes here</h1>
    )   
}

//components/Navbar.js
import React from 'react'
export default function Navbar() {
    return (
        <h1>Navbar goes here</h1>
    )   
}

//App.js
import React from 'react'
import Main from './components/Main'
import Navbar from './components/Navbar'

export default function App() {
return (
<div>

</div>
) }
//index.js
import React from 'react'
import ReactDOM from 'react-dom'
import Main from './components/Main'
import Navbar from './components/Navbar'
import App from './App'

ReactDOM.render(, document.getElementById(“root”))

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

Como exibir um elemento apenas se ele for recebido pelo componente do React?

A

Exemplo para a propriedade setup
{props.setup && <h3>Setup: {props.setup}</h3>}

<h3>Setup: {props.setup}</h3>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

Como passar parâmetros javascript como props para um componente do react?

A
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

Utilize map em arrays de dados

https://scrimba.com/learn/learnreact/mapping-components-co20249b69609b9df5473acc7

A 
export default function App() {
    const jokeElements = jokesData.map(joke => {
        return 
    })
    return (
        <div>
            {jokeElements}
        </div>
    )
}
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

How pass a lot of parameters to a react component?

Study These Flashcards
A

Using Spread Syntax

https: //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#spread_in_object_literals
https: //scrimba.com/learn/learnreact/project-spread-object-as-props-cobc143b6a3172ef8cfd398f2

React
flashcards
Decks in class (3)
# Cards
Brainscape helps you reach your goals faster, through stronger study habits.
© 2026 Bold Learning Solutions. Terms and Conditions