react js

Question 1

What is react

Answer 1

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”.

Question 2

React Virtual DOM

Answer 2

DOM is basically the representation of the HTML code in a webpage. The document is the webpage itself, the objects are the HTML tags. And finally, the model of DOM is a tree structure:

Question 3

What are the 3 benefit of Virtual DOM?

Answer 3

Each time you make a change in the code, DOM will be completely updated and rewritten. This is an expensive operation and consumes lots of time. In this point, React provides a solution: The Virtual DOM.

Question 4

So when something changes:

Answer 4

1) React first creates an exact copy of the DOM
2) Then React figures out which part is new and only updates that specific part in the Virtual DOM3)Finally, React copies only the new parts of the Virtual DOM to the actual DOM, rather than completely rewriting it.

Question 5

What is JSX

Answer 5

JSX (JavaScript XML) is a syntax extension to JavaScript used by React. JSX is basically used to write HTML tags inside JavaScript. Later, the JSX code will be translated into normal JavaScript, by Babel.

Question 6

JSX class

Answer 6

className

Question 7

Command to setup React scaffolding

Answer 7

npx create-react-app my-app

Question 8

What is a React Component?

Answer 8

A component is an independent, reusable code block, which divides the UI into smaller pieces. In other words, we can think of components as LEGO blocks.

Question 9

What are React 2 types of components

Answer 9

1) Functional (Stateless)

2) Class (Stateful).

Question 10

Describe Functional (Stateless) Components

Answer 10

A functional component is basically a JavaScript (or ES6) function which returns a React element.

example: function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}

Question 11

So a React Functional Component: has these 3 things

Answer 11

1) is a JavaScript / ES6 function
2) must return a React element
3) take props as parameter if necessary

Question 12

what is a Class (Stateful) Components

Answer 12

Class components are ES6 classes. They are more complex than functional components including constructors, life-cycle methods, render( ) function and state (data) management.

Question 13

4 items React class component:

Answer 13

1) is an ES6 class, will be a component once it ‘extends’ React component.
2) can accept props (in the constructor) if needed
3) can maintain its own data with state
4 must have a render( ) method which returns a React element (JSX), or null

Question 14

Create parentComponent file

Answer 14

import React, { Component } from ‘react’;

class ParentComponent extends Component {
  render() {
    return <h1>I'm the parent component.</h1>;
  }
}
export default ParentComponent;

Question 15

Create firstChild file

Answer 15

import React from 'react';     // React needs to be imported
const FirstChild = () => {
  return <p>I'm the 1st child!</p>; 
};
export default FirstChild;

Question 16

How to call a component?

Answer 16

A component is being called like an HTML tag, but starting with a capital letter:

// we can call a component like an HTML tag

Question 17

What are Props?

Answer 17

React is a component-based library which divides the UI into little reusable pieces. In some cases, those components need to communicate (send data to each other) and the way to pass data between components is by using props.

Question 18

4 items for Props

Answer 18

1) Props stand for properties and is a special keyword in React
2) Props are being passed to components like function arguments
3) Props can only be passed to components in one-way (parent to child)
4) Props data is immutable (read-only)

Question 19

Read data(textMe) in a prop

Answer 19

const ChildComponent = (props) => {  
  return <p>{props.textMe}</p>; 
}

Question 20

Get data from prop

Question 21

React State 5 items

Answer 21

1) State is a special object that holds dynamic data
2) State is private and belongs only to its component where defined, cannot be accessed from outside
3) State is initialized inside its component’s constructor method.
4) Update with setState( ) method
5) State should not be overly-used in order to prevent performance problems

Question 22

Since state is an object, it should be initialized inside the constructor method: give exampled

Answer 22

constructor() {
  this.state = {
    id: 1,
    name: "test"
  };
}

Question 23

Updating The State

Answer 23

this.setState({
name: “testing state”
});

Question 24

Only way to update State

Answer 24

setState()