Fullstack questions - React, Node, Html, Css, Javascript, Etc

Node- What is the difference between setImmediate() and setTimeout()

- setImmediate: is meant to execute a single script once the current event loop is completed - setTimeout: is used to hold a script and schedule it to be run after a certain time threshold is over

React- List some of the cases when you should use Refs

- when you need to manage focus, select text or media playback - trigger imperative animation - intergrage a third-party dom library

React- What happens during the lifecycle of a React component?

Initialization State/Property Updates Destruction

Node - What is the meaning of a test pyramid?

Is used to denote the number of test cases executed in total

Node - What is express

Is widely used framework built using node.js Express uses a management point that controls the flow of data between servers and server-side application Being lightweight and flexible, express.js prives users with a lot of features used to design mobile application

Node - What is REPL(Real-Eval-Print-Loop)

It allows users to test javascript code in node.js Used 'node' to launch it

React - concept- What does it mean for a component to be mounted in React?

It has a corresponding element created in the DOM and is connected to that.

REACT - What are the 5 features of React?

JSX Components VirtualDOM One-way data-binding High Performance

css- padding

used to create extra space with inside and element

css- border

wraps a border around ur element

Node - What are the different API functions supported by node.js?

- Synchronous APIS: used for blocking features - Asynchronous APIS: used for non-blocking functions

REACT - explain: JSX? 5 features 1 /5

syntax extension to javascript. by using html we can write html structure in the same file that contains code

React - What are synthetic events in React?

- Synthetic events are the objects which act as a cross-browser wrapper around the browser's native event. - They combine the behavior of different browsers into one API. This is done to make sure that the events show consistent properties across different browsers.

Node - What does runtime environment mean?

- The act as small operating system - An environment where ur code runs

React - What is state in React?

- The state of a component is an object that is normally stored in the component that made the state - holds information that may change over the lifetime of the component.

Css-grid - grid-template-areas

create names for grid areas that grid item can place themselves in.

CSS - flexbox - flex-container- align-items

determines how elements are positioned along the cross-axis (the one not selected by flex-directions). possibles values are flex-start, flex-end, center, baseline, and stretch

CSS - flexbox - flex-container-justify-content

determines how elements are positioned along the main-axis with possible values of flex-start, flex-end, center, space-around, space-between, and space-evenly

Css-grid - align-items

determines how grid item are aligned in the columns(called the block-axis). possible values include start,end, center, and stretch

Css-grid - justify-items

determines how grid item are aligned in the columns(called the block-axis). possible values include start,end, center, and stretch

CSS - flexbox - flex-container-align-content

determines how lines are positioned along the cross-axis when flex items are wrapping on multiple lines. possible values are flex-start, flex-end, center, space-around, space-between and stretch

CSS - flexbox - flex-container- flex-wrap

determines if flex items can wrap to new lines with possible values of wrap and nowrap. wrap-reverse can also be used to wrap flex items with the lines in reverse order

Node - What is Callback?

- A callback is an asynchronous equivalent for a function. - JavaScript uses callback functions to handle asynchronous actions. - A callback is called at the completion of a given task The problem with callbacks is that they encourage complexly nested code which quickly becomes difficult to read, debug, and scale.. - A callback is a function that is passed to another function. When the first function is done, it will run the second function.

React - Functional Components vs. Class Components in React

- A function component - is just plain javascript function that returns JSX - A class component- is a javascript class that extends React.Component what has a render method

Node - What is the use of middleware in node.js?

- A middleware can handle incoming request and responses - Execution of code - Updation of request and response object - Completion of request-response iteration - Calling the next middleware

Node - What is the difference between Ajax and node.js?

- Ajax is client side programming, executes in the browser - Node server-side scripting executes on the server

Node - What are event emitters?

- An eventemitter will listen for a named event, when that event is emitted() - It will fire a callback and return the value in the event EX: - Your event emitter sends out a certain event to any method that is waiting to react to it. Just like in a radio stations broadcast, nobody has to be listening in order to actually broadcast the event, but if there are no listeners then nothing happens.

Things to know of - What is Angular

- Angular is built on TypeScript - Angular is a completely revived component-based framework in which an application is a tree of individual components. Some of the major difference in tabular form

Node - Difference between async and non-blocking?

- Asynchronous does not respond immediately with data, While Nonblocking responds immediately if the data is available and if not that simply returns an error.

Node - Explain Blocking functions and non-blocking functions?

- Blocking functions In a blocking operation, all other code is blocked from executing until an I/O event that is being waited on occurs. Blocking functions execute - synchronously. - Non-blocking functions In a non-blocking operation, multiple I/O calls can be performed without the execution of the program being halted. Non-blocking functions execute asynchronous

Node - What is callback hell in Node.js?

- Callback hell is when you to execute multiple asynchronous operations one after the other

Node - Explain usage of NODE_ENV

- Node_Env basically keeps track of the environment value and can do stuff based on the value - If node_env === development ur code is still under production and will do whatever is in that code when project runs

Node - What is the difference between synchronous and asynchronous functions?

