React Flashcards
What is React?
A JavaScript library for creating user interfaces
What is a React element?
An object that describes what the DOM should look like
How do you mount a React element to the DOM?
ReactDOM.render
Keep in mind React takes over the whole DOM
What is JSX?
A syntax extension used in JavaScript, JSX produces React “elements”
Why must the React object be imported when authoring JSX in a module?
Because JSX will be called into React.createElement and therefore must be in scope
<h1></h1>
in React actually means -> React.createElement
How can you make Webpack and Babel work together to convert JSX into valid JavaScript?
Using babel-loader and the @babel/plugin-transform-react-jsx plugin
What is a React component?
Similar to JavaScript functions, they accept inputs called “props” and return React elements describing what should appear on the screen
How do you define a function component in React?
function FunctionName(props) {
return elementChildrenContent, {props.name};
}
props is optional
How do you mount a component to the DOM?
ReactDOM.createRoot(document.getElementById(‘root’));
root.render(element);
What are props in React?
A JavaScript object
Children and attributes gathered into this object
How do you pass props to a component?
’ < componentName propName = propValue / >’
How do you write JavaScript expressions in JSX?
Surround it with curly braces
How do you create “class” component in React?
class ClassName extends React.Component {
render( ) {
return ' < React element type > ' React children
{ this.props.name } ' ' ;
}
}How do you access props in a class component?
this
How does extends work?
Used in class declarations or expressions that creates a child class of another class
What is the syntax for extends?
class ChildClass extends ParentClass
How does super work?
Used to access and call functions from an object’s parent
What is the syntax for super?
super( [ arguments ] );
super.functionOnParent( [ arguments ] );
What is the purpose of state in React?
Represents the current status of the component
Keeps track of values that change over time
How do you pass an event handler to a React element?
As props to child components
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 string that uniquely identifies a list item among its siblings, typically an ID
What are controlled components?
A form element whose value is controlled by React
What two props must you pass to an input for it to be “controlled”?
The result of the constructor’s method that controls the mutable state and the value
When does React call a component’s componentDidMount method?
Immediately after a component is mounted (inserted into the tree).
- Initialization that requires DOM nodes should go here
Constructor occurs 1 time, render occurs, and then componentDidMount occurs once after one successful render occurs
Examples of this could be:
- A subscription setup
Name three React.Component lifecycle methods.
constructor( )
render ( )
componentDidMount( )
How do you pass data to a child component?
Pass a prop
What is the component lifecycle?
The process in which a component runs its code
- Constructor is ran first and only once in the component lifecycle
- Render method gets called with initial state and its props being passed,
- componentDidMount method (optional) gets called after first successful render
- Event listeners and set states occur
- Render method runs again
- componentDidUpdate method gets called after every render
- componentWillUnmount is used when DOM elements are to be removed (example view swapping)
