1

Question 1

What is ES6

Answer 1

ES6 is a newer version of Javascript that allows concise and declarative syntax.

Question 2

What is JSX

Answer 2

Javascript rendition of HTML

Question 3

How do you import React?

Answer 3

import React from “react”

Question 4

How do you import ReactDOM?

Answer 4

import ReactDOM from “react-dom”

Question 5

How do you render to the DOM in React?

Answer 5

ReactDOM.render(<h1>code here</h1>. document.getElementById(“root”))

where root is the div references in your index.html

Question 6

How can you add multiple html tags into the DOM?

Answer 6

Wrap them in a <div></div>

Question 7

What is the syntax for a basic function?

Answer 7

function MyApp() { return (<h1>Hello World</h1>) }

Question 8

Basic full example.

Answer 8

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

function MyApp() {
  return (
    <div>
      <h1>Kevin Jones</h1>
      <p>I like turtles!</p>
      <p>I also like...</p>
      <ul>
        <li>Pizza</li>
        <li>Sushi</li>
        <li>KungFu</li>
      </ul>
    </div>
  )
}

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

Question 9

How to export a function?

Answer 9

export default MyFunction

Question 10

How to import a js or jsx from index.js?

Answer 10

import MyFunction from “./MyFunction”

Question 11

how to add style to a js or jsx html elements?

Answer 11

Use className i.e. <h1> - a DOM API property

update styles.css</h1>

Question 12

Syntax for basic arrow function, hello world? (useful for anon functions)

Answer 12

function HelloWorld = () => <h1>Hello world!</h1>

Question 13

How to use variables in jsx?

Answer 13

Use curly braces… i.e. <h1>Hello {firstName} {lastName}</h1>

allows javascript execution. another example…

<h1>Hello {`${firstName} ${lastName}`}!</h1>

Question 14

Example of dynamic variable rendering with React

Answer 14

function App() {
  const date = new Date()
  const hours = date.getHours()
  let timeOfDay

  if (hours < 12) {
    timeOfDay = "morning"
  } else if (hours >= 12 && hours < 17) {
    timeOfDay = "afternoon"
  } else {
    timeOfDay = "night"
  }

return (
<h1>Good {timeOfDay}!</h1>
)
}

Question 15

How to set background color on style tag with jsx? And font size?

Answer 15

Use backgroundColor: “#FF8C00” camel case syntax.

or fontSize: 24

Question 16

Example dynamic styles.

Answer 16

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

function App() {
  const date = new Date(2018, 6, 31, 15)
  const hours = date.getHours()
  let timeOfDay
  const styles = {
    fontSize: 30
  }

  if (hours < 12) {
    timeOfDay = "morning"
    styles.color = "#04756F"
  } else if (hours >= 12 && hours < 17) {
    timeOfDay = "afternoon"
    styles.color = "#8914A3"
  } else {
    timeOfDay = "night"
    styles.color = "#D90000"
  }

return (
<h1 style="">Good {timeOfDay}!</h1>
)
}

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

Question 17

How to read props objects, example ContactCard.js

Answer 17

import React from “react”

function ContactCard(props) {
console.log(props)
return (
<div>
<img></img>
<h3>{props.contact.name}</h3>
<p>Phone: {props.contact.phone}</p>
<p>Email: {props.contact.email}</p>
</div>
)
}

export default ContactCard

Question 18

How to pass object values via props? App.js

Answer 18

import React from “react”
import ContactCard from “./ContactCard”

function App() {
    return (
        <div>

    </div>
) }

export default App

Question 19

Check for existence of a specific variable and render dynamically?

Answer 19

Dynamic style using ternary

<h3>Question: {props.question}</h3>

Or…

<h3>Question: {props.question}</h3>

Question 20

Example map function

Answer 20

const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    const doubled = nums.map(function(num) {
        return num * 2
    })
    console.log(doubled)

Question 21

How to create const arrow function of data from JSON object. (using map function)

Answer 21

import React from “react”

import Joke from “./Joke”
import jokesData from “./jokesData”

function App() {
    const jokeComponents = jokesData.map(joke => )

    return (
        <div>
            {jokeComponents}            
        </div>
    )
}

export default App

Question 22

References for Javascript global objects (functions)

Answer 22

// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/every
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findindex

Question 23

convert to specific currency string

Answer 23

<p>{props.product.price.toLocaleString("en-US", { style: "currency", currency: "USD" })}</p>

Question 24

example of passing nested object from one component to another…

Answer 24

import React from “react”
import Product from “./Product”
import productsData from “./vschoolProducts”

function App() {
    const productComponents = productsData.map(item => )

  return (
    <div>
        {productComponents}
    </div>
  )
}

export default App

==== Product.js ======

import React from “react”

function Product(props) {
    return (
        <div>
            <h2>{props.product.name}</h2>
            <p>{props.product.price.toLocaleString("en-US", { style: "currency", currency: "USD" })} - {props.product.description}</p>
        </div>
    )
}

export default Product

Question 25

function vs class method example

Answer 25

function App() {
    return (
        <div>
            <h1>Code goes here</h1>
        </div>
    )
}

