w6d5 - react Flashcards
How do you increase the state of something managed by React by 1?
this.setState( { someProperty: this.state.someProperty + 1 } )
How does interpolation work in JSX?
{ variable }
How would you render a simple button in JSX?
render ( ) {
return ( <button> )</button>
How do you set up React’s entry point into HTML?
Add a listener for DOMContentLoaded that:
- locates an existing root element to insert code into via document.getElementById(‘root’)
- runs ReactDOM.render( <SomeReactComponent></SomeReactComponent>, rootElement)
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 ?
devloot: ‘source-map’
What are some of the React lifecycle methods?
componentWillMount componentDidMount componentWillReceiveProps componentWillUpdate componentDidUpdate componentWillUnmount
How do you install something with npm and make a record of it in your config file?
npm install –save <package_name></package_name>
What are the resultant values of this destructuring operation:
const { a: x, b: y } = { a: 1, b: 2 }
x === 1
y === 2
Show code that will export a function (that does nothing) ES6-style
export const someFunc = ( ) => { };
How does ES6’s import syntax work?
import ClassName from ‘./source_file’
note the lack of .js
How do you import multiple items ES6-style?
import { item1, item2, … } from ‘./source_file’
JS: How can you check the types of things passed in as arguments?
typeof – for primitives
arg instanceof SomeClass – for things that are typeof “object”
React.createElement takes what parameters?
type: ‘div’, ‘span’, etc, or a React.Component
[props],
[…children]
How do you pass a function as the first param to ReactDOM.render( ) ?
- Make sure the function is ProudCased
- Pass it wrapped in < /> brackets
Where are props defined?
Within the type parameter to ReactDOM.render( ) as:
…propName1=propValue1…
What does a React.Component consist of?
a single HTMLElement (may have child elements)
What’s the first line in a React Component file?
import React from ‘react’
What’s the difference between default export and multiple exports?
export default ExportedClassName
___(figure this out)___
What method does every React.Component have?
render( )
What is fetch( url )?
Browser API method that does an AJAX GET request to a given url
Why is AJAX done in DidMount instead of WillMount?
To ensure that no race condition exists between WillMount and the AJAX request’s callback.
How do you render a Component from within another Component’s render method?
render (
< ChildComponent /> ;
)
How does a child component change the state of something managed by a parent?
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.
Metaphor for understanding props vs state?
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.
