React

Question 1

What is React?

Answer 1

• React is a library for making user interfaces through JavaScript
  
  • Frameworks are types of libraries (React is a library)

Question 2

What is a React element?

Answer 2

React elements are objects that describe what will be shown. React DOM takes care of manipulating the DOM with the provided React elements. They are not DOM objects

Question 3

How do you mount a React element to the DOM?

Answer 3

• Query for/create a DOM element to create the React root with
• Attach the root to that DOM object using const root = ReactDOM.createRoot($container)
• Render React elements on that root using root.render(myElement)
  
  • Removes everything in the DOM element and replaces it with the React elements

Question 4

What’s the difference between a library and a framework?

Answer 4

• Frameworks have inversion of control (who calls who)
  
  • Frameworks generally have events
  • You define things and hand them off
    
    • Express is a framework: You define things like app.get and app.post, but something else handles when they get called
    • Lodash is a library: You get a bunch of functions from Lodash and use them when you want
• Library is a superset with frameworks in it

Question 5

What is Babel?

Answer 5

Babel is a toolchain that can analyze JavaScript code that is written with newer standards and convert it into backwards-compatible JavaScript.
A JavaScript compiler

Question 6

What is a Plug-in?

Answer 6

A plugin enhances a program’s capabilities

Question 7

What is a Webpack loader?

Answer 7

A Webpack loader is a step/operation that acts on source code, allowing the code to be transformed/processed as Webpack bundles the code together

Question 8

How can you make Babel and Webpack work together?

Answer 8

The babel-loader should be specified in the webpack.config.js file under module.rules
Additionally, babel-loader should be npm installed along with any Babel plugins such as @babel/plugin-transform-arrow-functions (don’t forget @babel/core as well)
Plugins to be used should be specified in the module.rules as well

Question 9

What is JSX?

Answer 9

• JSX is a syntax extension of JavaScript, and it gets converted to normal JavaScript by a module bundler like Webpack using something like Babel with the appropriate plugin
• Typically used with React
• Structuring UI is similar to writing HTML

Question 10

Why must the React object be imported when authoring JSX in a module?

Answer 10

The React object has the methods necessary to actually create the React elements (the objects). Those methods are called after the JSX syntax is converted into normal JavaScript.

Question 11

How can you make Webpack and Babel work together to convert JSX into valid JavaScript?

Answer 11

• Install babel-loader, @babel/core, and the plugin @babel/plugin-transform-react-jsx using NPM (don’t forget webpack and babel in general)
• Set the loader to run with the plugin in the webpack.config.js file
• When Webpack starts bundling from npm run build, it will process .jsx files using the plugin

Question 12

What is a React component?

Answer 12

It’s a function that outputs a React element

Question 13

How do you define a function component in React?

Answer 13

• function CapitalName(props) { return Stuff {props.something} Here }
  
  • Name of the function component must start with a capital
  • Has one parameter props
  • returns a React element
  • Arguments are accessed with curly braces containing an expression, usually accessing the props object

Question 14

How do you mount a component to the DOM?

Answer 14

• Query for the root DOM element
  
  • Use ReactDOM.createRoot($DOMroot) to create the React DOM root
  • With the React DOM root, call .render() with the desired React elements created from the React component inside

Question 15

What are props in React?

Answer 15

Props are arbitrary inputs passed to a React component (props is an object)

Question 16

How do you pass props to a component?

Answer 16

• When creating an element from a component, enter them after the component name like or if you have an expression as a prop, wrap the expression in curly braces like
  
  • Objects, variables, anything other than a string must be in curly braces

Question 17

How do you write JavaScript expressions in JSX?

Answer 17

Wrap them in curly braces, otherwise they’re the same as JavaScript expressions

Question 18

How do you create “class” component in React?

Answer 18

• You create a new class that inherits from the React.Component prototype
  
  • You can use the ES6 extend syntax like class MyClass extends React.Component {}
  • The class must have at least a render method defined (which must return a React element)

Question 19

How do you access props in a class component?

Answer 19

The props object will be a property of this, so use this.props to access any props

Question 20

What is the purpose of state in React?

Answer 20

State allows a React element to not only handle events but also keep the functionality of handling events within the component

Question 21

How to you pass an event handler to a React element?

Answer 21

Within the return of the React element (the render()), add the event as a prop to the React element and specify the handler function as the value to that prop but remember to enclose it within curly braces and specify that it is a method of this

Question 22

What are controlled components?

Answer 22

Controlled components are React components that render the form control and handle the state of the form control with the React state as the single source of truth

Question 23

What two props must you pass to an input for it to be “controlled”?

Answer 23

• value with the associated key value in this.state for that input
  
  • An event handler for onChange, and this event handler should be using setState() in order to manage the state of the component

Question 24

WhatArraymethod is commonly used to create a list of React elements?

Answer 24

myArray.map() because it returns an array of the same length as myArray, one for each element

Question 25

What is the best value to use as a "key" prop when rendering lists?

Answer 25

- An ideal key would be one that uniquely identifies a list item from its siblings, from the source data - Indices are not preferred in the event that the order of the items may change, but can be used

Question 26

When does React call a component's `componentDidMount` method?

Answer 26

It is called immediately after the component is inserted into the tree - After first successful render

Question 27

Name three React.Component lifecycle methods. (This is important for React jobs!)

Answer 27

- `componentDidMount()` - `componentDidUpdate()` - `componentWillUnmount()` - `render()` - `constructor()`

Question 28

How do you pass data to a child component?

Answer 28

The parent can hold the data in its state, and pass that data as a prop to the child component when creating the child element