React

Question 1

What is React?

Answer 1

React is a JavaScript library to facilitate the creation of interactive, stateful and reusable UI components.

Question 2

What is the virtual DOM?

Answer 2

It is an abstraction of the HTML DOM. It allows React to do its computations within the abstract DOM without the real DOM operations, often slow and browser-specific.

Question 3

In most cases, what do you need to to transform HTML code into a static React component?

Answer 3

1. Return the HTML code in render.
2. Replace class attribute name to className (because class is a reserved word in JavaScript).

Question 4

What is the directory node_modules/?

Answer 4

It contains all the dependencies that the package manager loads based on the dependencies list defined in the package.json file.

Question 5

What is the directory public/?

Answer 5

• Public root of the site.
• Files in there are accessible to anyone on the web.
• Good place to keep static files and assets that are not being managed in the src/ directory.

Question 6

What is the src/ directory?

Answer 6

The application code!

Question 7

Where does the browser look for the initial instructions to render the React app?

Answer 7

public/index.html

Question 8

Does the public/index.html file has to be blank? Why not?

Answer 8

No: you can add whatever static design frame and elements around the React element, and know that the app will appear inside that element when JavaScript executes.

Question 9

What is src/index.js?

Answer 9

It is the file where React looks for initial instructions to build UI inside the root element defined in public/index.html.

Question 10

What are the two different ways to import modules, assuming Webpack is used?

Answer 10

• Modules defined in package.json and installed can be imported by name ==> e.g. import {Module} from ‘module’;
• Modules that are not package.json can still be imported by specifying a path to the file where those modules are defined ==> e.g. import {Module} from ‘path/to/module’;

Question 11

What are the arguments of the render() function within src/index.js?

Answer 11

1. A React component to render: the ‘App’ component from src/app.js
2. A DOM node to serve as the render container, that is, the root element.

Question 12

Why can we use HTML and JSX expressions in a React app JavaScript file?

Answer 12

Because the JSX interpreter will compile the JSX tags and HTML tags into calls to React.createElement(). Incidently, the React module has to be imported even if not seemingly used.

Question 13

What is the component < App/ >?

Answer 13

• It is the first component the React app will call in index.js.
• It serves as the container for rendering all the other components in the app.

Question 14

What are all components expected to do?

Answer 14

All components are expected to define a function called render() that returns some DOM elements.

Question 15

Why are curly brackets special inside JSX tags?

Answer 15

They indicate that the code inside the curly brackets is JavaScript. It can be used to print the evaluated value of a JavaScript expression in the generated markup.

Question 16

What cannot be put inside curly brackets inside JSX tags?

Answer 16

Statements CANNOT be within these curly brackets, but any JavaScript expression can be.

Question 17

How to run a React app in development?

Answer 17

$ npm start

Question 18

What does $ npm test does?

Answer 18

It launches a test runner (i.e. Jest) watching changes to the app and trying to run related tests.

Question 19

What does $ npm run build does?

Answer 19

It packages the app for a production deployment, at /build/static/js/.

Question 20

How does React handles non-JavaScript assets?

Answer 20

Webpack loaders (which create-react-app is using behind the scenes to build the app) let you load them directly in Javascript through the module system if files are included in the ‘src’ directory.

Question 21

What is a SPA (Single Page Application)?

Answer 21

A SPA website usually loads once, then rewrites sections of a page rather than loading entire new pages from a server.

Question 22

What are React components?

Answer 22

• Conceptually, components are like JavaScript functions.
• They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.
• Components are stateful and reusable.

Question 23

What are Web components?

Answer 23

• Reusable page elements that encapsulate pieces of functionality.
• Examples:
  
  • Search input that offers live previews of search results.
  • Button that shows a tooltip on hover.
• They are distinct and complementary to React components.

Question 24

What is JSX?

Answer 24

• It is a templating language combining HTML and JavaScript into a single file.
• It is mostly a syntactic convenience for building up JavaScript objects that describe DOM elements.

Question 25

What is the rendering limitation of SPAs?

Answer 25

• The client-side rendering that SPAs do means delayed rendering and delivering more JavaScript to the client.
• This is a limitation that all JavaScript frameworks have.

Question 26

What is the solution to the limitation of SPAs?

Answer 26

