React.js Flashcards
What is React?
A JavaScript library for creating UI.
What is a React element?
It describes JavaScript objects that are seen on a webpage.
How do you mount a React element to the DOM?
By using the .createRoot() method of the ReactDom object with the element as its argument.
What is Babel?
Babel is a toolchain used to convert JavaScript ES6 or later into a backwards compatible version.
What is a Plug-in?
A plug-in is a software component (customization) that adds a specific feature to a program.
What is a Webpack loader?
A Webpack loader pre-processes files as they are imported. Examples include transforming files from a different language to JavaScript.
How can you make Babel and Webpack work together?
The babel-loader package is needed. Webpack bundles modules and Babel transforms code by applying plugins which Webpack will bundle.
What is JSX?
A syntax extension of JavaScript that is used be compiled into real JavaScript.
Why must the React object be imported when authoring JSX in a module?
Although the React object is not visibly used, JSX is compiled into a React element.
How can you make Webpack and Babel work together to convert JSX into valid JavaScript?
By using the Babel Loader and telling it to use the react-jsx plugin to convert JSX to JavaScript.
What is a React component?
A reusable JavaScript function or class that returns React elements represent a section of UI.
How do you define a function component in React?
The function keyword followed by a
name with a capitalized first letter, parameter list, and function code block.
Inside the function code block is a React object being returned from the function.
How do you mount a component to the DOM?
By creating a root and calling the .render() method of the root object with an argument of one or more react elements.
What are props in React?
Props (short for Properties) are arbitrary inputs that describe a React element or object.
Props is an object datatype.
How do you pass props to a component?
By adding a prop name and its value to a React element. If the prop value is not a string, then a JavaScript expression can be used instead.
How do you write JavaScript expressions in JSX?
By surrounding it in curly braces.
How do you create “class” component in React?
The ‘class’ keyword followed by the component’s name, the ‘extends’ keyword, the Component property of the React object, and the curly braces for the class body.
Inside the class body, and prototype method named render is defined with no parameters followed by curly braces for the function code block.
Inside the function code block is an expression being returned from the prototype method.
How do you access props in a class component?
By using the ‘props’ property of ‘this’ object inside a JavaScript expression.
What is the purpose of state in React?
To hold information about an element or component until an event take place. (???)
A data model of values that change over time.
How to you pass an event handler to a React element?
By calling the event handler property of ‘this’ object as a JavaScript expression. (???)
As a prop of a React element.
What are controlled components?
An input form element whose values are controlled by React.
What two props must you pass to an input for it to be “controlled”?
The onChange and value props.
What Array method is commonly used to create a list of React elements?
The .map() method.
What is the best value to use as a “key” prop when rendering lists?
A unique identifier as a string.
When does React call a component’s componentDidMount method?
Immediately after a component is mounted (inserted into the DOM tree).
Name three React.Component lifecycle methods.
constructor(), componentDidMount(), and render().
How do you pass data to a child component?
By rendering the child component and passing in the parent component’s state as a prop.
