React.js Flashcards
What is React?
a JavaScript library for creating user interfaces
What is a React element?
object
How do you mount a React element to the DOM?
ReactDOM.render()
What is JSX?
syntax extension to JavaScript (JS plus some more)
Why must the React object be imported when authoring JSX in a module?
In order to use the methods on the react object (ex. react.createElement)
How can you make Webpack and Babel work together to convert JSX into valid JavaScript?
Use babel loader and the plugin @babel/plugin-transform-react-jsx
What is a React component?
a JS function that accepts props as inputs and returns react elements
How do you define a function component in React?
function definition or a class, capitalize the names
How do you mount a component to the DOM?
ReactDOM.render +
What are props in React?
properties passed as inputs in a react component function, objects { }
How do you pass props to a component?
as a key=”value” pair inside react element
How do you write JavaScript expressions in JSX?
{ }
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?
ID number or name from data that distinguishes it from another piece of sibling data
How do you create “class” component in React?
class ComponentName extends React.Component {
render() {
}
}How do you access props in a class component?
this.props
What is the purpose of state in React?
- *implies the passage of time and the change of state
* * keep track of values that change over time
How to you pass an event handler to a React element?
attached as a prop to your react element returned from the render method
What are controlled components?
form input whose value is controlled by React
What two props must you pass to an input for it to be “controlled”?
value and onChange
When does React call a component’s componentDidMount method?
Right when component is mounted in ReactDOM.render
Name three React.Component lifecycle methods.
componentDidMount
componentWillUnmount
componentDidUpdate
How do you pass data to a child component?
by passing the data through the props when rendering/returning the children react element
