React

Question 1

What is React?

Answer 1

JS library for building UI
For front-end

Question 2

What is a React element?

Answer 2

basic building block in a react application - an object representation of a virtual DOM node

It’s just an object

Question 3

How do you mount a React element to the DOM?

Answer 3

by calling ReactDOM. and calling render()

Question 4

What is Babel?

Answer 4

Toolchain used to convert ECMAScript 2015+ code into a backwards-compatible version of JS in current and older browsers or environments

Question 5

What is a Plug-in?

Answer 5

it gives extended functionality

Question 6

What is a Webpack loader?

Answer 6

transformations that are applied to the source code of a module
Webpack loaders follow thru import/export and convert the syntax and style as it goes through it

Question 7

How can you make Babel and Webpack work together?

Answer 7

install ‘babel-loader’ to the loader

Question 8

What is JSX?

Answer 8

a syntax extension to JS
allows us to write declarative JS like writing html within js

Question 9

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

Answer 9

Because it works with React object to because we are actually using react ReactDom.createElement()

Question 10

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

Answer 10

Babel-loader and the babel plugins

Question 11

What is a React component?

Answer 11

independent and reusable bits of code
They serve the same purpose as JS functions but work in isolation and return HTML

Question 12

How do you define a function component in React?

Answer 12

a function that returns an HTML-like syntax

Question 13

How do you mount a component to the DOM?

Answer 13

root.render()

Question 14

What are props in React?

Answer 14

type of object where the value of attributes of a tag is stored
props –> properties

Question 15

How do you pass props to a component?

Answer 15

add them to the JSX

Question 16

How do you write JavaScript expressions in JSX?

Answer 16

use curly brace like {element.text}

Question 17

How do you create a “class” component in React?

Answer 17

use the keyword class and className and extends keyword and React Object and component property { render() }

Question 18

How do you access props in a class component?

Answer 18

render() function

Question 19

What is the purpose of the state in React?

Answer 19

to contain data about the component

store property value that belongs to the component

gives localized data for that specific component and the data that it should be returning

Question 20

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

Answer 20

add an attribute to the React element

Question 21

What are controlled components?

Answer 21

form’s data is handled by the component’s state
it takes its current value thru props and makes changes thru callbacks like onClick and onChange

Controlled by React and making it a single source of truth
React controls what happens in that form on subsequent user input

Question 22

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

Answer 22

value and onChange

Question 23

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

Answer 23

map() array method – returns an array

Question 24

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

Answer 24

to use a string that uniquely identifies a list item among its siblings