React Flashcards
What is React?
A JavaScript library for building user interfaces
What is a React element?
React elements are plain objects
How do you mount a React element to the DOM?
ReactDOM.render(element, container, [callback]);
breakdown: const reactH1Element = React.createElement( 'h1', null, 'Hello, React!' );
ReactDOM.render(reactH1Element, document.querySelector(‘#root’));
What is Babel?
Babel is a JS complier; it 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?
a software component that adds a specific feature to an existing computer program.
What is a Webpack loader?
Loaders are transformations that are applied to the source code of a module.
How can you make Babel and Webpack work together?
install babel-loader and babel plug-ins as dependencies
What is JSX?
it provides the syntactic sugar for React.createElement(component,props,children) function
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?
You can have a Babel Loader with the react plugin
What is a React component?
Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.
they are like JS functions; they accept arbitrary inputs (called “props”) and return React elements.
How do you define a function component in React?
Write a javascript function that returns jsx element.
ex:
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
How do you mount a component to the DOM?
ReactDOM.render(element, container)
What are props in React?
they are objects that hold properties of declared key/value pairs
How do you pass props to a component?
ComponentName (props)
When React sees an element representing a user-defined component, it passes JSX attributes and children to this component as a single object.
How do you write JavaScript expressions in JSX?
surrounding the expressions in curly braces
How do you create “class” component in React?
class className extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}How do you access props in a class component?
this.props
What is the purpose of state in React?
to keep track of values that changes over time.
How to you pass an event handler to a React element?
pass a property in the render method.
What Array method is commonly used to create a list of React elements?
Array.map()
What is the best value to use as a “key” prop when rendering lists?
string value – anything unique such as an id
What are controlled components?
An input form element whose value is controlled by React.
-accepts its current value as a prop, as well as a callback to change that value.
What two props must you pass to an input for it to be “controlled”?
value, onChange
When does React call a component’s componentDidMount method?
after render();
These methods are called in the following order when an instance of a component is being created and inserted into the DOM:
constructor()
static getDerivedStateFromProps()
render()
componentDidMount()
Name three React.Component lifecycle methods.
componentDidMount()
componentDidUpdate()
componentWillUnmount()
How do you pass data to a child component?
using props (adding key and values to the props object of the component)