class App extends React.Component {
    render() {
        return (
            <div>
                <h1>Code goes here</h1>
            </div>
        )
    }
}

Question 26

Basic setup of state using a constructor

Answer 26

import React from “react”

// https://scrimba.com/p/p4Mrt9/cQnMDHD

class App extends React.Component {
    constructor() {
        super()
        this.state = {
            answer: "Yes"
        }
    }

    render() {
        return (
            <div>
                <h1>Is state important to know? {this.state.answer}</h1>
            </div>
        )
    }
}

export default App

Question 27

How to pass down state via props to a child component?

Question 28

Another state example

Answer 28

import React, {Component} from “react”

// Challenge:
// Given an incomplete class-based component without a constructor, 
// add a constructor and initialize state to fix the broken component.

class App extends Component {
    constructor() {
        super()
        this.state = {
            name: "Kevin",
            age: "41"
        }
    }
    render() {
        return (
            <div>
                <h1>{this.state.name}</h1>
                <h3>{this.state.age} years old</h3>
            </div>
        )    
    }
}

export default App

Question 29

Example of dynamic variables based on state

Answer 29

import React from “react”

class App extends React.Component {
    constructor() {
        super()
        this.state = {
            isLoggedIn: true
        }
    }

    render() {
        let wordDisplay
        if (this.state.isLoggedIn === true) {
            wordDisplay = "in"
        } else {
            wordDisplay = "out"
        }
        return (
            <div>
                <h1>You are currently logged {wordDisplay}</h1>
            </div>
        )
    }

Question 30

Example click function with console log

Answer 30

import React from “react”

function handleClick() {
    console.log("I was clicked")
}

function App() {
    return (
        <div>
            <img>
            <br>
            <br>
            Click me
        </div>
    )
}

export default App

//full list of supported events: https://reactjs.org/docs/events.html#supported-events

Question 31

How to change state in react?

Answer 31

call this.setState()

Question 32

Handleclick counter full example…

Answer 32

import React from “react”

class App extends React.Component {
    constructor() {
        super()
        this.state = {
            count: 0
        }
        this.handleClick = this.handleClick.bind(this)
    }

    handleClick() {
        this.setState(prevState => {
            return {
                count: prevState.count + 1
            }
        })
    }

    render() {
        return (
            <div>
                <h1>{this.state.count}</h1>
                Change!
            </div>
        )
    }
}

export default App

Question 33

Example state with multiple buttons

Answer 33

import React from “react”

class App extends React.Component {
    constructor() {
        super()
        this.state = {
            count: 0
        }
        this.addTo = this.addTo.bind(this)
        this.subFrom = this.subFrom.bind(this)
    }

    addTo() {
        this.setState(prevState => {
            return {
                count: prevState.count + 1
            }
        })
    }

   subFrom() {
        this.setState(prevState => {
            return {
                count: prevState.count - 1
            }
        })
    }

    render() {
        return (
            <div>
                <h1>{this.state.count}</h1>
                \+1
                -1
            </div>
        )
    }
}

export default App

Question 34

How to create an onChange that has props id passed to it?

Answer 34

from render() function: 
        const todoItems = this.state.todos.map(item => )

handleChange(id) { stuff }

to Component:

         props.handleChange(props.item.id)}
        />

Question 35

Todo checkbox example.

Answer 35

===== App.js =====
import React from “react”
import TodoItem from “./TodoItem”
import todosData from “./todosData”

class App extends React.Component {
    constructor() {
        super()
        this.state = {
            todos: todosData
        }
        this.handleChange = this.handleChange.bind(this)
    }

    handleChange(id) {
        this.setState(prevState => {
            const updatedTodos = prevState.todos.map(todo => {
                if (todo.id === id) {
                    todo.completed = !todo.completed
                }
                return todo
            })
            return {
                todos: updatedTodos
            }
        })
    }

    render() {
        const todoItems = this.state.todos.map(item => )

        return (
            <div>
                {todoItems}
            </div>
        )    
    }
}

export default App

===== TodoItem.js =====

import React from “react”

function TodoItem(props) {
    return (
        <div>
             props.handleChange(props.item.id)}
            />
            <p>{props.item.text}</p>
        </div>
    )
}

export default TodoItem

Question 36

What lifecycle method should be used to do initial data ingest?

Answer 36

componentDidMount()

Question 37

What lifecycle method should be used to check whether a specific component should update?

Answer 37

shouldComponentUpdate(nextProps, nextState) { // check for true or fales here }

Question 38

What lifecycle component should be uses to clean up or teardown before your component disappears?

Answer 38

componentWillUnmount()

Question 39

How to use derived state from props? When Components need their own dedicated state. Discouraged by React team.

Answer 39

static getDerivedStateFromProps(props, state) { }

// blog on why this isn't really needed
// https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html

Question 40

How can I use a lifecycle method to backup an object or state?

Answer 40

getSnapshotBeforeUpdate() { }

Question 41

How to use lifecycle method to always run code when component updates?

Answer 41

componentDidUpdate(prevProps, prevState) { }