react Flashcards
What is React?
javascript library for building user interfaces (UIs)
What is a React element?
plain objects
How do you mount a React element to the DOM?
using the render method
What is JSX?
syntax extension
- commonly wrapped in parentheses
- multiple lines for readability
Why must the React object be imported when authoring JSX in a module?
Since JSX compiles into calls to React.createElement, the React library must also always be in scope from your JSX code
How can you make Webpack and Babel work together to convert JSX into valid JavaScript?
Babel compiles JSX down to React.createElement() calls
What is a React component?
- like javascript functions
- accept parameters called “props”
- return react elements
How do you define a function component in React?
you can define a component either through a function or a es6 class
function component: use the function keyword followed by the component with the first character capitalized (components starting with a lowercase character are treated as DOM tags
- note: a component function accepts a “props” (parameters) object argument
class component: use the keyword class followed by the component name capitalize followed by the extends keyword and the component property of the react object
- note: the render method is obviously defined inside the class component code block
How do you mount a component to the DOM?
specify the component in the render method of the reactdom object
What are props in React?
props are technically properties of an object passed a parameter/argument to a component function
they are read-only
How do you pass props to a component?
in component function definitions, we just pass it as a parameter/argument with the keyword “props”
How do you write JavaScript expressions in JSX?
use brackets around the javascript expressions
How do you create “class” component in React?
class component: use the keyword class followed by the component name capitalize followed by the extends keyword and the component property of the react object
- note: the render method is obviously defined inside the class component code block
How do you access props in a class component?
through the this object
What is the purpose of state in React?
a value at the point of time of the component
privately and fully controlled by the component
How to you pass an event handler to a React element?
as a prop(?)
why use an anonymous function in a setState method rather than an object?
React may batch multiple setState() calls into a single update for performance
and hence: Because this.props and this.state may be updated asynchronously, you should not rely on their values for calculating the next state
use a second form of setState() that accepts a function rather than an object
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?
id
What are controlled components?
element controlled by react
What two props must you pass to an input for it to be “controlled”?
value and onchange prop
When does React call a component’s componentDidMount method?
- invoked immediately after a component is mounted
- after the constructor, render methods
- need to handle the first empty render (i.e., “loading..”
Name three React.Component lifecycle methods.
constructor, render, componentdidmount, componentdidupdate, componentwillunmount
How do you pass data to a child component?
props