- Synchronous- they are instantaneous in providing a response to the data movement in the server and keep up with the data as per the requirement - Asynchronous function - works on the basis of not benign synchronous Will not wait for a response to begin Will be processed in a different thread while the synchronous application goes onwards

Project Concepts - Backend - taken from social media app Let's say you were have a User schema model that has a username, password, email associated with it, how would you make a request that registers a user into your database ? - you're using MONGO DB and Routers, - the router path in this file is app.use(/api/auth) - You have a const User set equal to the require the user schema model("../models/User")

- First I would make a post request and set it the a specific /register, with req, res in its parameters router.post("/register", (req, res) => {}) ----------------------- Make it async router.post("/register", async (req, res) => {}) ----------------------- Make a const newUser set it equal to new User schema const newUser = new User({}) ----------------------- Inside the new User we store username, email, password with what's in the req.body of that in the data trying to be created const newUser = new User({username: req.body.usernameemail: req.body.emailpassword: req.body.password}) ----------------------- Then since were using async await we should have a try and catch block to catch and errors In the try block we will save our new user in another const and await it to be filled, once that is done we send a success status of 200 and you can send over the user using in a json form using .json try{ const user = await newUser.save() res.status(200).json(user) } catch(err){ console.log(error )}

Node - What is a blocking code?

- If an application has to wait for some I/O operation in order to complete its execution any further then the code responsible for waiting is known as blocking code.

Node - How to create a simple server in node.js that returns hello world?

- Make a directory - mkdr myApp -Go into myapp - cd my app - Install package.json to store my files - npm init -y (say yes to all the entries) - Install express - npm install express -Require express in ur file - var express = require('express') - Set a variable to equal express - var app = express() - Create a get function that will respond with an hello world to our server - app.get('/', function (req, res) { res.send('Hello World!'); }); - Make the app listen on a port and console that it is listening on that port app.listen(3000, function () { console.log('Example app listening on port 3000!'); }); - Run it using- node app.js

Node- What are the security implementations that are present in in node js

- Node js has error handling protocols And authentication pipelines

Node - How does node process your code?

- Node js runs in single process and the application all runs in a single thread - All the user's request to the web application will be handled by a single thread depending on the input and output some of the request may happen asynchronously, - So the single thread doesn't have to wait for the request to be finished to move along with the rest of the code it can process that specific code that needs a longer time to compute separately

Node - What are Promises

- Promises can be in one of three states: pending, resolved, or rejected. - A promise is settled if it is either resolved or rejected. - We construct a promise by using the new keyword and passing an executor function to the Promise constructor method. - setTimeout() is a function which delays the execution of a callback function using the event-loop. We use .then() with a success handler callback containing the logic for what should happen if a promise resolves. - We use .catch() with a failure handler callback containing the logic for what should happen if a promise rejects. - Promise composition enables us to write complex, asynchronous code that's still readable. We do this by chaining multiple .then()'s and .catch()'s. To use promise composition correctly, we have to remember to return promises constructed within a .then().

Node - Event Loop Visualisation?

- Stack: This is where all your javascript code gets pushed and executed one by one as the interpreter reads your program, and gets popped out once the execution is done. - If your statement is asynchronous: setTimeout, ajax(), promise, or click event, then that code gets forwarded to Event table, this table is responsible for moving your asynchronous code to callback/event queue after specified time. Heap: This is where all the memory allocation happens for your variables, that you have defined in your program. - Callback Queue: This is where your asynchronous code gets pushed to, and waits for the execution. Event Loop: Then comes the Event Loop, which keeps running continuously and checks the Main stack, if it has any frames to execute, if not then it checks Callback queue, if Callback queue has codes to execute then it pops the message from it to the Main Stack for the execution. - Job Queue: Apart from Callback Queue, browsers have introduced one more queue which is "Job Queue", reserved only for new Promise() functionality. So when you use promises in your code, you add .then() method, which is a callback method. These `thenable` methods are added to Job Queue once the promise has returned/resolved, and then gets executed. ** Job Queue: has high priority in executing callbacks, if an event loop tick comes to Job Queue, it will execute all the jobs in the job queue first until it gets empty, then will move to the callback queue.

Node - alternative to using callbacks?

- Using Promises - Using Async-Await

Node - How to chain multiple?

- We should chain multiple promises rather than nesting them. To take advantage of concurrency, we can use Promise.all(). Promise.all() takes in an array of promises.

Node - What is an event

- Whenever there are actions performed in React, such as hovering of the mouse or pressing a key on the keyboard, these actions trigger events - Events then perform set activities as a response to these triggers - Handling an event in react is very similar to the dom architecture

Node- What is the difference between process.nextTick() and setImmediate()

- process.nextTick() defers the execution of an action till the next pass around the event loop or it simply calls the callback function once the ongoing execution of the event loop is finished - whereas setImmediate() executes a callback on the next cycle of the event loop and it gives back to the event loop for executing any I/O operations.

Node - What are global object?

-Object with a scope that is accessible across all of the modules of the node application -Helps with redundancy

