React Flashcards
What is React?
JavaScript library for creating user interfaces
What is a React element?
plain objects that contain information needed to turn it into a DOM
How do you mount a React element to the DOM?
Using ReactDOM.render(element, container [, callback])
What is JSX?
It is syntactic sugar for creating React elements
Why must the React object be imported when authoring JSX in a module?
It is just syntactic sugar for createElement method of the React object
How can you make Webpack and Babel work together to convert JSX into valid JavaScript?
Install both webpack and babel/babel-loader. Use babel plug-in for converting JSX
What is a React component?
Essentially just a function that returns a react element
How do you define a function component in React?
Normal function definition, but React components have first letter capitalized
Can also define a component via class:
class ComponentFunction extends React.Component {
render( ) {
return <h1> Hello, {this.props.name}</h1>;
}
}
How do you mount a component to the DOM?
Using the ReactDOM.render( ) method
What are props in React?
Props are essentially objects that get passed into the createElement method that get attached to the React element in a way that mimics HTML attributes
How do you pass props to a component?
as property=value pairs within the JSX syntax
How do you write JavaScript expressions in JSX?
can embed JS expressions by enclosing them in squiggly brackets { }
How do you create “class” component in React?
class Component extends React.Component {
render( ) {
return reactElement;
}
}How do you access props in a class component?
Through this.props
What is the purpose of state in React?
an object that is maintained within the component that indicate its current state
How do you pass an event handler to a React element?
assign them as a prop with the value of a callback function
What are controlled components?
Components that control both its state and a form element’s values.
What two props must you pass to an input for it to be “controlled”?
value=this.state.value
onChange=handleChange
What Array method is commonly used to create a list of React elements?
array.prototype.map( )
What is the best value to use as a “key” prop when rendering lists?
the data’s ID or any other unique identifier
can be unique only among its siblings
When does React call a component’s componentDidMount method?
after the render( ) method call ONLY if it’s the first iteration
constructor > render > componentDidMount
Name three React.Component lifecycle methods
constructor render componentDidMount componentWillUnmount componentDidUpdate
How do you pass data to a child component?
through props
