W6D5

Question 1

What is React?

Answer 1

React is a JS library for creating User Interface components.

Question 2

What does React do?

Answer 2

When data in the User Interface changes, React updates the User Interface to match that data.

Question 3

How does React work?

Answer 3

On the initial request, the component is rendered and the HTML markup is generated and added to the document. When the data is changed, Reacts will only re-render the bit of data that has been changed in the component. It does so by using a diff on what has been changed on the component and what was originally there. That minimum change can be applied to the DOM.

Question 4

What is reconciliation?

Answer 4

The process of using a diff algorithm to check the difference between the DOM trees of the initial state and the changed state so that React can render a portion of a component in the most efficient way possible.

Question 5

Where does React come from?

Answer 5

Facebook and Instagram

Question 6

What is JSX?

Answer 6

JSX is a JS syntax extension that resembles HTML and XML.

Question 7

What is XML?

Answer 7

XML stands for Extensible Markup Language. It is a markup language that defines a set of rules for encoding documents in a format that is both human and machine readable.

Question 8

How can you use JS inside of JSX syntax?

Answer 8

Insert JS inside of {curly brackets} and insert this in between element tags or for markup attribute values

Question 9

Why would the below code cause an error? What kind of error does it give?
const myElement = (
	<h1>
	{
		1 + 2 + 3;
		4 + 5 + 6;
	}
	</h1>
);

Answer 9

It will give a syntax error, because the JSX expects JS expressions to be a single line expression.

Question 10

Why do we use Babel?

Answer 10

JSX cannot be interpreted by browsers, so JSX code must be passed through a preprocess that transpiles it into vanillas JS.

Question 11

What are components?

Answer 11

Components are the building blocks of a React view layer. They are JS functions that return HTML to be rendered onto a document.

Question 12

What is root and why does it matter to React?

<div>I'm getting replaced :(</div>

Answer 12

“root” is the element which will serve as the hook into which we insert our React component.

Question 13

What are the two ways to declare components?

Answer 13

Functional Component and Class Component

Question 14

How is a class component written? Write a class component for ‘TodoList’.

Answer 14

class TodoList extends React.Component {

}

Question 15

When do you write a functional component as opposed to a class component?

Answer 15

When a component does not have a lot of things it needs to do?

Question 16

What is the equivalent way to write the below component? What kind of component is below?

class Message extends React.Component {
  render() {
    return (
      <div>{this.props.text}</div>
    );
  }
};

Answer 16

const Message = (props) => { 
return <div> {props.text} </div> 
};

The above is a functional component.

Question 17

What is a pure function?

Answer 17

A pure function is a function whose output is solely determined by its input and that has no side effects.

Question 18

What are two ways React components keep track of data?

Answer 18

Using two instance variables: this.props and this.state.

Question 19

What is the component and their props?

// app.jsx
import Dog from './dog';

const App = () => (

);

// dog.jsx
class Dog extends React.Component {
  constructor(props) {
     super(props);
  }

  render() {
    return (
      <div>Name: {this.props.name}, Breed: {this.props.breed}</div>
    );
  }
};

export default Dog;

Answer 19

The component is the Dog and the props are the properties of the dog, which is name and breed.

Question 20

What are the similarities between state and props?

Answer 20

They are both plain JS objects and trigger a render update.

Question 21

What are the differences between state and props?

Answer 21

To a component, props are initial values given to the component and are read only. Props are meant to be used when they aren’t going to be changed. State is used when incoming input needs to be maintained or updated.

Question 22

During initialization, what is state?

Answer 22

State is undefined.

Question 23

How do you change state at certain points of a lifecyle? What happens after changing state?

Answer 23

Using this.setState( ); Any time the state is changed, the component will call render().

Question 24

What are synthetic events?

Answer 24

They are ways to pass event listeners directly to your components via props.

Question 25

What is a transpiler?

Answer 25

source to source compiler; They are tools that read source code written in one programming language and produces the equivalent code in another language.

Question 26

What is Babel?

Answer 26

It is a transpiler that converts code into ES5.

Question 27

What is babel-core?

Answer 27

It is the transpiling engine itself

Question 28

babel-preset-es2015 and babel-preset-react?

Answer 28

are configurations that tell the core transpiler how to interpret Es6 and JSX respectively.

Question 29

What is object destructuring?

Answer 29

To extract parts of an object and assign those parts to different variables

Question 30

Why is it important to write super inside the constructor of a class component?

Answer 30

By creating a constructor method in the component declaration, it will overwrite the React class that is inheriting from. super(props) helps in preventing that.

Question 31

Why do we use React?

Answer 31

It simplifies and speeds up DOM manipulation. Components offer usability. Provides a reactive interface that updates when the data represents changes.

Question 32

What is the difference between jQuery and React?

Answer 32

jQuery manually goes into the DOM and replaces the old DOM. React has a virtual DOM, which it will use to change a small portion of data and never replace the entire DOM.