React Flashcards
What is React?
JS library for building UI
For front-end
What is a React element?
basic building block in a react application - an object representation of a virtual DOM node
It’s just an object
How do you mount a React element to the DOM?
by calling ReactDOM. and calling render()
What is Babel?
Toolchain used to convert ECMAScript 2015+ code into a backwards-compatible version of JS in current and older browsers or environments
What is a Plug-in?
it gives extended functionality
What is a Webpack loader?
transformations that are applied to the source code of a module
Webpack loaders follow thru import/export and convert the syntax and style as it goes through it
How can you make Babel and Webpack work together?
install ‘babel-loader’ to the loader
What is JSX?
a syntax extension to JS
allows us to write declarative JS like writing html within js
Why must the React object be imported when authoring JSX in a module?
Because it works with React object to because we are actually using react ReactDom.createElement()
How can you make Webpack and Babel work together to convert JSX into valid JavaScript?
Babel-loader and the babel plugins
What is a React component?
independent and reusable bits of code
They serve the same purpose as JS functions but work in isolation and return HTML
How do you define a function component in React?
a function that returns an HTML-like syntax
How do you mount a component to the DOM?
root.render()
What are props in React?
type of object where the value of attributes of a tag is stored
props –> properties
How do you pass props to a component?
add them to the JSX
How do you write JavaScript expressions in JSX?
use curly brace like {element.text}
How do you create a “class” component in React?
use the keyword class and className and extends keyword and React Object and component property { render() }
How do you access props in a class component?
render() function
What is the purpose of the state in React?
to contain data about the component
store property value that belongs to the component
gives localized data for that specific component and the data that it should be returning
How do you pass an event handler to a React element?
add an attribute to the React element
What are controlled components?
form’s data is handled by the component’s state
it takes its current value thru props and makes changes thru callbacks like onClick and onChange
Controlled by React and making it a single source of truth
React controls what happens in that form on subsequent user input
What two props must you pass to input for it to be “controlled”?
value and onChange
What Array method is commonly used to create a list of React elements?
map() array method – returns an array
What is the best value to use as a “key” prop when rendering lists?
to use a string that uniquely identifies a list item among its siblings
