Java Springboot Interview preparation

REACT course

 

Destructing the Function Parameters

An object passed to the method can be accessed using dot notation instead you could use de-structuring.

Ex: function addUser({name, age, gender}) {}
addUser({name: 'Daniel', age: 25, gender: Male})

Spread Operator -> To pullout the values from array and add as comma separated array. Spread operator on object pulls out user key values and add it to extendUser.

Ex: const extendUser = {
            isAdmin: true,
            ...user
        };

 const hobbies = ["Sports", "cooking"];

for(const hobby of hobbies) {
    console.log(hobby);
}

Anonymous functions - No names infront of the functions
const timeout = () => {},  
Pass function as a value setTimeout(hadleTimeout, 2000)

Reference vs primitive values
-> always produce new values for primitive type

For arrays like objects mutate original values.

Components
Functions used for reusability
React code is written in a declarative way

Props in react -> data can be passed from outside component tot he inner component using props concept

Can use the function keyword or use the arrow keyword and assign value to the const.
Declarative javascript means building with small number of functions which sequentially passes its output as an input to next function.

Form Inputs
 Change Handlers - shared and individual handlers

Passing data from child to Parent Component
Lifting State Up - 

Derived or computed state

Lists and Conditional Data rendering
map method used to transform the data
 

Fragments, Portals and Refs

JSX translates to create elements. you can wrap in a div and return as one element. 
We can also return array of JSX elements in native javascript. But react needs a key to be added for each element.

In bigger applications you end up with lot of divs. Rendering too many elements make the browser slow.

Creating a wrapper component and return props.children which is not rendered.

React Fragments: Fragment is inbuilt wrapper from React.
React Portals: (helps us to write cleaner code)

React refs: only for reading the value you can replace it with state

Projects

Youtube_Clone:  

npx create-react-app ./ (to create react project in current folder)
mui (material UI), react router, axios (for API calls)

npm install --legacy-peer-deps
shift-option-F

Build applications with multiple components (Prop Drilling) 

Solving the problem for prop drilling using ContextAPI.

React ContextAPI - Sharing data across component layers. Context value can be wrapped around multiple components. Context value can be connected to React state so no use of passing props.

import function from react createContext and store the value of any example CartContext. Can pass any initial value to context. 

Provide the context, consume the context
useContext hook -> used to access the context value.