frontend/react interview practice

What is React?

React is an open-source front-end JavaScript library, used for building user interfaces(UIs).

What are the major features of React?

1. It uses VirtualDOM because RealDOM manipulations are expensive.
2. Follows Unidirectional data flow.
3. Uses reusable/composable UI components to develop the view.

What is JSX?

It is a syntax extension of JavaScript that allows you to write JavaScript in HTML

What is Virtual DOM?

The Virtual DOM (VDOM) is an in-memory representation of Real DOM.
(real)DOM => Document Object Model

What are controlled inputs?

inputs whose values are controlled by React, using state for its value and an on-change handler function.

What are uncontrolled inputs?

React inputs that use the default behavior.

What is state in React?

The state is a built-in React object that is used to contain data or information about the component. A component's state can change over time; whenever it changes, the component re-renders.

How to update state from a child component?

You pass a call back function, that updates the parent's state, as props to the child.

How to share state between sibling components?

You put state in the nearest common parent, then pass it in as props.

useEffects

The Effect Hook lets you perform side effects in function components:

Parameters:
- A function
- A dependency array

Returns:
- A clean-up function

when does it run the use effect function:
- Depends on the Dependency array.
[ ] => runs the useEffect function once
[ ] => runs the useEffect function only when a dependency's value
changes
no dependency array => runs the useEffect function every time state or props
change

useState

useState allows us to track state in a function component.

parameters:
- initial value
returns
- an array with state and a set state function

What are components?

Components are self-contained, logical pieces of code that describe a portion of the user interface.

What are props?

Props are a way of passing data into a component (which can then be accessed using variables).

What is conditional rendering?

Conditional rendering in React works the same way conditions work in JavaScript. Use JavaScript operators like if or the conditional operator to create elements representing the current state, and let React update the UI to match them.

how to start a react app

npx create react app

Event

An action or occurrence that happens in the browser

Event handler

A function that is executed in response to an event occurring

Event listener

A mechanism that detects an event and contains an event name and an event handler

Thinking in react

1. First, break your UI into different components.
2. Then, Describe the visual states of each of your components.
3. Finally, connect your components together so that the data flows through them.

what is JavaScript?

JavaScript is a text-based programming language used both on the client-side and server-side that allows you to make web pages interactive.

what is a function in JS?

A function in JavaScript is similar to a procedure—a set of statements that performs a task or calculates a value, but for a procedure to qualify as a function, it should take some input and return an output where there is some obvious relationship between the input and the output

useRouteMatch()

returns path and URL
- path => is for building nested routes
- URL =>is for nested links