Javascript & React

Question 1

What is React?

Answer 1

React is the most popular javascript library for building user interfaces. Building a component is easier with react as it is reduced to a function that returns HTML elements, called JSX.

Question 2

What is Redux?

Answer 2

Redux is a state management library. It means that we can select the data from the state anywhere in the application, as well as perform complex manipulation with it.

Question 3

How does Redux work?

Answer 3

it works using predefined actions, which can make different state manipulation. these actions need to be dispatched to the store in order for the state to change.

Question 4

What makes Redux so special?

Answer 4

It is more scalable than React context API. Has got a wonderful debugging tool, which can allow going back in time for debugging purposes. Is the best for managing huge chunks of data

Question 5

Redux set up process

Answer 5

Create a store and wrap the whole application with it. then you can create different reducers to manipulate different data from the store

Question 6

What are reducers in Redux?

Answer 6

In Redux, a reducer is a pure function that takes an action and the previous state of the application and returns the new state. The action describes what happened and it is the reducer’s job to return the new state based on that action.

Question 7

Why do you choose React?

Answer 7

reusability, huge community, easy to learn, in demand
- Component-based structure
- Easy learning curve
- Ability to integrate with third-party plugins
- The big community behind it
- Components ready to plug and play into an application

Question 8

What is AJAX?

Answer 8

Is the way javascript code makes requests to the server, behind the scenes and receives information in different formats, like JSON and XML

Question 9

What is responsive design?

Answer 9

It’s a web development approach that creates dynamic changes to the appearance of a website, depending on the screen size and orientation.

Question 10

What is the difference between REST API and RESTful API?

Answer 10

There are no differences between REST and RESTful as far as APIs are concerned. REST is the set of constraints. RESTful refers to an API adhering to those constraints.

Question 11

What is REST API

Answer 11

REST is a set of constraints:
- Uniform interface
- Client-server
- Stateless
- Cacheable
- Layered system
- Code on demand (optional)

Question 12

What is closure?

Answer 12

an inner function nested inside some parent function has access to the variables (scope) defined in the parent function. (LEXICAL SCOPE)

Question 13

What is a promise?

Answer 13

Is an object that represents an asynchronous completion of an operation, either failed or fulfilled

Question 14

What is a callback?

Answer 14

a callback is a function passed inside another function as an argument

Question 15

What are the major features of React?

Answer 15

It allows you to write custom components and have HTML tags in the form of JSX, hence the code is more maintainable and flexible. Declarative DOM: react takes care to update the UI when changing the state.

Question 16

What is JSX?

Answer 16

JSX stands for JavaScript XML. JSX allows us to write HTML in React

Question 17

What is the virtual DOM? How does the virtual DOM work?

Answer 17

The virtual DOM is a visual representation of the UI kept in the memory and synced with the real DOM. When the state changes, react takes care of those state changes to be reflected in the DOM. No need to manipulate it manually.

Question 18

state vs props

Answer 18

Props are used to pass data from one component to another and are read-only. Whereas state is data storage and it can be changed, but cannot be passed directly to another component, only through props.

Question 19

What does lifting state up mean and why do we do it?

Answer 19

Lifting the state up means sharing the data with an ancestor or parent component.

Question 20

Why do we set a key property when we map over an array in React?

Answer 20

it gives an unique identifier to each element in the arrat and helps react identify which element was updated, addded or removed.

Question 21

What are the core principles of Redux?

Answer 21

(1) it’s a single source of truth for your state. The state is read-only.
(2) The only way to update the state is to dispatch actions, which are objects describing what needs to happen with the state.
(3) Changes are made with pure functions. ( a pure function will always return the same value if the arguments supplied are the same).

Question 22

How do I make an AJAX request using Redux?

Answer 22

By creating a promise inside an action.

Question 23

What are the benefits of using Redux DevTools?

Answer 23

better debugging experience and the ability to go back in time to check what has happened to the state after a specific step in the code.

Question 24

How do I use React DevTools? What does this help me with?

Answer 24

It helps me inspect the component hierarchy. At least that is what I am using it for.

Question 25

What is redux-thunk?

Answer 25

Redux Thunk is middleware that allows you to return functions, rather than just actions, within Redux. This allows for delayed actions, including working with promises.

Question 26

React context vs Redux

Answer 26

• Redux is better for huge chunks of dynamic data.,
• Adding more data with context requires creating another context in react context.
• In redux logic and state is managed outside the component
• Whereas context data is managed inside the component, which can become messy.

Question 27

What’s the benefit of using async/await?

Answer 27

Increase the performance and responsiveness of your application, particularly when you have long-running operations that do not require blocking the execution. Without async/await the app would be blocked until let’s say the data would be fetched from the server.

Question 28

What is cookie? cookies vs localStorage vs sessionStorage?

Answer 28

• Session storage stores the data only during the session, once the tab is closed, the data gets lost.
• Cookie is an old storing mechanism with up to 4 kb of storing capacity
• The localStorage object stores data with no expiration date. The data is not deleted when the browser is closed, and are available for future sessions.

Question 29

What is prototypal inheritance?

Answer 29

Simply put, prototypical inheritance refers to the ability to access object properties from another object. We use a JavaScript prototype to add new properties and methods to an existing object constructor. We can then essentially tell our JS code to inherit properties from a prototype.

Question 30

What is the DOM?

Answer 30

Is an Interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.

Question 31

How to copy an Array?

Answer 31

Spread operator and all the array methods that return a shallow copy of the array.

Question 32

How to compare two objects?

Answer 32

• Object.is(obj1,obj2)
• JSON.stringify both objects and compare them.
• Create an algorithm using object.keys and object.values and use forEach to compare the elements of the object

Question 33

What is asynchronous programming and why is it important in JavaScript?

Answer 33

Asynchronous programming is a technique that enables your program to start a potentially long-running task and still be able to be responsive to other events while that task runs, rather than having to wait until that task has finished.

Question 34

What is hoisting?

Answer 34

Hoisting is the ability to use a variable or execute a function before it was declared.

Question 35

let, var, const

Answer 35

(1) hoisting (var will not show an error when used before declaration, let and const will => but they are both hoisted)
(2) declaration (let a),
(3) scope (block,function)
(4) re-assignment (a=5)

Question 36

what is higher-order function?

Answer 36

A higher-order function is a function that takes a function as an argument or returns a function.(map,reduce,filter)

Question 37

What’s the difference between a variable that is: null, undefined or undeclared? How would you go about checking for any of these states?

Answer 37

undeclared - can be easily spotted as it will throw an error
null & undefined - are both falsey values
undefined - is declared but has never been assigned a value
null - is a value of a variable which was declared to be empty on purpose

Question 38

What is the difference between a store and a reducer?

Answer 38

Store - is what holds all the data your application uses. Reducer - is what manipulates that data when it receives an action.

Question 39

What is the difference between == and ===?

Answer 39

=== compares value and type
== compares just the value

Question 40

How do you send data up from child to the parent component?

Answer 40

Pass a function as a prop to the Child component. Call the function in the Child component and pass the data as arguments. Access the data in the function in the Parent