REACT Flashcards
What is React?
JS Library for building User Interfaces
What is a React Element?
Object
How do you mount a react element to the DOM?
query the dom for the root
reactDOM.render(element, container, callback)
What is Babel?
Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.
What is a Plug-In?
Software component that adds a specific feature to an existing computer program
What is a Webpack loader?
transformation s that are applied to the source code of a module. They allow you to pre-process files as you import and “load” them.
How can you make Babel and Webpack work together?
Install babel Loader
What is JSX?
Syntax extension of JavaScript, allows us to write HTML in react, makes it easier to write and add HTML in React. Provides a visual aid when working with UI inside the javascript code.
Why must the React object be imported when authoring JSX in a module?
JSX complies into calls to React.createElement, react library must always be in scope from your JSX code.
How can you make Webpack and Babel work together to convert JSX into valid JavaScript?
Use babel loader
Install babel/plugin-transform-react-jsx
What is a React Component?
Independent, reusable bits of code, serves the same purpose of Javascript functions, but works in isolation and returns HTML
How do you define a function component in React?
Function functionName(props){ return react element}
Class functionName extends React.Component {render() { return react element}}
How do you mount a component to the DOM?
Query the DOM for the root
Assign the component to a const variable, (
root.render(variableName)
What are props in React?
Properties in react and used for passing data from one component to another
How do you pass props to a component?
Prop.name
propertyName = {}
propertyName = 'string'
How do you write Javascript expressions in JSX?
Wrap them with curly braces
How do you create “class” component in REACT?
class CLASSNAME extends React.Component {
render()
}
How do you access props in a class component?
This object
What is the purpose of state in React?
keep track of values that will change over time
How to you pass an event handler to a React element?
As a prop , whatever event = {this.method}
What are controlled components?
Input value controlled by React that renders a form and also controls what happens
What two props must you pass to an input for it to be “controlled”?
Value and onChange
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?
Use IDs from your data as keys, when you dont have stable IDs, you may use the item index as a key as a last resort.
When does React call a component’s componentDidMount method?
After render, after react updates DOM and refs and before updating
Name three React.Component lifecycle methods.
componentDidMount(), componentDidUpdate(), componentWillUnmount(), constructor(), render()
How do you pass data to a child component?
props
