REACT
What is Props?
"Props" is a special keyword in React, which stands for properties and is being used for passing data from one component to another. But the import part here is that data with props are being passed in a uni-directional flow. (One way from parent to child)
How different is React's ES6 syntax when compared to ES5
- "const" and "let" keywords can be used with respect to immutable and block scripting objects whereas this is not present in ES5 - arrow functions - these can now be used to define functions in ES6, whereas ES5, one must use function and return keywords - Object Manipulation - can be processed more smoothly in ES6 (due to the presence of destructuring, speed operators) than its previous versions. ES5 provides same features but is a bit more time consuming - Performance - ES6 has a higher performance rank than ES5, due to presence of newly implemented features and shorthand storage implementations
What is JavaScript?
- A programming language developed by Sun Microsystems that can be integrated into HTML pages to make them more dynamic - an object-oriented computer programming language commonly used to create interactive effects within web browsers. - a client side programming
Differentiate between Real DOM and Virtual DOM.Real DOM vs Virtual DOM
- A virtual DOM object is a representation of a DOM object, like a lightweight copy - A virtual DOM object has the same properties as a real DOM object, but it lacks the real thing's power to directly change what's on the screen. - Manipulating the virtual DOM is much faster, because nothing gets drawn onscreen
List some of the cases when you should use Refs.
- Cases where we want to change the value of a child component without making use of props - provide good functionality as we can use callback with them - helpful when using third party libraries - helpful in animations, media playback, or text selection
What do you understand from "In React, everything is a component."
- Everything is re-usable and can be used in different parts of the UI. - Components can be used within other components - This saves on code duplication because components are re-usable.
Value vs Reference
- Javascript is always a pass by value, but when a variable refers to an object( array, function, regular object), the "value" is a reference to the object - Changing the value of a variable never changes the underlying primitive or object, it just points the variable to a new primitive or object - however, changing a property of an object referenced by a variable does change the underlying object - values are primitive, while references are non-primitive value
ES6 (Classes)
- New feature in ES6. Allows adding methods to our classes easier and more readable. Can add method definition directly in the class declaration. - constructor function will only be invoked when using the new keyword -
What are the limitations of React
- Poor Documentation - Developers tend to add "NPM" or "YaRN" libraries to achieve outcome (...becomes important to download respective react-included framework) - Has a lot of external libraries - meaning it lacks native libraries - Difficult to setup in existing web apps - JSX may not be web designer-friendly - Native developers still needed - implementing some native features and modules necessitates having detail knowledge of a particular platform - Time Consuming: JS thread takes much more time to initialize - Memory management: can create issues for mobile app dev which needs computation; float computations - Lack of security robustness
How do you modularize code in React?
- React makes the modularization of code through component structure. - Code that is separated into segments (modules), where each file is responsible for a feature or specific functionality
What is a ref in React?
- Refs are a function provided by React to access DOM elements and React elements created in the render method
What is a state in React and how is it used?
- State is a built in object where you store properties of a component. - It is initialized in the constructor of the component. - When state changes, the component re-renders. - State is immutable - When you setState, you create a copy of said object, but change the values of the properties
Differentiate between stateful and stateless components. Stateful vs Stateless Components React
- Stateful Components: Components with State, meaning it is keeping track of the changing data. - Stateless Components (functional components): components without state. Functional components usually prints out what is given to them (data via props) or they render the same thing
How are forms created in React?
- You can add a form with React like any other element. - In React, form data is usually handled by the components. - You can control the submit action by adding an event handler in the onSubmit attribute:
In calling setState, when would you pick one method of calling this function over the other?
- You can use setState(prevState => {something}) when you want to override the current state with the last state's parameters - Otherwide you can call setState({something})
Is setState a synchronous or async call?
- setState calls are mostly asynchronous and can be batched for better UI experience and performance. - setState alters the state and causes rerendering and can be an expensive operation and making it synchronous might leave the browser unresponsive. - setState can be made synchronous by using a callback function
What is an event in React?
A react even is a mouse click or change in a text field which can be called within an element property such as onClick or onChange. To call an event, you must capture it through an event handler function and call that function within the appropriate element property
What is an arrow function in React? How is it used?
Arrow functions are a new feature that was introduced with ES6. It is a new syntax for writing JavaScript functions. These functions utilize a new token, =>, which allows our code to be more concise and simplify function scoping and the "this" keyword. By using arrow functions we can avoid typing the "function" keyword, "return" keyword (it's implicit in arrow functions), and curly brackets. Other features of the arrow functions affects parameters. One parameter does not require parenthesis, while no parameters or 2 or more parameters do.
How can you update the state of a component?
By using this.setState() function
List some of the major advantages of React
Components, One-Way Data Flow, Virtual DOM, Ecosystem
Explain the purpose of render() in React
Each React component must have a render() mandatorily. It returns a single React element which is the representation of the native DOM component. If more than one HTML element needs to be rendered, then they must be grouped together inside one enclosing tag such as <form>, <group>,<div> etc. This function must be kept pure i.e., it must return the same result each time it is invoked. If there are siblings of a HTML element, then <React.Fragment> must be wrapped around.
Why can't browsers read JSX?
JSX is a syntax extension for javascript, which means that JSX is not valid Javascript.
What is JSX
JSX is a syntax extension of regular Javascript and is used to create React elements. Allows us to put HTML in javascript
What are the features of React
JSX: Stands for Javascript Xml. Jsx makes it possible to write logic and markup in one file. Component: ReactJS is made up of multiple component and each component has its own logic or control. They can be reusable. Every component defines a view or part of a view. Virtual DOM: This is a copy of the real DOM. React uses the virutal DOM to optimize DOM update. One-Way Data Binding: In React, data can be passed from parent to child through props. These props cannot be passed back to parent by the child (this process can be done through callback functions). Conditional Statement: In JSX, we can use conditional statement which is very helpful when you want to display data in the browser for certain conditions. Lifecycle Method/Hook: This is very useful in development. Every ReactJs component has its lifecycle. They are methods that execute at a very different stages of execution.
Hoisting
Javascript default behavior of moving declarations to the top. This cannot work for arrow functions
What is React
React is an open source JS library created by an engineer working for Facebook. It is used for building Single Page Application meaning you can traverse the app without reloading the page. It works only in user interfaces in application but can be combined with other libraries and frameworks like Angular
What are synthetic events in React?
Synthetic Events is a cross-browser wrapper around the browser's native event. It has the same interface as the browser's native event, including stopPropagation() and preventDefault(), except the events work identically across all browsers. React implements synthetic events to achieve consistency by normalizing events so that they have the same properties across different browsers and platforms.
What is the virtual DOM
The Virutal DOM(VDOM) is a programming concept where an ideal, or "virtual", representation of a UI is kept in memory and synced with the "real" DOM by a library as ReactDom. This process is called reconciliation. You tell React what state you want the UI to be in, and it makes sure the DOM matches the state.
What are the different phases of React component's life cycle. Explain the lifecycle methods of React components in detail.
There are 4 major phases in the life cycle method. 1) Initialization: where we define defaults and initial values for this.props and this.state. This is done within the constructor of a Component Class. 2)Mounting: Mounting is the stage of rendering the JSX returned by the render method itself.- The render() is the most used life cycle method. This must be pure, which means that it must always remain the same every time the component renders. No set State inside.- componentDidMount() happens as soon as your component is mounted. You may setstate here but be careful. Good place to initiate API calls. Calling setState() here will update state and cause another rendering but will happen before the browser updates the UI. 3) Updating: Updating is the stage when the state of a component is updated and the application is repainted.-The most common use case for the componentDidUpdate() method is updating the DOM in response to prop or state changes.-You can call setState() in this lifecycle, but keep in mind that you will need to wrap it in a condition to check for state or prop changes from previous state. Incorrect usage of setState() can lead to an infinite loop. 4) Unmountaing: Unmounting is the final step of the component lifecycle where the component is removed from the page.-componentWillUnmount() is the lifecycle method just before the component is unmounted and destroyed.-You cannot modify the component state in commponentWillUnmount lifecycle
How can you embed two or more components into one?
You can import multiple components from different files into one component. You can then call on it like a HTML element.
How do you create an event handler in React?
an event handler is a method that is defined on the class of the component. handleEvent = e => { do something (or do something with e) }
Closures
combination of a function bundled together (enclosed) with references to its surrounding state. in other words, a closure give syou access to an outer function's scope from an inner function. closures are created every time a function is created, at function creation time (lexical scoping means that nested functions have access to variables declared in their outer scope) - to create a closure, define a function inside another function and expose it, return it or pass it to another function
scope
local - variable declared within a javascript function becomes LOCAL to the function. they can only be accessed from within the function global - variable declared outside a function becomes GLOBAL, all scripts and functions on a web page can access it
this
this keyword refers to the object it belongs to. it has different values depending on where it is used: - in a method, this refers to the owner object. - alone, this refers to the global object. - in a function, this refers to the global object - in a function, in strict mode, this is undefined - in an event, this refers to the element that received the event - methods like call(), and apply() can refer this to any object