React

Question 1

What is React?

Answer 1

React makes it painless to create interactive UIs.
React will efficiently update and render just the right components when your data changes.

React is all about creating custom, reusable DOM elements and structuring the flow of data throughout the page, from actions taking place (example: user inputs text and pressed “return”) to the view being updated. It’s meant to provide a way to structure your interactions so that events that update the DOM flow through your components from highest in the DOM tree to lowest, updating the UI as changes happen that modify its state.

Question 2

What is a React element?

Answer 2

React elements are plain objects that describes what the dom looks like

Question 3

How do you mount a React element to the DOM?

Answer 3

through ReactDOM, Mounting” is when React “renders” the component for the first time and actually builds the initial DOM from those instructions.

ReactDom.render method

Question 4

Symbols

Answer 4

are special markers, usually are property keys or property values.

Question 5

Difference between library and framework

Answer 5

concept of inversion of control, Dom is a framework

Framework is a subset of a library that has inversion of control. give up control, it’s a framework

If you have control, it’s a library

Question 6

What is Babel?

Answer 6

It’s to ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments

Question 7

What is a Plug-in?

Answer 7

adds a specific feature to an existing computer program. When a program supports plug-ins, it enables customization

Question 8

What is a Webpack loader?

Answer 8

Loaders are transformations that are applied to the source code of a module. pre-processing

Webpack by itself only knows javascript, so it needs additional help.

Question 9

How can you make Babel and Webpack work together?

Answer 9

install the babel loader,

Question 10

What is JSX?

Answer 10

JSX (JavaScript Syntax Extension and occasionally referred as JavaScript XML) is a React extension to the JavaScript language syntax[1]

which provides a way to structure component rendering using syntax familiar to many developers. It is similar in appearance to HTML.

Question 11

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

Answer 11

Becasue the React framework must be in scope from the JSX code in order to make calls to React.createElement

used in the final code that babel outputs

Question 12

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

Answer 12

import the webpack and babel, with the react plugin, jsx transform plugin

Question 13

What is a React component?

Answer 13

Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and return HTML. either a class or function

Question 14

How do you define a function component in React?

Answer 14

declare a function that you would ordinarly do. then have a return, have a HTML tag, then the content you want inside it. function gotta be uppercased

Question 15

How do you mount a component to the DOM?

Answer 15

call the render method of the ReactDOM object with two arguments, what you want to mount and where you to append it

Question 16

What are props in React?

Answer 16

stands for properties.

They are properties of a object used to pass data between react components. it’s what allows the re-usability,

uni-directional flow parent to child

treat them as read only

Question 17

How do you pass props to a component?

Answer 17

whatever the ComponentName (props)

Question 18

How do you write JavaScript expressions in JSX?

Answer 18

wrap it in { } curly braces

Question 19

How do you create “class” component in React?

Answer 19

you need to extend React.Component, inside the body, have the render subclass

Question 20

How do you access props in a class component?

Answer 20

Since we are using classes, we have to use this.props,

Question 21

What is the purpose of state in React?

Answer 21

to represent an information about the component’s current situation.

Boils back to React dealing with interactiveness. When add a like to a instagram photo, the page doesn’t refresh, it adds 1. same with carts, with quantity, the price automatically updates.

The state gets replaced. the component gets re-rendered.

Question 22

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

Answer 22

you add an prop to whatever react element you’re returning, you distinguish what react event handler (make sure casing matters) through its attribute name, and its value determines what you want to do. make sure to have javascript expression, and call whatever function.

Question 23

Virtual Dom

Answer 23

react elements describe what doom looks like, 2nd part react reconcialtion algo, how react tells the difference between the old react elements and the new one

Question 24

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

Answer 24

Map

Question 25

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

Answer 25

unique IDs, 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:

it has to be unique

Question 26

What are controlled components?

Answer 26

a component that renders form elements and controls them by keeping the form data in the component’s state. In a controlled component, the form element’s data is handled by the React component (not DOM) and kept in the component’s state.

bound to react component state, this allows (forces) you to store the value in state and have a callback method.

Question 27

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

Answer 27

handleChange, handleSubmit

Question 28

Name three React.Component lifecycle methods.

Answer 28

constructor()
render()
componentDidMount()
ComponentWillUpdate()

Question 29

When does React call a component’s componentDidMount method?

Answer 29

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

after first successful render

Question 30

How do you pass data to a child component?

Answer 30

through the props

Question 31

four ways to trigger render() method:

Answer 31

1. initial render
2. setState()
3. parent component re-render
4. forceUpdate()