Frameworks such as React, Ember and Angular 2 are creating server-side rendering engines in Nodejs that can pre-render the app as static HTML, so that the browser has HTML to read immediately on page load.

Question 27

What is the alternative to declaring a variable at the top of a file?

Answer 27

Make use of constructor function to declare the intitial state of a component:

import React from 'react';

class ComponentName extends React.Component { constructor(props) { super(props); this.state = { [var]: [expression] }; } render() { ... } }}

export default ComponentName;

Question 28

What are props?

Answer 28

Props are arbitrary inputs accepted by components.

• For components created as objects: props are a property of this.
• For components created as functions, props are a function parameter.

Question 29

How to pass an input as prop to a component?

Answer 29

Component some_prop=input / >

Question 30

What care should be taken when accessing props within components?

Answer 30

Only access props (e.g. this.props) to read values. Never modify props inside components.

Question 31

Components always need to have one top-level element. How to make sure they do?

Answer 31

1. Add a single wrapper element: < div > … [your_elements] … < /div >
2. Nest one of the top-level elements inside the other.

Question 32

What is the basic structure of a Reat component?

Answer 32

import React from ‘react’;

class ComponentName extends React.Component {
 render() {
 return (
 [... some elements defined with JSX ...]
 );
 }
}
export default ComponentName;

Question 33

What is the scope of state?

Answer 33

state is a private property of components. Only the corresponding component can read it and change it.

Question 34

What is super(props)?

Answer 34

It is a JavaScript expression used to call functions on a parent’s object within a constructor function. It runs the constructor function of the parent component. props is passed along to make sure super() has access to the same arguments as the overwriting constructor.

Question 35

How can a component share information about its state?

Answer 35

Pass the state explicitly via props in the call to an other component.

Question 36

How to handle the different stages of component’s life in the DOM?

Answer 36

• When a component’s output is first inserted into the DOM it will trigger a hook called componentDidMount().
• When it’s removed from the DOM it will trigger one called componentWillUnmount().
• These hooks are on the same level as render() and return(), and between them.

Question 37

Where to store variables set within hooks?

Answer 37

They should be stored on the this object or on a variable initialized at the top of a file. Only variables used in render() should be stored in state.

Question 38

How to trigger React to update?

Answer 38

Use the setState() method within a function inside a component:

class ComponentName extends React.Component {
 constructor(props) {
 super(props);
 this.state = {
 [var]: [expression]
 };
 }
 updateFunc() {
 this.setState({
 [var]: [expression]
 });
 }
 render() { ... 
 }
}

Question 39

how to refer to props or previous state when using setState?

Answer 39

Use a second form of setState that accepts a function as an argument, rather than directly passing the state (because value of state and prop may be unpredictable due to React asynchronous nature):

updateFunc() {

this.setState(function (prevState, props) {

return {

};

});

}

Question 40

What is the basic structure to handle events in React?

Answer 40

class MyComponent extends React.Component {
 constructor(props) {
 super(props);
 this.handleClick = this.handleClick.bind(this);
 }
 handleClick(event) {
 console.log(this);
 }
 render() {
 return (
 [button onclick={this.handleClick}]
 Click me

[/button]
);
}
}

Question 41

Why do we need to use a constructor to bind an event to this to handle events?

Answer 41

Because the value of this is not bound to the object where the function was originally defined. it is a common pattern when you define a class, and need to preserve reference to this inside its class functions after they are passed around to be executed as callbacks outside the orginal class context.

Question 42

What does it mean that React has a unidirectional data flow?

Answer 42

Apps are organized as a series of nested components. These components are functional in nature: they receive information through the props attribute, and pass information via their return values. Data is passed down from components to their children.

Question 43

Should components try to read or modify the DOM directly?

Answer 43

No, if you find yourself writing selectors to access elements on the page, then there is something wrong.

Question 44

How can a child element trigger a change reflected in a parent component?

Answer 44

The parent component should pass one of its own functions as a callback in a prop when calling the child component.

Question 45

What is the right place of an element of state if two or more components need to share access to it?

Answer 45

The right place of the element of state is in a common ancestor component.

Question 46

What is the routing limitation of SPAs?

Answer 46

As the application is contained in a single page, it cannot rely on the browser’s forward/back buttons.

Question 47

Add dependencies to package.json, either or both to production and development/test.

Answer 47

