React Flashcards
What is React?
A JavaScript library for building user interfaces
What is a React element?
An object that describes how the DOM should look
What is Babel?
Babel is a JavaScript compiler mainly used to convert ES2015+ code into backward compatible versions for older browsers.
What is a Plug-in?
A software component that adds a specific feature to an existing program
What is a Webpack loader?
Transformations applied to modules. Allows you to preprocess files and perform other tasks during load.
How can you make Babel and Webpack work together?
Install them as dependencies and add webpack.config.js that calls the babel plugins.
What is JSX?
JavaScript Extension. JSX provides syntactic sugar for the React.createElement function, so you can call it with fewer lines of code.
Why must the React object be imported when authoring JSX in a module?
React.createElement function is needed to render elements in JSX.
How can you make Webpack and Babel work together to convert JSX into valid JavaScript?
Install webpack, webpack-cli, babel loader, babel/core, babel/plugin-transform-react-jsx. Babel/plugin-transform-react-jsx then gets added to webpack.config.js and transforms JSX to valid JavaScript upon build.
What is a React component?
A function that return React elements
How do you define a function component in React?
Create a function with a return statement that has JSX in it.
How do you mount a component to the DOM?
Call ReactDOM render function and pass in the component and DOM node.
What are props in React?
Props are properties or children passed to a React component
How do you pass props to a component?
In the custom React tag add the name of the props = value
How do you write JavaScript expressions in JSX?
Place it in curly braces within the tags.
How do you create “class” component in React?
class extends React.Component
How do you access props in a class component?
this.props
What is the purpose of state in React?
React objects are immutable and must be re-rendered if you want the elements to change. Add state so that React only renders when a change happens.
How to you pass an event handler to a React element?
Pass the callback function in curly braces to the event prop.
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
What are controlled components?
Elements with their own state that are controlled by the React element’s state
What two props must you pass to an input for it to be “controlled”?
onChange, value
When does React call a component’s componentDidMount method?
Right after the component gets added to DOM
