React for Beginners

Question 1

Everything within React is not a model or a controller but a…

Answer 1

Component

Question 2

A Component is similar to

Answer 2

Building your own HTML tags, which you can supply with a whole buncha information.

Question 3

What 3 types of information can you pass to a component?

Answer 3

Props, State and Context

Question 4

What one method does every single class within React need?

Answer 4

The Render method.

Question 5

What does the Render method do within a React class?

Answer 5

It just kind of determines what DOM elements at the end of the day are put onto the page.

Question 6

What’s the syntax if you just want to cherry pick one method from a package?

Answer 6

import { render } from ‘react-dom’ (The curly braces are what makes the magic happen)

Question 7

How do you mount the app to a page?

Answer 7

You need an empty div within your index.html that you can mount to, and then within your index.js you need to render your primary component to it. Here is an example of that: render(, document.querySelector(‘#main’));

Question 8

What do you need at the end of each class file?

Answer 8

An export statement - something like: export default StorePicker;

Question 9

How do we write HTML within React?

Answer 9

With JSX - which isn’t required, but the other options of React.CreateComponent and such - they hurt and they make us sad.

Question 10

What does one use instead of ‘class=mwuhmwuh’ when setting the class name of an HTML element?

Answer 10

we use className, cause React likes that.

Question 11

What’s the rule on sibling elements within JSX?

Answer 11

They can’t returned. We have to return one element - it can have whatever the high hay it wants inside of it - but there must ultimately just be one element being returned.

Question 12

How do we get around JSX only letting us return one element when we want to do some FlexBox or CSSGrid stuff?

Answer 12

mwuh mwuh - or if we import {Fragment} from React, we can have the clearner looking This avoids unnecessary divs all up in our DOM

Question 13

What should we expect to be able to do soon instead of

Answer 13

<> >, as soon as Babel gets its act together.

Question 14

How do we make comments within JSX?

Answer 14

{ /* yooo */ } - not just a //, and not an html comment , and event within our squirlies - not a //. Must be the block JS comments within squirlies

Question 15

What’s the big stupid thing that makes people throw their computers when they get an unexplained error in regards to comments? The error message says something about an unexpected comma?

Answer 15

People try to put a comment above their Fragment or their parent element - which, in effect, is returning two sibling elements, which breaks everything. You often don’t think of a comment as an element - but it is.

Question 16

How do you import CSS into a React app?

Answer 16

You can either do it inline, or you can put an import statement at the top, like import ‘./css/style.css’ People are ready to die on both sides of this decision. Meh.

Question 17

Tell me about Props

Answer 17

They are similar to HTML attributes - and just like how an Image tag needs a src and an alt, or an Input tag needs the type attribute - we can pass our own custom attributes with our components. This is how we get data into a component from its parent.

Question 18

State is where the data lives…

Answer 18

Props are how the data gets to work. They’re like the bus.

Question 19

Other than not using already existing props, what are the rules about props?

Answer 19

None, man. Just name them whatever and call them with this.props.whatever.

Question 20

In what way are props similar to an arguments object within a function?

Answer 20

They’re both just objects of data that were passed in when the component or method was called.

Question 21

What’s the thing to remember when passing anything other than a string to a prop? (Such as a number or a boolean)

Answer 21

It has to be in curly “I’m doing some JS now” braces.

Question 22

What do you do when you want to use a JS variable within JSX?

Answer 22

Put it in some of those curly braces man.

Question 23

What does ‘this’ refer to when we’re rocking React?

Answer 23

The component instance. So this.props is the props object within the current component.

Question 24

When you type $0 in React Dev Tools, what does it refer to?

Answer 24

What ever element is selected.

Question 25

What does $1 in React Dev Tools terminal refer to?

Answer 25

The second to last item chosen. And $2 grabs the one before that, and I think so on (or maybe only up to 2?)

Question 26

What does $r refer to within React Dev Tools?

Answer 26

The component instance. You can then open it up in DevTools and see everything in the object including what the props are set to.

Question 27

When should you make a class a stateless functional component instead?

Answer 27

Well, man, when you only have a render method - no additional logic going on, no other methods - and your component is just being fed whatever data it needs as types - it’s a good idea.

Question 28

What’s one catch of Functional Components?

Answer 28

There is no ‘this’ - instead you pass the props into it, and call the individaul props that way.

Question 29

Compare this class component to a stateless functional component:

Answer 29

Question 30

How does the <switch> tag work within ReactRouter?</switch>

Answer 30

It tries each route in succession until it finds a match - if no match is found, it will go to the default “NotFound” route.

Question 31

What’s the difference between export default and just plain export?

Answer 31

When we do export default, then if we import, that’s what we will get - however, there are also Named Functions, which we can import from a package using curly braces if we know the name. To create a Named Function, we just begin with:

export function whatever() { }

Question 32

What’s the difference between using the value prop of an input and the defaultValue prop?

Answer 32

With the value prop, it always needs to be tied directly to state. So, if you just want some default text to fill an input, you need to use the defaultValue prop instead.

Question 33

What’s the main difference between event handling in React and in jQuery/JS?

Answer 33

React Events are handled inline, and all events are wrapped within a SyntheticEvent to make sure they work across all browsers and devices (but we don’t have to worry much about the SyntheticEvent)

Question 34

What does it mean that React events are handled inline?

Answer 34

So, instead of giving a button a class, and then selecting that class within a script tag or an imported file, in React, we use the button’s onClick prop.

Question 35

What’s wrong with the following?

<button>
</button>

Answer 35

Within React, we don’t want to use the parentheses at the end in most cases - this will make the function run when that DOM element mounts, which is not often what we want. Instead, we just pass in the name, without the parentheses, and React will take care of matching it up to a method.

Question 36

What is the golden rule of React?

Answer 36

Do Not Touch The DOM (usually)

We want to be thinking in terms of the React App itself - the elements rendered our are an after the fact sort of thing. This means we use the React element’s own properties instead of selecting them after the fact with querySelector or whatever. We do this using refs on an element, or more commonly, by syncing our data to the store.

Question 37

What’s the tricky part with custom methods within React?

Answer 37

All of the built-in methods are inside of React.component and have ‘this’ bound to the component. Our custom methods don’t automatically get this benefit - so we have to bind them ourselves some way. You might see older styles where they are bound with a constructor method manually binding each custom method - but that gets ungainly if you have many methods. Instead, if our custom method is going to need access to the component, the easiest way is to declare it as a prop instead of a function.

By setting the ‘method’ to be a prop with an arrow function - properties are bound to the instance rather than bound to nothing by default. So instead of

goToStore(event) {

we would declare it as:

goToStore = (event) => {

and then have access to ‘this’ from within our method.

Question 38

What is pushState?

Answer 38

It is a method from React Router that allows us to change a URL without re-loading the page, thus making things super fast. We have to have access to React Router to do this - which can be a bummer if we’re many components deep, as we’d have to funnel the values down and down and down - but if we’re in a direct child of React Router (which all main routes should be) - we already get access to this through the passed-in props.

So, if we use this.props.history.push(your-new-url) - this will go ahead and get us there.

Question 40

What is state?

Answer 40

State is essentially just an object that lives inside of a component that stores all the data that that component and its children need. It is a single source of truth, rather than having your data spread across different variables or data attributes on DOM elements.

Question 41

What don’t we want to touch, in React?

Answer 41

The DOM, if it can at all be helped.

Question 42

If data lives in state on a child component way down in the hierarchy, how does it share that data with other components?

Answer 42

It doesn’t. Data goes down, but not back up again.

Question 43

Where do the methods that update state need to live?

Answer 43

Always in the same component as the actual state.

Question 44

How do you get a function down lower in the hierarchy?

Answer 44

By passing it as props. Thanks ES6!

Question 45

How should we update state?

Answer 45

Using the existing setState API - anything else could cause things to get updated out of order, or built-in methods not to fire - it would be a mess. Always use setState (in fact, you might have to now, I’m not sure).

Question 46

What’s the process for updating a piece of state?

Answer 46

We don’t want to mutate data on state directly - that would cause many problems. SOOOO:

1. Take a copy of the existing state

const fishes = { …this.state.fishes };

2. Then add the new item to the copied variable.

Question 47

Do we need to pass the entire state to setState?

Answer 47

Nah, man. Just the piece of state that we wish to update - you can leave the rest out of it.

Question 48

Where do assets like pictures and the like live?

Answer 48

In your public folder (then you can make sub-folders for images, documents, whatever)

Question 49

How does logic work within JSX?

Answer 49

It doesn’t. There is no logic built into JSX - no ifs, loops, conditionals, or any of the other stuff. So, for logic, you have to do JS with the { }.

Question 50

How do you map over state?

Answer 50

Stat is an object, and you can’t map over an object - so, first you must do something like Object.keys(this.state.fishes).

Question 51

Why do we have to have a unique identifier for each component?

Answer 51

In order for React to be fast, it needs to be able to quickly get to the component, or piece of the component, that needs updated. There is a built in property ‘key’ that you can pass to any element to enable this, and it will whine at you if you don’t - key can be anything so long as it is unique.

Question 52

How do we get info from state to individual components?

Answer 52

We pass it in from props - you can pass the entire state object, calling it whatever you want.

Question 53

What if you need access to the key - not just React needing it as a unique identifier, but you needing it to do something with?

Answer 53

It’s kinda dumb, but you have to pass it twice, calling the prop something other than key (index seems to work)

Question 54

Should you use spread to pass down your entire state to a component?

Answer 54

Hex no. You shouldn’t be passing down data unless you explicitly need it and we want our components to be as independent as possible - state may be added to by another developer or who knows what, you can end up with a lot of data that you don’t need.

Question 55

What does the .reduce method do?

Answer 55

It’s like a for loop or a map, but instead of returning a new item, or just looping over and updating a variable, it instead takes in some data from each element and returns a value, like a tally or a total.

Question 56

When is it helpful to have a ‘render function’?

Answer 56

Sometimes the logic of a render method starts to feel overloaded - but whatever is clogging it isn’t re-usable and doesn’t feel right as its own component. In that case, oyou can create a separate function within the class, and just call that. In this way, you can separate out the presentation logic from any calculations going on.

But don’t actually put a second ‘render() { } ‘ statement - that’d be a no no.

Question 57

What’s so cool about Firebase using Web Sockets?

Answer 57

It lets it work in realtime - any updates to your page, or to your database, will be instantly pushed and changed for anyone currently viewing that website - it doesn’t require an AJAX call or a page refresh to see the change.

Question 58

What is a Lifecycle method in React?

Answer 58

It’s similar to something like Window.onLoad or Document.ready in jQuery - they are hooks into when certain things are happening or have happened in our application.

Question 59

What is ComponentDidMount?

Answer 59

It’s a life-cycle method that allows us to hook into the very first second that our app has been loaded onto the page.

Question 60

Are refs in firebase the same as import refs within our views?

Answer 60

Nah. refs in firebase are the reference to the individual piece of data in the database.

Question 61

Tell me about localstorage

Answer 61

It’s not kept in a database, but in the user’s browser, so that if they come back to it later or change pages or refresh - they don’t lose their data. It’s kind of like cookies but much easier to deal with.

Question 62

What does it mean that localStorage is a key-value token?

Answer 62

We can grab a bunch of keys and then store values along with them, and then come back to that key at a later point and pull that data out and put it back into our app.

Question 63

When is ComponentDidUpdate invoked?

Answer 63

Immediately after any update to our data occurs, but not on the initial render of the page.

Question 64

What does it mean when you get the [Object][object] error?

Answer 64

[Object][object] is the result of calling the “to_string” method on an object - so somewhere, you’re sending an object and should be sending a string. Usually a JSON.stringify is needed.

Question 65

How do you want to handle inputs where your state will live in that input? (Something like an edit form)

Answer 65

React is going to intercept the key event on a value unless you have some plan to change state in place. You can do so with a handleChange method like so:

handleChange = (event) => {
console.log(event.currentTaget.value);
//update that fish
// 1. Take a copy of the current fish.
const updatedFish = {
…this.props.fish,
[event.currentTarget.name]: event.currentTarget.value;
};
}