Node -What does runTime environment mean in node js?

-Runtime environment is basically where your application is running in - It is used to describe the software and hardware ur using When someone ask about runtime environment ? they can ask a bout How much ram is being used What version of node What operation system How much cpu cores

React - What is the difference between state and props?

-The state is a data structure that starts with a default value when a Component mounts. It may be mutated across time, mostly as a result of user events. - Props (short for properties) are a Component's configuration. They are received from above and immutable as far as the Component receiving them is concerned. A Component cannot change its props, but it is responsible for putting together the props of its child Components. Props do not have to just be data - callback functions may be passed in as props.

React- concept- How do we pass a property from a parent component props to a child component?

<ChildComponent someProp={props.someProperty} />

Node - What is api?

A software middle man that allows two application to talk to a server

Node - What are .on () event emitter

Allows one or more functions to be attached to named events emitted by the objects

Node - Async-Await

Async/Await is used to work with promises in asynchronous functions. It is basically syntactic sugar for promises. It is just a wrapper to restyle code and make promises easier to read and use. It makes asynchronous code look more like synchronous/procedural code, which is easier to understand. await can only be used in async functions. It is used for calling an async function and waits for it to resolve or reject We can write multiple await statements to produce code that reads like synchronous code. Error Handling: We use try...catch statements within our async functions for error handling.

Node Some popular libraries you should know of:

Async: Async is a utility module which provides straight-forward, powerful functions for working with asynchronous JavaScript. Express: Express is a fast, un-opinionated, minimalist web framework. It provides small, robust tooling for HTTP servers, making it a great solution for single page applications, web sites, hybrids, or public HTTP APIs. Lodash: The lodash library exported as a node module. Lodash is a modern JavaScript utility library delivering modularity, performance, & extras. Mongoose: It is a MongoDB object modeling tool designed to work in an asynchronous environment. MongoDB: The official MongoDB driver for Node.js. It provides a high-level API on top of mongodb-core that is meant for end users. Npm: is package manager for javascript. Nodemon: It is a simple monitor script for use during development of a node.js app, It will watch the files in the directory in which nodemon was started, and if any files change, nodemon will automatically restart your node application. Validator: A nodejs module for a library of string validators and sanitizers.

Node- How can import external libraries into node.js

By requiring it

Node- What is Aot

Compiles your code before time

Node- Where is package.json used in node.js

Contains metadata about all items in project Can be used as a project identifier

CSS - flexbox - flex-items- flex-shrink

Determines if a flex item is able to shrink in the case that the flex items are too large for the container. Flex items with a value of 0 will not shrink. Otherwise they will all shrink proportionally based on their values, similar to flex grow. The higher the value, the more the flex item will potentially shrink.

CSS - flexbox - flex-items- order

Determines if a flex item is able to shrink in the case that the flex items are too large for the container. Flex items with a value of 0 will not shrink. Otherwise they will all shrink proportionally based on their values, similar to flex grow. The higher the value, the more the flex item will potentially shrink.

Node- What is a framework that is used majorily in node.js?

Express.js - its good for scalability and flexibility

Node- What does a basic crude app do?

GET − Provides read-only access to a resource. PUT − Updates an existing resource or creates a new resource. DELETE − Removes a resource. POST − Creates a new resource. PATCH− Update/modify a resource

Project - concept - backend How would u implement login gimme an example in ur routers

I would make a post request /login In my try block I would make user and wait for it to find one user from my req.body with the email given in my database If no user exists with the email provided return user not found I would do the same with password compare req.body.password with the user.password that's associated with the email If passwords don't match return 400 wrong password If all correct I would send 200 with the user json

What are microservices

Microservices separate the app into smaller services and enable improved independence of your application. Makes code easier to test, scale, and maintain

Node - How does node.js work?

Node is completely event-driven. Basically the server consists of one thread processing on event after another When a new request occurs the server starts processing it, and when there is a blocking io operation, it does not wait until it is completed and instead registers a callback function. The server then moves on to the next request while the callback is still processing, therefore causing no delay in the server

Css- margin

a property used to create extra space around an element.

Node- Techniques for avoiding callback hell

Split functions into smaller functions by:

CSS- Position - Static, fixed , relative, sticky, absolute,

Static - : The default value, the element follows the flow of the document. fixed - The element is positioned relative to the viewport and removed from the normal flow of the document. The top, left , right relative - the element is positioned in the same place as it would be with static, however, it can be repositioned with top, left, right and bottom relative to its natural position on the document sticky- the element will act similar to relative positioned element, but once it scrolls off screen it will stay fixed to the screen, essentially acting as position: fixed. this is particularly useful for menu bars that need to "stick" to the top of the screen as the user scrolls absolute- by default, this will act the same as fixed, accept the element will be positioned relative to the document instead of the viewport. this meant that, as the page is scrolled, it will move with the page rather than stay at the same view port location, however, if any element above it in the DOM, oftentimes referred to be as an ancestor, has a position value other than static, then it will be positioned relative to that nearest positioned ancestor

