React.js Flashcards
What is React?
A free and open-source front-end JavaScript library for building interactive user interfaces using declarative language and based on UI components
What is a React element?
Object - plain JavaScript object that describes the DOM element
How do you mount a React element to the DOM?
Create the React element by calling React.createElement()
Query the DOM for the container div element - root
Create a React root by calling ReactDOM.createRoot(container)
Call the render method of the root object to mount the React element
What is JSX?
JavaScript XML - JavaScript syntax extension, used with React to describe what the UI should look like. JSX converts HTML tags into React “elements”.
Why must the React object be imported when authoring JSX in a module?
The JSX gets internally inserted into many React.createElement() function calls and each of them returns an object. Need to import React from “react” since internally every JSX is creating a React Component using JSX transformer.
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 as devDependencies and react, react-dom as dependencies
Then “Build” script with npm run
What is a React component?
Components are conceptually like JavaScript functions or classes. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.
Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.
How do you define a function component in React?
function Component([props]) {
return textContent {JS expression};
}
How do you mount a component to the DOM?
Define a function Component that returns an element
Query container
root = ReactDOM.createRoot(container)
root.render(Component)
Is React a framework or library?
React is a FRAMEWORK not a library - INVERSION OF CONTROL. Function itself is being passed as an argument into React.createElement(Component) but it is never called. You define the function but React decides when to call the function you created.
What are props in React?
Information passed into React components as arguments. Props are objects which can be used inside a component.
How do you pass props to a component?
Can pass props to any component just like how you declare attributes for any HTML tag.
How do you write JavaScript expressions in JSX?
Write JavaScript expressions within curly braces
How do you create “class” component in React?
class ClassName extends React.Component {
render() {
return textContent {JS expression “this.props”}
}
}
How do you access props in a class component?
this.props