• Production: $ npm install [package] –save
• Development/test: $ npm install [package] –save-dev

Question 48

What is the role of React Router?

Answer 48

React Router fixes the routing limitation of PSAs. It allows the application to navigate between different components, changing the browser URL, modifying the browser history, and keeping the UI state in sync.

Question 49

What are the components on which the React Router API is based?

Answer 49

1. Router: keeps the UI in sync with the URL.
2. Link: renders a navigation link to change the location.
3. Route: renders a UI component depending on the URL.

Question 50

What are the two router implementations and their URL formats?

Answer 50

• BrowserRouter: using the HTML5 History API.
  
  • import { BrowserRouter } from ‘react-router-dom’;
  • http://localhost:3000/route/subroute
• HashRouter: using the hash portion which sets or returns the anchor part of the URL.
  • import { HashRouter } from ‘react-router-dom’;​
  • http://localhost:3000/#/route/subroute

Question 51

How many child elements a router component can have?

Answer 51

Only one child component.

Question 52

What is the main job of the Router component?

Answer 52

The main job of a Router component is to create a history object to keep track of the location (URL). When the location changes because of a navigation action, the child component is re-rendered.

Question 53

How to use the Link component?

Answer 53

[Link to=”route”] text [/Link]

Question 54

Where should the route components be defined?

Answer 54

The route components can be placed anywhere inside of the router, and the associated component will be rendered in that place, just like any other component.

Question 55

What is the different between using the Link component and directly using the [a href=”route”] element?

Answer 55

The Link components allow to change the URL without refreshing the page, which is not the case when using directly the [a] tag.

Question 56

What does it mean that routes are inclusive?

Answer 56

More than one [Route] component can match a URL path and render at the same time.

Question 57

What is the basic format of a route component? What does it do?

Answer 57

• Format: [Route exact path=”/” component={MyComponent}]
• The matching logic uses the path-to-regexp library: possibility to display different components just by declaring that they belong to the same (or similar) path.

Question 58

What is the use of the exact property for route components?

Answer 58

Renders the component only if the defined path matches the URL path exactly.

Question 59

What is the use of the [Switch] component?

Answer 59

Make the path matching exclusive rather than inclusive: it renders only the first route that matches the location.

Question 60

How to use the Switch components?

Answer 60

Insert Route components as child elements of the Switch component. Note that it is necessary to specify the exact property for the “/” path.

Question 61

How to handle a non-existent path?

Answer 61

Within a Switch component, use a [Redirect to=”path” /] component. This component will navigate to a new location overriding the current one in the history stack.

Question 62

What are the 3 properties passed as parameters when a component is rendered by the router?

Answer 62

• match
• location
• history

Question 63

What are the properties of the match object created during a match between the router’s path and the URL location?

Answer 63

• params: key/value pairs parsed from the URL.
• isExact: true if the entire URL was matched.
• path: path pattern used to match.
• url: matched portion of the URL.

Question 64

How to define what is rendered by a Route component?

Answer 64

Use one of the 3 following properties:

• component: render a component.
• render: renders an element or component.
• children: renders an element or component regardless of whether the path is matched or not.

Question 65

How to pass a prop to a component being rendered by React Router?

Answer 65

< Route 
    path="/some_path" 
    render={(props) => < Component {...props} myProp={myValue} / >}
/ >

Question 66

What is the ComponentWillMount life cycle method? What is its purpose?

Answer 66

• Only called one time before the initial render().
• Component does not have accees to the Natve UI (DOM, etc…) and children refs.
• Opportunity to handle configuration, update our state and prepare for the first render().
• Possible to safely query this.props and this.state knowing with certainty they are the current value.

Question 67

What is the best way to handle a Promise?

Answer 67

myPromise.then(function() {
   // Handle success
   // Some error may happen during handling of success
}).catch(function() {
   // Handle error
});

Question 68

What is Local Storage?

Answer 68

Local Storage is a Web API native to modern web browsers. It allows websites/apps to store simple and limited data in the browser, making that data available in future browser sessions.

Question 69

How to store and retrieve items from local storage?

Answer 69

// setter
localStorage.setItem('myData', data);
// getter
localStorage.getItem('myData');

Question 70

How to use local storage as cache? Give an example of a search function with the native fetch API.

Answer 70

