React

Question 1

React.createElement

Answer 1

lets you create a React element. It serves as an alternative to writing JSX.

import { createElement } from 'react';

function Greeting({ name }) {
  return createElement(
    'h1',
    { className: 'greeting' },
    'Hello'
  );
}

JSX calls createElement for you

Question 2

ReactDOM.createRoot

Answer 2

lets you create a root to display React components inside a browser DOM node.

import { createRoot } from 'react-dom/client';

const domNode = document.getElementById('root');
const root = createRoot(domNode);

React will create a root for the domNode, and take over managing the DOM inside it. After you’ve created a root, you need to call root.render to display a React component inside of it:

root.render(<App />);

Question 3

ReactDOM.createRoot vs ReactDOM.render

Answer 3

ReactDOM.createRoot is a new API as of React v18. The old ReactDOM.render is still available (and deprecated) but it’ll render your app in “legacy” mode which won’t use all the fun new features packed into React v18

Question 4

one-way data flow

aka one-way binding

Answer 4

• In React, each state is owned by one component
• the changes made on the state of the component will only affect the children and not the parents or siblings.

keeps everything modular and fast.

Question 5

Explain JSX

Answer 5

JSX converts HTML tags into react elements (by calling React.createElement)

makes it easier to write React applications.

Question 6

Explain what React does in response to a user input

e.g. User enters something in form input

Answer 6

when you type in the input, React detects that a DOM event happens. When that happens, React thinks something may have changed so it runs a re-render. Providing your render functions are fast, this is a very quick operation. It then diffs what’s currently there and what its render pass came up with. It then updates the minimum amount of DOM necessary.

Question 7

Explain the following react hook:
const [location, setLocation] = useState("Boston")

Answer 7

• location: piece of state that you can track
• setLocation: function that will update that piece of state
• “Boston”: the initial value that location will be set to

Question 8

Explain the following react hook in terms of ES6 destructuring:
const [location, setLocation] = useState("Boston")

Answer 8

// useState returns an array
const locationHook = useState("Boston")
const location = locationHook[0]
const setLocation = locationHook[1]

Question 9

Why are keys important for array items in React

Answer 9

So React knows if any items in the array switched places. Then React can make the correct updates to the DOM tree.

Question 10

What are hooks in React

Answer 10

Hooks are functions that let you “hook into” React state and lifecycle features from function components. Hooks don’t work inside classes — they let you use React without classes.

Question 11

What is the Effect Hook in React

useEffect()

Answer 11

adds the ability to perform side effects from a function component. It serves the same purpose as componentDidMount, componentDidUpdate, and componentWillUnmount in React classes, but unified into a single API.

Question 12

What does React Router do

Answer 12

keeps your UI in sync with the URL

Question 13

useParams

React Router

Answer 13

The useParams hook is how you get params from React Router.

It used to be through the props but now they prefer this API.

Question 14

What is React Query

Answer 14

easy to use data-fetching libary for React

handles fetching, caching, etc…

Question 15

props & destructuring

Answer 15

React component functions accept a single argument, a props object

function Avatar(props) {
  let person = props.person;
  let size = props.size;
  // ...
}

Destructuring - this is same as above:

function Avatar({ person, size }) {
  // ...
}

Question 16

What do curly braces do when inside JSX

Answer 16

let you “escape back” into JavaScript

Question 17

explain this syntax:
style={{}}

Answer 17

• not a special syntax
• just a regular {} object inside the style={ } JSX curly braces.
• You can use the style attribute when your styles depend on JavaScript variables.

Question 18

React DOM

Answer 18

React’s library to talk to web browsers