React Flashcards
What is React?
React is a JavaScript library for creating user interfaces.
What is a React element?
A React element is an object representation that describes the DOM element.
A representation of a DOM node.
How do you mount a React element to the DOM?
Use the render method of the root object and pass the React element as an argument
ex.
import React from ‘react’;
import ReactDOM from ‘react-dom/client’;
const reactElement = React.createElement(
‘h1’,
null,
‘Hello, React!’
);
console.log(reactElement);
const container = document.querySelector(‘#root’);
const root = ReactDOM.createRoot(container);
root.render(reactElement);
What is JSX?
JSX is a syntax extension to JavaScript and you use it to write React “elements”.
Why must the React object be imported when authoring JSX in a module?
JavaScript will not understand JSX so it must be converted to React elements (React.createElement) using babel.
How can you make Webpack and Babel work together to convert JSX into valid JavaScript?
Webpack is the bundler.
Babel is the compiler.
These 2 work together with the babel loader, and then the babel plugin is used to transform JSX code into JavaScript
devDependencies:
- webpack
- webpack-cli
- babel-loader
- @babel/core
- @babel/plugin-transform-react-jsx
Dependencies:
- react
- react-dom
What is a React component?
Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.
They can either be written as a function:
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
or as a class:
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
How do you define a function component in React?
Write it like a JavaScript function or class:
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
Rule 1: It’s a JavaScript function
Rule 2: Has to return a react element
Rule 3: Name of the component has to start with a capital letter
How do you mount a component to the DOM?
Use the render method of the root object.
Ex.
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
const root = ReactDOM.createRoot(document.getElementById(‘root’));
const element = ;
root.render(element);
Why is react a framework?
The definitions of the two words are that a library is a collection of functions, and a framework is a way of doing things.
By this definition, React is a framework because it forces you to build UI in the React way as opposed to the Angular or Ember, etc. way.
On the other hand lodash is a perfect example of a library because it’s just a collection of functions, use them however you like.
What are props in React?
“Props” is a special keyword in React, which stands for properties and is being used for passing data from one component to another.
props is an object
How do you pass props to a component?
You specify the props by adding them as key value pairs.
ex.
< CustomButton text=”React!” / >
How do you write JavaScript expressions in JSX?
They need to be written within curly braces
How do you create “class” component in React?
When creating a React component, the component’s name must start with an upper case letter.
The component has to include the extends React.Component statement, this statement creates an inheritance to React.Component, and gives your component access to React.Component’s functions.
The component also requires a render() method, this method returns HTML.
How do you access props in a class component?
Through the “this” object and the props property
ex.
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
