React Flashcards
What is React?
a JavaScript framework for building user interfaces
What is a React element?
a plain JavaScript object that is the smallest building block of a React app
How do you mount a React element to the DOM?
ReactDOM.render(element, container, [callback])
What is Babel?
a JavaScript compiler mainly used to convert ES6 code into a backward-compatible version of JavaScript
What is a Plug-in?
a software component that adds a specific feature to and enables customization for an existing computer program
What is a Webpack loader?
a transformations (plug-in) that is applied to the source code of a module
How can you make Babel and Webpack work together?
install babel-loader as a devDependency
What is JSX?
a syntax extension to JavaScript that produces React “elements”
Why must the React object be imported when authoring JSX in a module?
the createElement( ) method of the React object is called to produce React “elements”
How can you make Webpack and Babel work together to convert JSX into valid JavaScript?
install @babel/plugin-transform-react-jsx as a devDependency and add the plug-in to webpack.config.js
What is a React component?
a JavaScript function that returns a React element
How do you define a function component in React?
function keyword, capital functionName with props in parentheses, then the code block that returns a React element
How do you mount a component to the DOM?
ReactDOM.render(ReactElement, container)
What’s the difference between a library and a framework?
inversion of control - a framework is a type of library that calls your code
What are props in React?
properties contained in an object that are used to pass data into a React component
How do you pass props to a component?
prop key=”value” pairs
How do you write JavaScript expressions in JSX?
enclosed in curly braces
How do you create “class” component in React?
class keyword w/ capital className, followed by extends React.Component; must define a render( ) method
How do you access props in a class component?
the props property of this object (this.props)
What is the purpose of state in React?
keep track of values that change over time
How do you pass an event handler to a React element?
the event handler is a method on the class and is passed as a prop in the render( ) method
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
What is the virtual DOM?
lifecycle of React elements - the render( ) method of the component gets called once and outputs one React element; if the state updates, it outputs a slightly different React element, and then the React virtual DOM compares the diff and makes small surgical patches to the real DOM in the browser
What are controlled components?
input form React elements that receive their value via state and have a change-handler that updates the state
What two props must you pass to an input for it to be “controlled”?
value, onChange