Node - What are the data types in Node.js?

String Number Boolean Undefined Null RegExp ** bugger Node.ks includes an additional data type called Buffer

Things to know of - What is TypeScript?

TypeScript is a superset of javasrcipt - TypeScript code needs to be compiled while javascript doesnt - adds optional types, classes, async/await, and many other features, and compiles to plain JavaScript. -Superset means a set which includes another set. JavaScript being a dynamically typed language does not include any datatypes, which means no compile time errors. - We always get errors in JavaScript in the form of cannot read property x of undefined. Typescript solves this issue. It adds type-checking to your JavaScript code. - Typescript is a superset in the sense that you can completely write valid JavaScript without using any extra features Typescript offers. - The maingoal of Typescript is to provide static type-checking to your JavaScript code and gives extra features that the current JavaScript standard doesn't provide.

Things to know of - What is Vue.Js

Vue.js is a framework for javascript used to build web interfaces similar to react

css- grid- place-items

a shorthand for both align-items and justify-items. if one value is given, it will apply to both. if two values are given they will apply to align-items and justify- items respectivly

CSS - flexbox - flex-container-flex-flow

a shorthand for flex-direction and flex-wrap

CSS - flexbox - flex-items- flex

a shorthand property for flex-grow, flex-shrink, and flex-basis in that order

Node - what is JIT

compiles your app in the browser at runtime.

React-Redux - How are Action and Actions creators defined in Redux? Count increment

const INCREMENT = "INCREMENT" const increment = () => { return { type: INCREMENT } }

CSS - flexbox - flex-items- flex-grow

determines if the flex item is able to grow into extra space.if the value is 0, the flex item will not grow. otherwise, it will take up as much extra space as possible , with larger grow value taking more space proportionally. for example, if item a has a value of 1 and item b has value of 2, then item b will take up twice as much extra space as item A(note this does not mean it will be twice as large, only that it will take twice as much of the extra space).

CSS - flexbox - flex-container-gap

determines the amount of space between flex items. this can take on or two length values. if it is given two, they will be treated as a row gap and a column gap respectively. alternatively, a row-gap and column- gap property can be specified to individually set the gap between rows and columns

CSS - flexbox - flex-container- gap

determines the amount of space between flex items. this can take on or two length values. if it is given two, they will be treated as a row gap and a column gap respectively. alternatively, a row-gap and colun- gap property can be specfied to individually set the gap between rows and columns

css- grid- gap

determines the amount of space between grid items.

Css-grid - grid-template-columns

determines the number of columns and their sizes the unit fr can be used as a fraction unit here to create a responsive design

Css-grid - grid-template-rows

determines the number of rows and their sizes. the unit fr can be used as a fractional unit here to create a responsive design .

CSS - flexbox - flex-container- flex-direction

determines which direction is the main-axis, either row or column. additionally, row-reverse and column reverse can be used to reverse the order of flex items

Node - Give me an example of a Promise?

