React

Question 1

What is React?

Answer 1

A JavaScript library for building user interfaces for building user interfaces based on UI components.

Question 2

What is a React element?

Answer 2

an element in the dom
React elements are plain objects, desribes what you want the DOM to look like

A React element is an object representation of a DOM node or component instance building blocks
an object describing a component instance or DOM node and its desired properties
desribes what you want the DOM to look like

Question 3

How do you mount a React element to the DOM?

Answer 3

with the render method of the reactdom object

ReactDOM.render(element, container[, callback])

Question 4

How do you mount a React element to the DOM?

Answer 4

ReactDOM.render( )

method

Question 5

What is Babel?

Answer 5

a JavaScript compiler
compiler takes one language to another
mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments

Question 6

What is a Plug-in?

Answer 6

a software component(branch of software) that adds a specific feature to an existing computer program
program would work without them

Question 7

What is a Webpack loader?

Answer 7

are transformations that are applied to the source code of a module
webpack does work without loader

They allow you to pre-process files as you import or “load” them
A Webpack loader is a node module that applies transformations to the source code to of a module and outputs JavaScript

Question 8

How can you make Babel and Webpack work together?

Answer 8

Install all dev dependencies

• webpack
• webpack-cli
• babel-loader
• @babel/core
• @babel/plugin-transformation-react-jsx

Configure webpack.config.js file to

• use babel loader as the loader
• use plugin transform react jsx

by adding babel-loader to the list of modules in webpack.config

Question 8

How can you make Babel and Webpack work together?

Answer 8

Install all dev dependencies

• webpack
• webpack-cli
• babel-loader
• @babel/core
• @babel/plugin-transformation-react-jsx

Configure webpack.config.js file to

• use babel loader as the loader
• use plugin transform react jsx

by adding babel-loader to the list of modules in webpack.config as a loader

Question 9

What is JSX?

Answer 9

A syntax extension of JavaScript.
which provides a way to structure component rendering using syntax familiar to many developers
generally used for react
supports JS and other stuff

Question 10

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

Answer 10

Becasue the React library must be in scope from the JSX code in order to make calls to React.createElement
So Babel understands to compile JSX to JS

Question 11

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

Answer 11

by installing the react plugin
jsx plugin
- Specify in webpack.config.js to check for jsx to bundle
- Babel loader sends preprocessed files to babel core
- Plugin for convert JSX is read
- Converts to JS
babel loader

Question 12

What is a React component?

Answer 12

components are like JavaScript functions.
a JavaScript class or function that optionally accepts inputs i.e. properties(props) and returns a React element that describes how a section of the UI (User Interface) should appear.

Question 13

How do you define a function component in React?

Answer 13

write a JavaScript function:

By writing a JavaScript function that accepts props as a single argument and returns a React element

Question 14

How do you mount a component to the DOM?

Answer 14

render method of ReactDom
ReactDOM.render(element, container)
first argument of the render method

Question 15

What are props in React?

Answer 15

They are objects used to pass data between react components

attribute like but are objects

Question 16

How do you pass props to a component?

Answer 16

ComponentName (props)
create element
prop name = prop value 
Pass props in a function parameter
Pass props into constructor function and define this.props in the constructor

Question 17

How do you write JavaScript expressions in JSX?

Answer 17

{ and }

Question 18

How do you create “class” component in React?

Answer 18

define a class that extends Component and has a render function
define the render method 
has to return react element 
class and extends keyword

Question 19

How do you access props in a class component?

Answer 19

the this property of the this object

implicit parameter

Question 20

What is the purpose of state in React?

Answer 20

to represent an information about the component’s ‘current situation’
state object is where you store property values that belongs to the component
keep track of values that change over time

Question 21

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

Answer 21

With JSX you pass a function as the event handler, rather than a string.
as a prop

Question 22

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

Answer 22

Array.map( )

map

Question 23

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

Answer 23

The best way to pick a key is to use a string that uniquely identifies a list item among its siblings. Most often you would use IDs from your data as keys:

Question 24

What are controlled components?

Answer 24

components that maintain their own state

like inputform elements such as , , and typically maintain their own state and update it based on user input.

Question 25

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

Answer 25

onChange, value

Question 26

When does React call a component’s componentDidMount method?

Answer 26

immediately after a component is mounted (inserted into the tree)
one time
constructor-render-componentdidmount

Question 27

Name three React.Component lifecycle methods.

Answer 27

mounting, updating, unmounting

constructor, render, componentdidmount, componentdidupdate

Question 28

How do you pass data to a child component?

Answer 28

By using the props object. Passing props is how info flows in React apps, from parents to children.