React

Question 1

What is Array.prototype.filter useful for?

Answer 1

It “filters” out the elements you don’t want and returns a new array of the elements you do want
It passes a function as the second argument to filter it out

Question 2

What is Array.prototype.map useful for?

Answer 2

It applies some kind of function to every element in the array and returns a NEW array with those values

Question 3

What is Array.prototype.reduce useful for?

Answer 3

It’s helpful for getting 1 result from all the elements of 1 array
The result, however, will move from ([0], [1]) the result of which is then used for the next function with the next one in line, [2], and then that result for the next one [3], and so on and so forth

Question 4

What is Webpack?

Answer 4

Starts from multiple modules and packages and the end results is fewer files, common case is to make 1 bundle/file
Let’s us write modules but also support any module format and handle resources and assets at the same time
It’s a tool that lets you bundle your JS applications (supporting ESM and CommonJS) and it can be extended to support many different assets like images, fonts and stylesheets

Question 5

How do you add a devDependency to a package?

Answer 5

Npm install [name like webpack or webpack-cli, or both] –save-dev

Question 6

What is an NPM script?

Answer 6

Command line command with a nickname
The “scripts” property in the package.json file supports a number of built-in scripts and their preset life cycle events

Question 7

How do you execute Webpack with npm run?

Answer 7

Add the nickname to the script property with whatever command we want then we command like so
Npm run [name like build]

Question 8

What is React?

Answer 8

A JavaScript library for building user interfaces
It’s a package from npm

Question 9

What is a React element?

Answer 9

It’s an object
React.createElement( ‘dom element in string’, [props, if nothing null], [children] )

Question 10

How do you mount a React element to the DOM?

Answer 10

Create the html element where you want the object placed
Then const root = create a ReactDom.createRoot()
Then render method on that root var

Question 11

What is Babel?

Answer 11

It’s a toolchain mainly used to convert ECMAScript 2015+ code into backwards compatible version of JavaScript in current and older browsers or environments, or back-covert JSX

Question 12

What is a Plug-in?

Answer 12

This is a software component that adds a specific feature to an existing computer program. When a program supports plug-ins, it enables customization

Question 13

What is a Webpack loader?

Answer 13

They are transformations that are applied to the source code of a module. They allow you to pre-process files as you “import” or “load” them.
Thus, they’re kind of like “tasks” and provide a powerful way to handle front-end build steps
Can transform files from different language like TypeScript to JavaScript or load inline images as data URLs.

Question 14

How can you make Babel and Webpack work together?

Answer 14

You have to install babel-loader as a devDependency
Npm install babel-loader

Question 15

What is JSX?

Answer 15

It’s a syntax extension to JavaScript
JavaScript plus more stuff (additional syntax), no HTML
Recommended to use with React to describe what the UI should look like, looking like template language but with the power of JavaScript

Question 16

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

Answer 16

It actually creates an element, we just don’t see it with the JSX syntax
With JSX syntax it looks like
const element = <h1>Hello, JSX!</h1>;
But if you break it down, it looks like
Const element = React.createElement(‘ht’, null, “hello, JSX!’);
JSX creates a react element, which needs to be able to call on the React object, which has to be imported

Question 17

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

Answer 17

@babel/plugin-transform-react-jsx in devDependencies helps convert JSX into JavaScript
Webpack default behavior compiles everything and makes a module
Babel default behavior does nothing.
We have to tell babel exactly what to do with the transform-react-jsx plug-in

Question 18

What is a React component?

Answer 18

They’re reusable JavaScript functions or class that return React elements that represents a piece of the user interface They accept arbitrary inputs (properties) and then return React elements that describe what should appear on the screen

function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}

Question 19

How do you define a function component in React?

Answer 19

It can be arrow function or just function keyword, the first letter must be an uppercase letter and it needs to return a react element

function CustomButton() {
return <button>Click Me!</button>;
}

Question 20

How do you mount a component to the DOM?

Answer 20

You first document query select to where you want the element to show up
Then createRoot on ReactDOM with create the DOM element on that element you selected
Create a variable(element) and assign it the react element with the actual name of the function used to create the DOM element
Render the above element on the root variable first selected via querySelector ** the React element must be the argument for the render method on root

const container = document.querySelector(‘#root’);
const root = ReactDOM.createRoot(container);
const element = <CustomButton></CustomButton>;
root.render(element);

Question 21

What are props in React?

Answer 21

Props is an object
It can be used as properties/attributes
It is also used as the argument passed in a function to create customized attributes of a React element

Question 22

How do you pass props to a component?

Answer 22

You write props as the parameter in the function definition and then use props.[contentVariableName] the dot notation on props so that you can reference what to pass through this function. This is defined in a different variable
propName = value OR propName = { }
function CustomButton(props) {
return (
<button>{props.text}</button>
);
}

Question 23

How do you write JavaScript expressions in JSX?

Answer 23

Anything within curly braces can be a JavaScript expression in JSX
Variables
Actual math equations

Question 24

How do you create “class” component in React?

Answer 24

You must extend from React.Component and then call the render() method and return the React element
class CustomButton extends React.Component {
render() {
return <button>{this.props.text}</button>;
}
}

Question 25

How do you access props in a class component?

Answer 25

You define it in the React element with the this object
return <button>{this.props.text}</button>;

Question 26

What is the purpose of state in React?

Answer 26

It creates the base foundation of the default state of the React element that is used to compare for future changes
Data model of values that change over time
State is always what has happened, not what the user sees
I.e. The user clicks a button, that’s the action that happened. The text change is dependent on the user clicking the button
Always use facts to determine state

Question 27

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

Answer 27

Must bind() the method and value of this first
this.handleClick = this.handleClick.bind(this);
Then when you return the React element, you must pass the onClick property with the handleClick method to the element, like button)
<button onClick={this.handleClick}>Button Text Name</button>
You pass an event handler as a prop in the react element

Question 28

What are controlled components?

Answer 28

An input form element whose value is controlled by React, where React renders a form and controls what happens in that form on subsequent user input
Input value is controlled by the component and the component controls what happens to the value(?)

Question 29

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

Answer 29

Value property and onChange property
<input value={this.state.value} onChange={this.handleChange} />

Question 30

What Array method is commonly used to create a list of React elements?

Answer 30

Map method

Question 31

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

Answer 31

String (special string attribute you need to include when creating list of elements), must be unique in its scope