react Flashcards
What is React?
A JavaScript library for building user interfaces or UI components
What is a React element?
an object describing a component instance or DOM node and its desired properties
How do you mount a React element to the DOM?
ReactDOM.render(element, container)
What is Babel?
Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backward-compatible version of JavaScript in current and older browsers or environments.
What is a Plug-in?
is 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?
by adding babel-loader to the list of modules in webpack.config
What is JSX?
A syntax extension of JavaScript.
Why must the React object be imported when authoring JSX in a module?
Becasue the React library must be in scope from the JSX code in order to make calls to React.createElement
How can you make Webpack and Babel work together to convert JSX into valid JavaScript?
by installing the react plugin
What is a React component?
a JavaScript class or function that optionally accepts inputs i.e. properties(props) and returns a React element that describes how a section of the UI (User Interface) should appear.
How do you define a function component in React?
By writing a JavaScript function that accepts props as a single argument and returns a React element
How do you mount a component to the DOM?
ReactDOM.render( )
What are props in React?
They are objects used to pass data between react components
How do you pass props to a component?
ComponentName (props)
How do you write JavaScript expressions in JSX?
wrap it in { } curly braces
How do you create “class” component in React?
class ComponentName extends React.Component {
render ( ) {
return....
}
}How do you access props in a class component?
this.props
What is the purpose of state in React?
State is an object where property values belonging to a component are stored. When state changes, the componenet re-renders
How do you pass an event handler to a React element?
as an attribute
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 or anything unique
What are controlled components?
An input form element whose value is controlled by React. The React component that renders a form also controls what happens in that form on subsequent user input.
What two props must you pass to an input for it to be “controlled”?
value and onChange / handleSubmit and handleChange
When does React call a component’s componentDidMount method?
immediately after a component is inserted into the DOM tree. after the render phase
Name three React.Component lifecycle methods.
constructor, render, componentDidMount
How do you pass data to a child component?
props
