w6d5 - react

Question 1

How do you increase the state of something managed by React by 1?

Answer 1

this.setState( { someProperty: this.state.someProperty + 1 } )

Question 2

How does interpolation work in JSX?

Answer 2

{ variable }

Question 3

How would you render a simple button in JSX?

Answer 3

render ( ) {

return ( <button> )</button>

Question 4

How do you set up React’s entry point into HTML?

Answer 4

Add a listener for DOMContentLoaded that:

1. locates an existing root element to insert code into via document.getElementById(‘root’)
2. runs ReactDOM.render( <SomeReactComponent></SomeReactComponent>, rootElement)

Question 5

In order to show our actual .js files in chrome debugger, rather then the bundled .js files, what do we add to webpack.config.js ?

Answer 5

devloot: ‘source-map’

Question 6

What are some of the React lifecycle methods?

Answer 6

componentWillMount
componentDidMount
componentWillReceiveProps
componentWillUpdate
componentDidUpdate
componentWillUnmount

Question 7

How do you install something with npm and make a record of it in your config file?

Answer 7

npm install –save <package_name></package_name>

Question 8

What are the resultant values of this destructuring operation:

const { a: x, b: y } = { a: 1, b: 2 }

Answer 8

x === 1

y === 2

Question 9

Show code that will export a function (that does nothing) ES6-style

Answer 9

export const someFunc = ( ) => { };

Question 10

How does ES6’s import syntax work?

Answer 10

import ClassName from ‘./source_file’

note the lack of .js

Question 11

How do you import multiple items ES6-style?

Answer 11

import { item1, item2, … } from ‘./source_file’

Question 12

JS: How can you check the types of things passed in as arguments?

Answer 12

typeof – for primitives

arg instanceof SomeClass – for things that are typeof “object”

Question 13

React.createElement takes what parameters?

Answer 13

type: ‘div’, ‘span’, etc, or a React.Component

[props],
[…children]

Question 14

How do you pass a function as the first param to ReactDOM.render( ) ?

Answer 14

• Make sure the function is ProudCased

- Pass it wrapped in < /> brackets

Question 15

Where are props defined?

Answer 15

Within the type parameter to ReactDOM.render( ) as:

…propName1=propValue1…

Question 16

What does a React.Component consist of?

Answer 16

a single HTMLElement (may have child elements)

Question 17

What’s the first line in a React Component file?

Answer 17

import React from ‘react’

Question 18

What’s the difference between default export and multiple exports?

Answer 18

export default ExportedClassName

___(figure this out)___

Question 19

What method does every React.Component have?

Answer 19

render( )

Question 20

What is fetch( url )?

Answer 20

Browser API method that does an AJAX GET request to a given url

Question 21

Why is AJAX done in DidMount instead of WillMount?

Answer 21

To ensure that no race condition exists between WillMount and the AJAX request’s callback.

Question 22

How do you render a Component from within another Component’s render method?

Answer 22

render (
< ChildComponent /> ;
)

Question 23

How does a child component change the state of something managed by a parent?

Answer 23

Set up a method in the parent that runs setState and takes an argument.

Pass a reference to this method to the child via a prop.

Within the child’s render method, use a change handler (i.e. onClick) to invoke the reference, binding to null and passing the argument.

Question 24

Metaphor for understanding props vs state?

Answer 24

Props is someone’s notebook that you borrow. It’s weird to make changes to this notebook.

State is your notebook. You can look at someone else’s notebook and safely make changes to your own.