React Flashcards
What is React?
a JavaScript library for building user interfaces
What is a React element?
it’s an Object
How do you mount a React element to the DOM?
with the render method of the ReactDOM object
What is Babel?
Babel is a JavaScript compiler that rewrites 2015+ JavaScript to earlier versions
What is a plug-in?
a plug-in is a piece of software that adds a specific feature to an existing computer program. enabling plug-ins enables customization
What is a Webpack loader?
transformations that are applied to the source code of a module. allows you to pre-process files as you import or load them such as converting TypeScript to JavaScript
How can you make Babel and Webpack work together?
babel-loader
What is JSX?
JSX is a syntax extension for JavaScript. Syntactic sugar for React
Why must the React object be imported when authoring JSX in a module?
because JSX produces React objects
How can you make WebPack and Babel work together to convert JSX into valid JavaScript?
babel loader
What is a React component?
A React component is a function in React
How do you define a function component in React?
function keyword Component name (CAPITALIZED) option (props) parameter return React elements
How do you mount a component to the DOM?
you assign the return to a variable and then call the render method of the root object. passing the variable as an argument
What are props in React?
props are Objects and serve as parameters that we can pass to Components
How do you pass props to a component?
you would “call” your component followed by your prop with a value assigned to it
How do you write JavaScript expressions in JSX?
use {curly braces}
How do you create “class” component in React?
class ClassName extends React.Component a mandatory render() method
How do you access props in a class component?
this
What is the purpose of state in React?
state gives some control to Class Components. it allows us to do things based off of what the current state is. like view swapping
state is a data model
keeping track of variables that change over time
How do you pass an event handler to a React element?
you pass it as a props to a React element
and pass a callback
What are controlled components?
a React component that renders a form and also controls what happens in that form on user input
What two props must you pass to an input for it to be “controlled”?
a prop for that input’s value
an onChange event
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 string that uniquely identifies a list item among its siblings or an ID from data keys