function addAll(){ addString('', 'A').then(result => addString(result, 'B')).then(result => addString(result, 'C')).then(result => {console.log(result) // Prints out " A B C"})}addAll()

Node - Give me an example of callBacks fucntion ?

function greeting(name) { 5- now we're here name is whatever alert('Hello ' + name); } 2- greeting needs a value or else it will return null function processUserInput(callback) { 3- var name changes to prompt var name = prompt('Please enter your name.'); 4- pass in name to greeting(name) callback(name); } 1- we call processUserInput and pass in anther functuon as argument processUserInput(greeting);

Otcher css-grip properties grid-column-start grid-column-end grid-column grid-row-start grid-row-end grid-row gird- area align-self justify-self place -self

grid-column-start - determines what column this item starts on, based on a line number. grid-column-end - determines what column this item ends on, based on a line number. grid-column- a shorthand for both grid-column-start and grid column end grid-row-start- determines what row this item starts on, based on a line number. grid-row-end- determines what row this item ends on, based on a line number. grid-row- a shorthand for both grid-row-start and grid-row-end specified in the format start / end grid-area - places the item in a grid-area based on a name created in grid-template-area align-self: overries the align-items value used for the grid container justify-self- overrides the justify-items value used for the grid container place-self - a shorthand for both align-self and justify-self in the same format as the place-items

CSS - flexbox - flex-items- align-self

overrides the align-items value used for flex container

library - What does bcrypt do?

provides password secuirty by taking the password and return hashed. version of the password - its async function

CSS - flexbox - flex-items- flex-basis

sets the inital size of the flex item along the main-axis(essentially this will act as width for the row axis and height for the column axis )

Css- z- index

z-index values are used to determine the layering of elements with the same stacking context parent

React - What's the difference between a Controlled component and an Uncontrolled one in React?

- A Controlled Component is one that takes its current value through props and notifies changes through callbacks like onChange. A parent component "controls" it by handling the callback and managing its own state and passing the new values as props to the controlled component. You could also call this a "dumb component". - A Uncontrolled Component is one that stores its own state internally, and you query the DOM using a ref to find its current value when you need it. This is a bit more like traditional HTML.

Node - What is module.exports?

- A module can store and realvice code in a snipped - You can move function from one file to another

React - Redux - What is the significance of Store in Redux?

- A store is a JavaScript object which can hold the application's state and provide a few helper methods to access the state, dispatch actions and register listeners. - The entire state/ object tree of an application is saved in a single store. - As a result of this, Redux is very simple and predictable. - We can pass middleware to the store to handle the processing of data as well as to keep a log of various actions that change theterm-50 state of stores. - All the actions return a new state via reducers.

REACT - What is an event in React?

- An event is an action that user or system may trigger, such as pressing a key, a mouse click - React events are named using camelCase, rather than lowercase in HTML. - With JSX, you pass a function as the event handler, rather than a string in HTML EX- <Button onPress={lightItUp} />

Node - What is Node js ?

- C++ - Node.js is an open-source server side runtime environment built on Chrome's V8 JavaScript engine. Single threaded - It provides an event driven, non-blocking (asynchronous) I/O and cross-platform runtime environment for building highly scalable server-side applications using JavaScript. - Javascript as the primary scripting languag

React - What are children prop?

- Children props are used to pass component to other components as properties. You can access it by using {props.children}

React- What can you do with Higher Order Components?

- Code reuse, logic and bootstrap abstraction - Render High jacking - State abstraction and manipulation - Props manipulation

React - "In React, everything is a component." Explain.

- Components are the building blocks of a react application - the components split up the entire ui into small independant resuable pieces - it renders each component independently without affecting other components

React- What is Context?

- Context provides a way to pass data through the component tree without having to pass props down manually at every level. - Context is designed to share data that can be considered "global" for a tree of React components, -Using context, we can avoid passing props through intermediate elements.

React - What is Flow?

- Flow is a static type checker, designed to find type errors in JavaScript programs, created by Facebook. Flow types can express much more fine-grained distinctions than traditional type systems. For example, Flow helps you catch errors involving null, unlike most type systems. - helps catch errors

React-Flux - Explain Flux.

- Flux is an architectural pattern which enforces the uni-directional data flow. - It controls derived data and enables communication between multiple components using a central Store which has authority for all data. Any update in data throughout the application must occur here only. - Flux provides stability to the application and reduces run-time errors.

React - Why fragments are better than container divs?

- Fragments are a bit faster and use less memory by not creating an extra DOM node. This only has a real benefit on very large and deep trees. - Some CSS mechanisms like Flexbox and CSS Grid have a special parent-child relationships, and adding divs in the middle makes it hard to keep the desired layout. - The DOM Inspector is less cluttered.

Node - When would you not use node .js?

- If u were to make a lot of cpu intensive calls - HEAVY COMPUTATIONAL APPS THAT DO REQUIRE HEAVY COMPUTER POWER

React - why should we not update the state directly?

- If you set update the state directly the component wont rerender - Need to use SetState method in class Components or use useState in function components

React-concept Why would you need to bind event handlers to this?

- In JavaScript, class methods are not bound by default. If you forget to bind this.someEventHandler and pass it to onChange, this will be undefined when the function is actually called.

Node - What is v8 engine used for ?

- It has interpreters and compilers - To parse and run your javascript code - C++

React - what are react Fragements

- It's a common pattern in React which is used for a component to return multiple elements. - Fragments let you group a list of children without adding extra nodes to the DOM. - u can use <React.Fragments> or you can use child A B C

React - What are Higher Order Components(HOC)?

- Its basically a component or a function with another component or function inside of it being called - its a great way to reuse components or functions -Code reuse, logic and bootstrap abstraction - Render High jacking - State abstraction and manipulation Props manipulation

Node - Why is node js helpful?

- Its main reason: it is highly scalable and easy to maintain code - NPM(node package manager) provides access to hundreds of reusable packages

Node - What is the difference between node.js and javascript?

- Javascript: is a programming language Usage: for general client-side operations Engine: v8, spider monkey, and js core -Node is an interpreter- scripting Usage: non-blocking activities Engine: v8 google chrome

Node - Why is node.js single threaded?

- Node.js works on a single thread model to ensure there is support for asynchronous processing - Makes it more scalable and efficient for application to provide high performance and efficiency under high amounts of load

React-redux - What are the advantages of Redux? 7 yuprs

- Predictability of outcome - Since there is always one source of truth, i.e. the store, there is no confusion about how to sync the current state with actions and other parts of the application. - Maintainability - The code becomes easier to maintain with a predictable outcome and strict structure. - Server-side rendering - You just need to pass the store created on the server, to the client side. This is very useful for initial render and provides a better user experience as it optimizes the application performance. - Developer tools - From actions to state changes, developers can track everything going on in the application in real time. - Community and ecosystem - Redux has a huge community behind it which makes it even more captivating to use. A large community of talented individuals contribute to the betterment of the library and develop various applications with it. - Ease of testing - Redux's code is mostly functions which are small, pure and isolated. This makes the code testable and independent. - Organization - Redux is precise about how code should be organized, this makes the code more consistent and easier when a team works with it.

React- What are props in React?

- Props are inputs to components - they are single values or object that contain a set of values that are passed to components - They are data passed down from a parent component to a child component

React - What are Pure Components? React.PureComponent

- Pure components which do not re-renders when the value of state and props has been updated with the same values. If the value of the previous state or props and the new state or props is the same, the component is not re-rendered.

React- What is React Router?

- React Router is a powerful routing library built on top of React, which helps in adding new screens and flows to the application. -This keeps the URL in sync with data that's being displayed on the web page. - It maintains a standardized structure and behavior and is used for developing single page web applications. React Router has a simple API.

REACT - What is React.js

- React is a javascript library that makes building userInterfaces easy. - it follows a component based approach and helps in building by using reusable components - used to develop complex and interactive web and mobile Ui - It was developed by Facebook

REACT - What are the limitations of React?

- React is just a library, not a full-blown framework - Its library is very large and takes time to understand - It can be little difficult for the novice programmers to understand - Coding gets complex as it uses inline templating and JSX

React- State the difference between React JS and React Native

- React js is a front end open-source JavaScript library used for building UIs. -React Native, is an open-source, mobile framework which allows developers to user React on platforms like Android and iOS.

React - Redux - Explain the role of reducer

- Reducers are pure functions which specify how the application's state changes in response to an ACTION. - Reducers work by taking in the previous state and action, and then it returns a new state. - It determines what sort of update needs to be done based on the type of the action, and then returns new values. - it returns the previous state as it is, if no work needs to be done.

What do you understand by refs in React?

- Refs it the short hand for References in React. - It is an attribute which helps to store a reference to a particular React element or component, which will be returned by the components render configuration function. - it is used to return references to a particular element or component returned by render(). - They come in handy when we need DOM measurements or to add methods to the components.

Node - What is the difference between scripting and compiler

- Scripting languages are interpreted and executed line by line when a script is run, - while compiled languages need to be converted into executable code.

React-Redux- what are the 3 principlaes of redux

- Single source of truth: The state of the entire application is stored in an object/ state tree within a single store. The single state tree makes it easier to keep track of changes over time and debug or inspect the application. - State is read-only: The only way to change the state is to trigger an action. - Changes are made with pure functions: In order to specify how the state tree is transformed by actions, you need pure functions. Pure functions are those whose return value depends solely on the values of their arguments.

React- concept What happens when you call setState?

- The state property is updated in a React component with the object passed into setState, and this is done asynchronously. It tells React that this component and its children need to be re-rendered, but React may not do this immediately (it may batch these state update requests for better performa

React- How do you modularize code in React?

- We can modularize code by using the export and import properties. - They help in writing the components separately in different files.

Other - What is the use of Webpack?

- Webpack in basically is a module builder. It is mainly runs during the development process.

React - What is reconciliation?

- When a component's props or state change, React decides whether an actual DOM update is necessary by comparing the newly returned element with the previously rendered one. - When they are not equal, React will update the DOM. This process is called reconciliation.

Redux - How to make AJAX request in Redux?

- You can use redux-thunk middleware which allows you to define async actions. -

React - What is an event in React? Give an example

- an Events are triggered reaction to a specfic action like a mouser hover, or click - you have a class component lets call it display - inside display in the below the render method you have a div - that dive says clickme! - when clicking the dive it will trigger and event thats tied to that onClick handler - now this event is triggered and will do whatever it does

Node - What is single threaded?

- computing the execution of an entire task from beginning to end without interruption.

REACT - How can you embed two or more components into one?

- first make ur class component EX: my component - render and return - in the return you call onto the child component - now in one component both components render

React - How are forms created in React?

- in react the state is contained in the state property of the component is only updated via setState - in ur on form u need to set an handleSubmit - this will handle everything once submitted

React-Redux - What is Redux? how is it differnet from flux

- its a state container and manages the entire application state - applications developed with Redux are easy to test and can run in different environments showing consistent behavior. - has one store

React-testing - What are the advantages of Jest over Jasmine?

-Automatically finds tests to execute in your source code. Automatically mocks dependencies when running your tests. -Allows you to test asynchronous code synchronously. -Runs your tests with a fake DOM implementation (via jsdom) so that your tests can be run on the command line. -Runs tests in parallel processes so that they finish sooner.

Redux - What is Redux Thunk?

-Redux Thunk middleware allows you to write action creators that return a function instead of an action. -The thunk can be used to delay the dispatch of an action, or to dispatch only if a certain condition is met. -The inner function receives the store methods dispatch() and getState() as parameters.

React-testing Give a simple example of Jest test case

0- install jest to run test do npm test 1- write a function in sum.js const sum = (a, b) => a + b export default sum 2- create a file name sum.test.js, containts the test import sum from './sum' test('adds 1 + 2 to equal 3', () => { expect(sum(1, 2)).toBe(3) }) -

React - Explain the lifecycle methods of React components in detail.

1 - componentWillMount() - executed just before rendering takes place both on the client as well as server-side 2- componentDidMount() - Executed on the client side only after the first render 3- componentWillReceiveProps() - Invoked as soon as the props are received from the parent class and before another render is called. 4- shouldComponentUpdate() - Returns true or false value based on certain conditions. If you want your component to update, return true else return false. By default, it returns false. 5- componentWillUpdate() - Called just before rendering takes place in the DOM. 6- componentDidUpdate() - Called immediately after rendering takes place. 7-ComponentWillUnmount() - Called after the component is unmounted from the DOM. It is used to clear up the memory spaces.

React - What are the different phases of React component's lifecycle?

1- Initial Rendering Phase - This is when the component makes it was to DOM 2- Updating Phase - one the component gets added to the dom, it can potentially update and re-render only when a prop or state change occus 3- Unmounting Phase - this is the final phase of a component life cycle in which the component is destroyed and removed from the DOM

React-Redux - How does Data flow through Redux

1- in ur appliacation you click on something that renders an action 2- ACTION - this click triggers the action to be called and pass it to the reducer 3- the reducer takes that action does someting to state and send its to the store 4- the store is passed into the provider component which is wrapped around your application and alters the state 5- this cause a rerender when the store changes and display ur data

React - How is React different from Angular?

1. ARCHITECTURE React - Only the View Of MVC Angular - Complete MVC 2- RENDERING React - Server-side rendering Angular - client-side rendering 3- DOM React - Uses virtual DOM Angular - Uses actualDOM 4- DATA BINDING React - One-way data binding Angular - Two-way data binding 5- DEBUGGING React - Compile time debugging Angular - Runtime debugging 6- CREATORS React - FACEBOOK Angular - GOOGLe

React-concept - How would you write an inline style in React?

<div style={{ height: 10 }}>

React-redux what is dispatcher?

A dispatcher is a central hub of app where you will receive actions and broadcast payload to registered callbacks.

React - What is Babel in React js?

Babel, is a JavaScript compiler that converts latest JavaScript like ES6, ES7 into plain old ES5 JavaScript that most browsers understand.

React - Why is switch keyword used in React Router v4?

Basically using switch will only display a single route at a time

Redux - What are the differences between redux-saga and redux-thunk?

Both Redux Thunk and Redux Saga take care of dealing with side effects. In most of the scenarios, - Thunk uses Promises to deal with them, - Thunk is simple to use and Promises are familiar to many developers, - whereas Saga uses Generators. Sagas/Generators are more powerful but you will need to learn them. - But both middleware can coexist, so you can start with Thunks and introduce Sagas when/if you need them

React-concept What is the difference between Component and Container in Redux?

Component is part of the React API. A Component is a class or function that describes part of a React UI. Container is an informal term for a React component that is connected to a redux store. Containers receive Redux state updates and dispatch actions, and they usually don't render DOM elements; they delegate rendering to presentational child components.

React - What do you know about controlled and uncontrolled components?

Controlled Components - the do not maintain their own state - Data is controlled by the parent component - they take in values through props, notify the change via a callback Uncontrolled - They maintain their own. State - Data is controlled by the DOM - refs are used to get their current values

React- What were the major problems with MVC framework?

DOM manipulation was very expensive Applications were slow and inefficient There was huge memory wastage Because of circular dependencies, a complicated model was created around models and views

React - Functional Components vs. Class Components in React - Passing Props

Function Component - Inside a function component you can pass in props as an argument of the function - you can destructor it when passing it in ex: const FunctionalComponent = ({ name }) => { return <h1>Hello, {name}</h1>; }; - you can also pass it without destructuring by sending the whole prop in itself ex: c const FunctionalComponent = (props) => { return <h1>Hello, {props.name}</h1>; }; Class Component - In class components you need to use this when referring to props you can destructure it ex: class ClassComponent extends React.Component { render() { const { name } = this.props return <h1>Hello, { name }</h1>; } }

React - Functional Components vs. Class Components in React - Handling state

Functional Components - React Hook useState was introduced to allow developers to write stateful functional components example: const [count, setCount] = React.useState(0); Class Component - you need a constructor, pass it in the props - you need a super , pass it in props - you have to set the initial stay with this.state - to access it the you need to use this.state.whateverthenameofthestateis - This.setState to update the state

React - why do u need a react router

IT helps you with showing data that you only want to show while hiding other

React - What are stateful components?

If the behaviour of a component is dependent on the state of the component then it can be termed as stateful component. These Stateful components are always class components and have a state that gets initialized in the constructor.

REACT - How is Jsx and Html different

In JSX, it is possible to write JavaScript directly. You can do this by putting the JavaScript in curly braces {...}. Whereas in HTML, you need a script tag or an external JavaScript file to implement JavaScript:

React-testing What is Jest?

Jest is a JavaScript unit testing framework created by Facebook based on Jasmine and provides automated mock creation and a jsdom environment. It's often used for testing components

React - What is the significance of keys in React?

Keys are used to help identify elements and make them unique by giving them an id - key just reorders the elments instead of re-rendering htem - increases application performance

Node - What are lazy loading and eager loading

Lazy loading- wait to load data Eager loading - loads data right away

React- What is MVC what does it stand for ?

MVC is a software architectural pattern that divide an application into three major components MVC Model View Controller Steps! 1 -model: where we can load the data. 2- From there, it updates the view to reflect that data, what we also call a state. 3- The users visualize that, acts on the page, which in turn calls the controller. 4- Then updates the model, which triggers an update in the view - the main purpose is organize the data and its interactions - this is brought back by redux

REACT - When was React first released?

March 2013

React- Can you update props in react?

NO props are read only they cannot be updated you can modify them if ur in the parent component but not childnen

Node - Where is node.js used?

Network application Distributed computing Responsive web apps Server-client applications

REACT - Does React use HTML?

No, its uses JSX which is similar to html

Node - What is the difference between node.js and angular?

Node Used in situations where scalability is a requirement Ability to generate queries in a database Provides many frameworks such as express Coded using c++ and javascript Angular Best fit for the development of real-time applications Ability to simplify an application into the mvc architecture Mainly used to develop real time interactive web application Angular is an all-in-one web app framework Coded in typescript

React- Explain Reac hooks

React hooks allows you to use State, and other React features without writing a class.

Explain: Virtual DOM: 5 features 3/5

React keeps a lightweight representation of the real Dom in the memory and that is known as the virtual DOM. When the state of object change the virtual DOM changes only that object in the real DOM, rather than updating all the objects

REACT - Explain: High performance : 5 features 5/5

React updates only those components that have changed, rather than updating all the components at once. This results in much faster web applications.

REACT - Explain One-way data-binding: 5 features 4/5

React's one-way data binding keeps everything modular and fast. A unidirectional data flow means that when designing a React app, you often nest child components within parent components.

React- What is the differnece between react js and react native

ReactJS is a JavaScript library, supporting both front end web and being run on the server, for building user interfaces and web applications. React Native is a mobile framework that compiles to native app components, allowing you to build native mobile applications (iOS, Android, and Windows) in JavaScript that allows you to use ReactJS to build your components, and implements ReactJS under the hood.

REACT - State the difference between Real DOM and Virtual DOM

Real DOM - It is updated slowly. - It allows a direct update from HTML. - It wastes too much memory. Virtual DOM -It updates faster. - It cannot be used to update HTML directly. - Memory consumption is less

Redux n- Explain to me step by step how you implment to me a counter app using redux

SETTING UP A COUNT REDUX STORE 1 - import the PROVIDER FROM "react - redux" and render it into ur reactDOM import { Provider } from 'react-redux'; 2- import create store from redux import { createStore } from 'redux'; 3- set up ur ACTION const INCREMENT = "INCREMENT" 4 - import {useSelector, useDispatch} from 'react-redux' 5 - set up your action creator const increment = () => { return { type: INCREMENT } } 6 - set up ur reducer export const countReducer = (state = 0, action) =>{ switch (action.type) { case INCREMENT: return state + 1 default: return state } } 7 - initiate ur reducer and and send it to ur store variable const store = createStore(reducer) 8- wrap ur render in a provider and pass store to provder as props ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById('root') ); 9- in ur component create ur state, and ur dispatch let count = useSelector(state => state) let dispatch = useDispatch() 10 - in ur return in ur on click wrap the onclick with ur dispatch and return the increment in it onClick={() => dispatch(increment())}> Increment

React-concept- When is it important to pass props to super(), and why?

The only one reason when one needs to pass props to super() is when you want to access this.props in constructor:

Node - What is Express.js?

Web application framework for Node.js that provides a wide set of features to develop both web and mobile applications.

React- Can you tell me the different types of useEffect cases and what happens when u do it

When you pass an empty array in a useEffect - [] to only run this one time on mount - Running on state change: validating input field adding someething to the empty array [text] - change on every time text is updated - passing in nothing - changes whenever anything is updated

React- What are inline conditional expressions?

You can use either if statements or ternary expressions which are available from JS to conditionally render expressions. Apart from these approaches, you can also embed any expressions in JSX by wrapping them in curly braces and then followed by JS logical operator(&&).

REACT - explain: What are Components ? 5 features 2/5

are the building blocks of any react application, single app contains multiple components, it splits the interface to dependency reusable parts that can be processed separately

React-concept When would you use StrictMode component in React?

if you're on bug hunting mode, sometimes it's a good idea to wrap with <StrictMode /> the components/blocks of code you think might be the source of the problem.

React - How can you re-render a component without using setState() function?

use forceUpdate()

React Hooks: What is useState() in React? Give me an example

useState is one of build-in react hooks. -const [count, setCounter] = useState(0); - useState(0) returns a tuple where the first parameter count is the current state of the counter and setCounter is the method that will allow us to update the counter's state. -We can use the setCounter method to update the state of count anywhere - In this case we are using it inside of the setCount function where we can do more things; the idea with hooks is that we are able to keep our code more functional and avoid class based components if not desired/needed.