React - Scrimba Course

Question 1

Why React?

Answer 1

• They use the virtual DOM
• Reusasable Web Components
• Maintained by Facebook
• Hirable

Question 2

How to import react?

Answer 2

import React, {Component} from “react”

import ReactDOM from “react-dom”

Question 3

create-react-app

Answer 3

1. npm install create-react-app -g
<hr>
<b>2.create-react-app 'your-app-name'</b>
<hr>
3.cd 'your-app-name'
4.npm start

Question 4

JSX

Answer 4

Javascript version of HTML
Stands for –
Javascript XML

Question 5

How to render something to the page at the end of the document?

Answer 5

ReactDOM.render( whatDoWeWantToRender, toWhere)
or…
ReactDOM.render( <h1>Hello World!</h1>, document.getElementById(‘root’));

Question 6

Functional Components

Answer 6

The reason they call it that because you create them by writing a function.

Question 7

Component Naming Convetion

Answer 7

Component Names are Typically Capatalized with Camel Case
MyComponent()
or
ThisApp()
not
thisApp()

Question 8

How do you send more than one element in a component?

Answer 8

You must wrap it in a div

Question 9

Example of a functional component?

Answer 9

function MyApp() {
 return (
       JSX HERE
  )
}

Question 10

How to add inline CSS to Component?

Answer 10

style = {{ color: ‘blue’ }}
also, if there is a dash change to camel case
for example
background-color into backgroundColor

Question 11

Anywhere you are using JSX you need to…

Answer 11

import React from “react”

Question 12

How do you export something as the end of the component file?

Answer 12

export default MyComponentName

Question 13

It’s usually a good idea to name your seperate JS File the same as your….

Answer 13

Component Function Name...
Example - 
MyInfo.js
and
function MyInfo () {
}
export default MyInfo

Question 14

How to import your own module or file?

Answer 14

import MyInfo from “./MyInfo”
don’t forget the ./
You also don’t need the .js extension because it is the defaulted file extension

Question 15

What is a good place to store all your components?

Answer 15

In a file named Components
So, now your import will be -
“./Components/MyInfo”

Question 16

How do you add a class in JSX?

Answer 16

className=”class”
You can do this with react elements, and not the acutally components…
Like, don’t do this
No No No

Question 17

How can you add CS on same page?

Answer 17

Create a new object named styles...
const styles = {
 color: "blue"
}
then later use the object in your JSX
h1 style="" -Yo-  h1

Question 18

Why would you add inline styles, instead of class with seperate CSS file?

Answer 18

If you want the styles to be dynamic and change them with JS.
For instance, the text color being different because the time of day.

Question 19

Where do you store prop values?

Answer 19

Inside the Instance
for example
RenderComponent propName=”property”

Question 20

How to access your props within your JS file?

Answer 20

add props into your functions as a variable
example
function Instance(props) {
}
then
{props.value} is the value from the instance occurrence

Question 21

Self closing tag in JSX?

Answer 21

Different, because you must close them! 
-hr- 
becomes - 
hr / -
and so on...

Question 22

Ternary Operators?

Answer 22

The conditional (ternary) operator is the only JavaScript operator that takes three operands. This operator is frequently used as a shortcut for the if statement. If condition is true, the operator returns the value of expr1; otherwise, it returns the value of expr2.

Question 23

Ternary Examples:

BOOLEAN ? DoThisIfTrue : DoThisIfFalse

Answer 23

if(userIsYoungerThan21) {
  serveGrapeJuice();
}
else {
  serveWine();
}
This can be shortened with the ?: like so:

userIsYoungerThan21 ? serveGrapeJuice() : serveWine();

In Javascript conditional operator can evaluate to an expression, not just a statement:

var userType = userIsYoungerThan18 ? “Minor” : “Adult”;

serveDrink(userIsYoungerThan21 ? “Grape Juice” : “Wine”);

They can even be chained:

userIsYoungerThan4 ?
serveMilk() : userIsYoungerThan21
? serveGrapeJuice() : serveWine();

Question 24

Name 8 High Order Functions:

Answer 24

filter
map
sort
reduce
every
some
find
findindex

Question 25

Explain filter

Answer 25

High Order Function

Question 26

Explain map

Answer 26

High Order Function - Method
First, you need an array, we’ll call it arrayOne.
Then you need to define a second array, we’ll call it arrayTwo.
Now you must make arrayTwo = arrayOne, like so…
let arrayTwo = arrayOne;
Now add the .map method on arrayOne like so…
let arrayTwo = arrayOne.map();
Now, .map runs a callback function inside of it, and it runs for as many times as the index for arrayOne, so if arrayOne = [0, 2, 4] then .map will fun three times, using the first argument as the value of the index….
so…
let arrayTwo = arrayOne.map( x => x+2) would make arrayTwo equal ====
[2, 4, 6]
Pretty cool!

Question 27

Explain sort

Answer 27

High Order Function

Question 28

Explain reduce

Answer 28

High Order Function

Question 29

Explain every

Answer 29

High Order Function

Question 30

Explain some

Answer 30

High Order Function

Question 31

Explain find

Answer 31

High Order Function

Question 32

Explain findindex

Answer 32

High Order Function

Question 33

How to make numbers into dollar strings?

Answer 33

number.toLocaleString(“en-US”, { style: “currency”, currency: “USD” })
or
(5234.342343)toLocaleString(‘en-US’, {style: ‘currency’, currency: “USD}) = “$5234.34”

Question 34

How to pull data from array from a different file, perhaps a json file, and load onto screen for how many items they have!

