React Flashcards
What is React?
React is a JavaScript library for building user interfaces.
What is a React element?
A React element gets returned from React components, it is an object that virtually describes the DOM nodes a component represents.
How do you mount a React element to the DOM?
ReactDOM.render(element, target)
What is JSX?
JSX is an extension of JavaScript syntax used by React to allow for HTML-like text to exist in JavaScript code.
Why must the React object be imported when authoring JSX in a module?
Because React elements written in JSX are syntactic sugar for React.createElement calls.
How can you make Webpack and Babel work together to convert JSX into valid JavaScript?
Ensure that @babel/plugin-transform-react-jsx is listed as a Babel plugin in webpack.config.js
What is a React component?
React components are reusable pieces of code that accept a props argument and return React elements.
How do you define a function component in React?
function Comp(props) { return <h1>example</h1>; }
How do you mount a component to the DOM?
ReactDOM.render(reactElement, domTarget);
What are props in React?
Props are properties that get passed into React components and represent the properties of a React element.
How do you pass props to a component?
Specify them using key=”value” pairs in the opening tag of a React element representing a user-defined component.
How do you write JavaScript expressions in JSX?
Put them in curly braces.
How do you create “class” component in React?
class ComponentName extends React.Component { render() { return } }
How do you access props in a class component?
this.props
What is the purpose of state in React?
state is an object in a React component that keeps track of the state of a component and can be updated upon certain events.
How to you pass an event handler to a React element?
Specify an event handler as the value of an OnEvent prop in a React element tag.
What Array method is commonly used to create a list of React elements?
.map()
What is the best value to use as a “key” prop when rendering lists?
A unique string for each item in the list.
What are controlled components?
An input form element whose value is controlled by the React component’s state, making it the “single source of truth”.
What two props must you pass to an input for it to be “controlled”?
value={this.state.value} and onChange={this.eventHandler}
When does React call a component’s componentDidMount method?
componentDidMount is called after constructor() and render()
Name three React.Component lifecycle methods.
constructor, render, componentDidMount, componentDidUpdate, componentWillUnmount
How do you pass data to a child component?
Through the props.
