React

Question 1

What is React?

Answer 1

a javascript library for building user interfaces

helps you build fast and interactive UIs

it allows you to change data without reloading the page

allows you to build components and reuse them

Question 2

What is a React element?

Answer 2

what gets returned from components

its an object that virtually describes the DOM nodes
that a component represents (or an object that describes an html element)

Question 3

How do you mount a React element to the DOM?

Answer 3

by using ReactDOM.render() method

Question 4

What is Babel?

Answer 4

a tool to convert ES2015+ code into a backwards compatible version of JS that can be run by older JS engines

Question 5

What is a Plug-in?

Answer 5

a software component that adds on a specific feature to a program

when a program supports plugins, it enables customization

Question 6

What is a Webpack loader?

Answer 6

they allow you to pre-process files as you import or “load” them

they can transform files from a different language (like TypeScript) to JavaScript
or load inline images as data URLs
or import CSS files directly from your JS modules

its recommended that you specify the them in your webpack.config.js file (by using module.rules)
or another way is inline which is specify them explicitly in each import statement

Question 7

How can you make Babel and Webpack work together?

Answer 7

by installing babel-loader

Question 8

What is JSX?

Answer 8

a syntax extension to JavaScript
when used in React, it describes what the UI should look like
it produces React “elements”

Question 9

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

Answer 9

because React must be in scope from your JSX code even though its not directly referenced

once we convert jsx into js, you’ll see that React.createElement is being used

Question 10

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

Answer 10

by installing babel-loader and its plugin:

babel-loader
@babel/core
@babel/plugin-transform-react-jsx

Question 11

What is a React component?

Answer 11

it lets you split the UI into independent, reusable pieces and think about each piece in isolation

components are like JS functions thats why we call components “Function Component”

they accept arbitrary inputs (called props) and return React elements describing what should appear on the screen

React component accepts a single “props” (stands for properties) object argument with data and returns a React element

Question 12

How do you define a function component in React?

Answer 12

function keyword
function name (HAS TO start with a capital letter or else the function gets passed as a string)
props passed in ()
returns jsx

Question 13

How do you mount a component to the DOM?

Answer 13

by calling the component function in between open and closed angle brackets

Question 14

What are props in React?

Answer 14

props is a keyword in React that is used for passing data from one component to another

props is an object

you can pass any JS expression as a prop by surrounding it with { }

Question 15

How do you pass props to a component?

Answer 15

in a (function) component, you can pass the props object into your function by specifying it in the () of the function component

to pass props, you want to assign value to props

Question 16

How do you write JavaScript expressions in JSX?

Answer 16

we can put any valid JS expression inside curly braces in JSX

if you pass no value for a prop, it defaults to “true”

Question 17

How do you create “class” component in React?

Answer 17

• by using the class keyword
• name of class for ex Welcome
  extends keyword
• and extending to React.Component (Welcome would be a sub class of React.Component)
• must define render() inside curly braces

Question 18

How do you access props in a class component?

Answer 18

this.props

Question 19

What is the purpose of state in React?

Answer 19

State is similar to props, but it is private and fully controlled by the component

The only place where you can assign this.state is the constructor

to modify state, use setState()

// Wrong
this.state.comment = 'Hello';

// Correct
this.setState({comment: 'Hello'});

state keeps track of something

state is for keeping tracking of values that change over time

Question 20

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

Answer 20

by calling onClick props and passing in javascript function

Question 21

what does bind do?

Answer 21

this.handClick is binding this constructor function and assigning it to the this.handleclick of the constructor function

we want the handClick value when

Question 22

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

Answer 22

map method

Question 23

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

Answer 23

the data’s (an array) id or unique value of the data, so react can distinct each array value

needs to be unique amongst its sibling (an array)

Question 24

What are controlled components?

Answer 24

a component that takes its current value through props and notifies changes through callbacks like onChange or onSubmit

Question 25

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

Answer 25

onChange and Value

Question 26

What does fetch() return?

Answer 26

a Promise containing the response / Response object of the path in your fetch argument

Question 27

What is the default request method used by fetch()?

Answer 27

GET method

Question 28

How do you specify the request method (GET, POST, etc.) when calling fetch?

Answer 28

by declaring the request method as an object in the second argument of the Fetch method

Question 29

✧ What is the json() method?

Answer 29

takes a Response and reads it to completion

returns a promise which resolves with a JS object that is the result of parsing the body text as JSON

NOTE: despite the method being named json(), the result is not JSON but is instead the result of taking JSON as input and parsing it to produce a JAVASCRIPT OBJECT

Question 30

When does React call a component’s componentDidMount method?

Answer 30

its invoked immediately after a component is mounted (inserted into the tree)

componentDidMount runs once

a good place to initiate API calls, if you need to load data from a remote endpoint

Question 31

Name three React.Component lifecycle methods.

Answer 31

render() - only required method within a class component

constructor()

componentDidMount()

componentDidUpdate()

componentWillUnmount()

Question 32

How do you pass data to a child component?

Answer 32

by passing props

and if the props is in another component, pass this.props

Question 33

What does express.static() return?

Answer 33

returns a function that is a middleware function, a function to pass to app.use as a middleware function

Question 34

What is the local __dirname variable in a Node.js module?

Answer 34

directory name of the currently module

aka the full absolute path to that file/module

Question 35

What does the join() method of Node’s path module do?

Answer 35

joins the path specified in the method’s arguments into a string of a file path

Question 36

✧ what is express.static

Answer 36

it exposes a directory or a file to a particular URL so it’s contents can be publicly accessed

opens express file over server in default browser

(need more info)

Question 37

What is registration?

Answer 37

the process of “signing up”

Question 38

What is authentication?

Answer 38

the process of “logging in”

In digital systems, authentication is the process of accepting secrets, or “credentials”, from a client and checking them against a stored version of the credentials

Question 39

What is authorization?

Answer 39

is how digital systems decide what data or functionality is available to their users