class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = { hits: null };
  }

  onSearch = (e) => {
    e.preventDefault();
    const { value } = this.input;

    if (value === '') {
      return;
    }

const cachedHits = localStorage.getItem(value);
if (cachedHits) {
  this.setState({ hits: JSON.parse(cachedHits) });
  return;
} ~~~

fetch('https://example.com/api/v1/search?query=' + value)
  .then(response => response.json())
  .then(result => this.onSetResult(result, value));   }

onSetResult = (result, key) => {
localStorage.setItem(key, JSON.stringify(result.hits));
this.setState({ hits: result.hits });
}
render() {…}
}
~~~

Question 71

What to use if you want the cache to be emptied when closing the browser?

Answer 71

Use sessionStorage instead of localStorage. Setter and getter are the same as localStorage.

Question 72

What is the purpose of withRouter?

Answer 72

• When a component is rendered by React Router via component prop to a Route, that component is passed 3 different props: location, match and history.
• If we render it ourselves (like < Component / > ), then we do not have access to these Router props. By adding the HOC withRouter in export default withRouter(Component), that takes care of this issue.

Question 73

What are the inputs of the WindowOrWorkerGlobalScope.fetch() method?

Answer 73

• input: either a USVString containing a direct URL or a Request object.
• init (optional): an object containing any custom settings that should be applied to the request, such as: method, headers, body…

Question 74

What is the return value of the WindowOrWorkerGlobalScope.fetch() method?

Answer 74

A Promise that resolves to a Response object.

Question 75

What are the properties of the Response object?

Answer 75

• headers.
• ok: boolean for success/failure.
• redirected: boolean for whether or not the response’s URL list has more than one entry.
• status: code.
• statusText.
• type: e.g. basic, cors.
• url: final URL.
• useFinalURL: boolean for whether this is the final URL of the response.

Question 76

What does Response.json() do?

Answer 76

The json() method of the Body class (inplemented by Response) takes a Response stream and reads it to completion. It returns a promise that resolves with the result of parsing the body text as JSON.

Question 77

What does Object.assign() do? Give its syntax.

Answer 77

The Object.assign() method is used to copy the values of all enumerable own properties from one or more source objects to a target object. It will return the target object. The target object can be {}.

Syntax: const targetObject = Object.assign(target, …sources)

Question 79

What does Promise.reject(reason) does?

Answer 79

It returns a Promise object that is rejected with the given reason. For debugging purposes and selective error catchng, it is useful to make reason an instance of Error.

Question 80

Give an example of Promise.reject().

Answer 80

Promise.reject(new Error('fail'))     
    .then(function() { 
        // not called 
    }, function(error) { 
        console.log(error); // Stacktrace 
    } 
);

Question 81

What is the flexbox algorithm?

Answer 81

An algorithm providing consistent layout on different screen sizes.

Question 82

What are the primary properties of flexboxes?

Answer 82

• flexDirection.
• alignItems.
• justifyContent.

Question 83

What are the possible values of the flexDirection property of flexbox?

Answer 83

Determines the primary axis of a component’s layout: should the children be organized:

• horizontally (row)
• or vertically (column) ==> default.

Question 84

What are the possible values of the justifyContent property of flexbox?

Answer 84

Determines the distribution of children along the primary axis (X).

Positional alignments:

• flex-start: aligns items at the beginning of the container ==> default.
• center: aligns items at the center of the container.
• flex-end: aligns items at the end of the container.

Distributed alignments:

• space-around: evenly distributes items along the main axis such that all items have equal space around them.
• space-between: evenly distributes items along the main axis such that the first item aligns at the start and the final item aligns at the end.

Question 85

What are the possible values of the alignItems property of flexbox?

Answer 85

Determines the alignment of children along the secondary axis (Y). If the primary axis is row, then the secondary is column, and vice versa.

Positional alignments:

• flex-start: aligns items at the beginning of the container ==> default.
• center: aligns items at the center of the container.
• flex-end: aligns items at the end of the container.

Distributed alignments:

• stretch: stretches the items to fill the container ==> default.
• baseline: aligns the items so that their baselines align.

Question 86

How does a tradiotional website loads assets like CSS, images and web fonts?

Answer 86

A traditional website loads assets like CSS, images and web fonts from remote files based on urls in src attributes in HTML tags or stylesheet rules.