React

Question 1

What is redux?

Answer 1

Redux is a state manager. It can be used as a data store. It allows us to take state and make it globally accessible. We can subscribe any component to a state in the redux data store.

Question 2

How does redux work?

Answer 2

Redux works as a state container that allows us to then subscribe states to as many components as we wish. From these components we can then dispatch actions that mutate state.

These actions can be saved within redux store folders and all the dispatches can be saved as cases in a reducer.

This allows us to scale large apps easily.

Question 3

What makes Redux so special?

Answer 3

Without a state management tool like redux it would be very difficult to scale apps to large sizes. Problems such as prop drilling would be way too prevalent and make designing large scale apps difficult.

Question 4

Redux set up process

Answer 4

To setup redux we npm install react-redux

We setup a folder structure with the store, reducers and actions.

Next we have an index.js in the store where we combine all reducers and create a store with.

This store we then wrap in our app with

To subscribe our redux store to a component we export default connect, with the name of the component in brackets, in the connect function we also mapstatetoprops or mapdispatchtoprops

There we import which functions we want and what state we need

This wraps the component with the redux store and subscribes it to state changes

Question 5

What are reducers in redux?

Answer 5

As the name suggests, a reducer is something that reduces all possible actions within it to one result.

Reducers in redux are usually written with switch/case syntax where every case is easily readable and is obvious what kind of state will come out as result.

Reducers easily describe what happened to state in an action.

Question 6

Why did you choose React?

Answer 6

Personally I chose react because it’s very lightweight and there is a heavy demand for it in the industry. After i taught myself fundamentals of JS

With angular I would have had a steeper learning curve but with React I can install packages as I see the need for them and smoothly expand my learning curve as it fits me.

I understand Angular as a framework is a complete package while with React you need to install packages to expand its functionalities.

React is efficient, it’s declarative, all the complex stuff in creating UI’s looks easily readable in React unlike Angular for example.

Question 7

What is AJAX?

Answer 7

AJAX is Asynchronous Javascript And XML, it is the use of the XMLHTTPrequest object to communicate with servers. It can send and receive information in various formats.

AJAX allows us to not have to reload a page to update its content

AJAX is a technology concept while most people don’t think about it nowaday and use promise based http libraries like axios which handles it internally for us.

Question 8

What are the major features of React?

Answer 8

JSX - Javascript Syntax Extension
Component based architecture
Declarative UI
Virtual DOM
Smooth learning curve

Question 9

What is JSX?

Answer 9

Javascrypt Syntax Extension or Javascript XML
allows us to write HTML in React

JSX converts html tags to react elements

Question 10

What is virtual DOM? How does it work?

Answer 10

Virtual DOM is a representation of the UI kept in memory and synced with the real DOM.

This allows us skip traversing the DOM to change an element as we can simply change an element in virtual DOM as though its an object than re-render only the change

Virtual DOM isn’t necessarily faster but it saves us a lot of time by doing all the manual work of appending and creating elements.

Virtual DOM also uses key attributes for elements in lists so it doesnt have to repaint the whole list only the element that changed.

Question 11

props vs state?

Answer 11

Props are used to pass data from one component to another, these can be functions, variables, objects, arrays, pretty much anything

The state is a local data storage that is local to the component and cannot be passed around.

Question 12

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

Answer 12

Let’s say we have many nested components, sometimes these components share one state, so to avoid unnecessary prop drilling between all these components we lift state to the highest order parent which then shares state to all components that need it in a tree

Question 13

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

Answer 13

When we map over a list, we always set key properties for every item in list.

So that in the future when one of these items change, React can know exactly which item so it avoids re-rendering the entire list

Question 14

What are the core principles of Redux?

Answer 14

Single source of truth
- global state of the app is stored within a single store
Read-only state
- state cannot be changed unless an action describing the change is dispatched
- we never directly change state, we only transform it
Changes are made with pure functions
- there are no side effects and the functions are declarative

Question 15

How do you make an AJAX request using Redux?

Answer 15

We would need to apply middleware, in this case redux-thunk which allows us to do async functions

Question 16

Benefits of using redux devtools?

Answer 16

Using redux dev tools we are able to trace actions, and see which components are subscribed to what state

Question 17

What is redux-thunk?

Answer 17

Redux thunk is middleware we have to apply to redux to be able to call async functions

Question 18

React context API vs redux?

Answer 18

context API is a built in tool that ships with react, it’s best for small projects as it works best with static data that is not often refreshed or updated - state and UI logic stays in the same component and you need to use contextProvider to apply context in a component

context API doesnt allow you to use multiple context providers of the same type

Redux is best used when you have a lot of dynamic data and you plan on making a large app that scales

Question 19

What is Local Storage?

Answer 19

LocalStorage
localStorage is a way to store data on the client’s computer. It allows the saving of key/value pairs in a web browser and it stores data with no expiration date. localStorage can only be accessed via JavaScript, and HTML5. However, the user has the ability to clear the browser data/cache to erase all localStorage data.
Pros:
stores data with no expiration date
storage limit is about 5MB
data is never transferred to the server
Cons:
plaintext, hence not secure by design
limited to string data, hence need to be serialized
can only be read on client-side

Question 20

What is Session storage?

Answer 20

Session storage
stores data only for a session, meaning that the data is stored until the browser (or tab) is closed
data is never transferred to the server
can only be read on client-side
storage limit is about 5-10MB
opening multiple tabs/windows with the same URL creates sessionStorage for each tab/window

Question 21

What are cookies?

Answer 21

Cookie
Stores data that has to be sent back to the server with subsequent XHR requests. Its expiration varies based on the type and the expiration duration can be set from either server-side or client-side .
Cookies are primarily for server-side reading (can also be read on client-side), localStorage and sessionStorage can only be read on client-side.
Size must be less than 4KB.
Cookies can be made secure by setting the httpOnly flag as true for that cookie. This prevents client-side access to that cookie.

Question 22

What is prototypal inheritance?

Answer 22

Prototypal inheritance is a feature in javascript used to add methods and properties in objects. This way we can create a new object using another and inherit its methods

Question 23

What is the DOM?

Answer 23

Document Object Model is basically what allows us to manipulate pages, it represents all website data as nodes or objects that can be manipulated.

Question 24

How to copy an Array?

Answer 24

we can just spread it in a new variable, we can slice it with no parameters, or concat with no parameters

we can also parse a stringified array

Question 25

What is React?

Answer 25

React is a javascript library with features such as creating components, writing declarative code, integrated hooks API, allows every component to have its own state, and allows plug and play use of plugins for additional features such as react router or redux

Question 26

What is the difference between store and reducer

Answer 26

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

Question 27

How do you send data up from child to parent component

Answer 27

We would need to pass a function from parent as prop to child so we can call it in child with the data, and then in parent handle it however we want

Question 27

How do you send data up from child to parent component

Answer 27

We would need to pass a function from parent as prop to child so we can call it in child with the data, and then in parent handle it however we want