Answer 34

import React from “react”
import TodoItem from “./TodoItem”
import todosData from “./todosData”

function App() {
    const todoItems = todosData.map(item => return item )
    return (
        <div>
            {todoItems}
        </div>
    )
}

export default App

Question 35

Function into class based component example?

Answer 35

function App() {
    return (
        - div>
            - h1>Code goes here -/h1>
        -/div>    )}
vs
class App extends React.Component {
render {
return ( JSX
)}}

Question 36

Where should you put the <b>display logic</b> of a class based component?

Answer 36

Between render() { }
and return ( )
for example - 
render () {
    xx display logic xx
    return (
      JSX
    )
  }

Question 37

How do you call a method inside a render?

Answer 37

After render() { You would call it using the THIS keyword, for example —-

class App extends React.Component {

    yourMethodHere() {
        xxxxxxxxxxxxxxxxxxxxxxx
    }
    render() {
        const foo = this.yourMethodHere()
        return (
            <div>
                <h1 style="">Code goes here</h1>
            </div>
        )
    }
}
export default App
WARNING - THERE ARE CAVEATS WITH THIS!!!

Question 38

How do you call props inside a class based component?

Answer 38

{this.props.whatever}

Question 39

Can props change?

Answer 39

No, they are immutable.

Question 40

What is state in React?

Answer 40

Its a way to change it’s own data, and then refresh the DOM so that you can see the change visually.

Question 41

How do you define state?

Answer 41

constructor() {
        super()
        this.state = {
            answer: "Yes"
        }
    }

Question 42

How to toggle in state?

Answer 42

Conditional rendering

Question 43

Event Handling in React?

Answer 43

All of our event handlers are going to be the JS version with camel case convention.
onClick
onMouseOver
ect.
Full List -
https://reactjs.org/docs/events.html#supported-events

Question 44

How to add a method before render?

Answer 44

Just type in the name, initialize and define

handleClick() {
   console.log("I'm working!")
}
then comes render() { return ( JSX )}
within JSX call it by using: this.handClick - don't initialize...

Question 45

Do you change state directly?

Answer 45

No, you don’t modify the clothes you are already wearing. You take the old ones off, and put on new ones….

Question 46

What is setState?

Answer 46

It’s a method. 2 ways - 1st object literal -
this.setState( { x: “x” }) —
2nd
in order to access the old you state, you much pass it in as an argument, with the function as it’s first value…

this.setState((prevState){
return { count: prevState.count+1; }
})

Question 47

When you are using setState, don’t forget to…

Answer 47

bind it - inside the constructor method —-

this.handleClick = this.handleClick.bind(this)

Question 48

Events, when they fire, actually receive a…

Answer 48

event property… so it’s not good enough so say props.handleChange(props.item.id)…
you much call it with event? ->
onChange={(event) => props.handleChange(props.item.id)}

Question 49

componentDidMount () {

}

Answer 49

Life Cycle Method, inside class -
Essentially saying “you were just born!”
This component just mounted to the screen!
Mostly Used for API Calls
As soon as the component mounts, I can get the data I need to correctly display…

Question 50

componentWillReceiveProps (???) {
    if (???.whatever !== this.props.whatever) {
    ...do something important here
  }
}
DEPRICATED!!!!!!!!!!!!!!!!!!!!!!!!!!

Answer 50

Recieves a parameter called nextProps

DEPRICATED!!!!!!!!!!!!!!!!!!!!

Question 51

shouldComponentUpdate () {

}

Answer 51

Takes Two Args (nextProps, nextState)
Return true to update
Return false to not update
Making a decision whether you want to change your clothes or not... 
Gives us (the developers) a chance to optimize our code...
We are able to implement some logic to let the component determine whether it's even important enough to think about updating...

Question 52

React will render if…

Answer 52

If it has any question at all whether a component needs to rerender, it will RENDER!

Question 53

componentWillUnmount() {

}

Answer 53

Main use to do some clean or tear down of anything you set up that could potentially lead to clutter with the DOM or your application…
Most common use, if in componentDidMount() has an event listener, you could use this to remove event listener…

Question 54

componentWillMount() {
}
DEPRICATED

Answer 54

DEPRICATED

Question 55

componentWillUpdate() {
}
DEPRICATED
replaced with ---
getDerivedStateFromProps() { xxx }

Answer 55

DEPRICATED

Question 56

What is the only static life cycle?

It’s the one you probably don’t need…

https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html

Answer 56

static getDerivedStateFromProps(props, state) {
        // return the new, updated state based upon the props
    }

Question 57

getSnapshotBeforeUpdate () {

}

Answer 57

Allows you to create a backup of the current way things are…
UNCOMMON

Question 58

Common way to use the ternary -

Answer 58

return props.isLoading ? -h1>Loading…-/h1> : -h1>Loaded -/h1>

Question 59

Example of setTimeout inside my Component -

Answer 59

You want to use componentDidMount() {} like so…

componentDidMount() {
        setTimeout(() => {
            this.setState({
                isLoading: false
            })
        }, 1500)
    }

Question 60

How to use the /&/& operator for conditional rendering?

Answer 60

with the && operator, the JS logic takes the first one, analyzes it, and just returns the second thing.
T && F - returns F
F && F - returns False, because 1st was F
T && T - return T
example -
{
this.state.unreadMessages.length > 0
&&
-h2>You have {this.state.unreadMessages.length} unread messages!-/h2>
}

Question 61

How to edit inline style in React?

Answer 61

xxxxxxxxxxxx