React Flashcards
What is React?
A JavaScript library for building user interfaces
What is a React element?
A plain javascript elements that describes what a DOM element should look like. Simpler than DOM elements
Something that the framework stores in memory. References that so that the DOM knows what to do
How do you mount a React element to the DOM?
What is JSX?
A syntax extension to JavaScript.
JSX produces React “elements”
Why must the React object be imported when authoring JSX in a module?
Needed so JSX can be converted to React code
How can you make Webpack and Babel work together to convert JSX into valid JavaScript?
Install
webpack
webpack-cli
babel-loader (makes webpack and babel work together)
@babel/core
@babel/plugin-transform-react-jsx
What is a React component?
A function or a class
How do you define a function component in React?
-Write a JS function with optional props parameter. Function component name must be capitalized
- has to return React element
How do you mount a component to the DOM?
- Query the dom for the element that will serve as the container
- Create a root by passing the container through the createRoot method of the reactDOM object
- call the render method of the root object and pass through the React element
ex)
const container = document.querySelector(‘#root’);
const root = ReactDOM.createRoot(container);
root.render(;
What are props in React?
An object
Arbitrary inputs accepted by React components.
How do you pass props to a component?
As an argument
When you create your React element, you specify what you want to pass as key value pairs
How do you write JavaScript expressions in JSX?
put them in curly braces
{prop}
How do you create “class” component in React?
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
How do you access props in a class component?
this.props
What Array method is commonly used to create a list of React elements?
Array.map()
