React

Why is Switch component used in React Router v4?

The <Switch /> component will only render the first route that matches/includes the path. Once it finds the first route that matches the path, it will not look for any other matches. Not only that, it allows for nested routes to work properly, which is something that <Router /> will not be able to handle.

List some of the major advantages of React.

The React basically allows developers to utilize individual parts of their application on both client-side and the server-side, which ultimately boosts the speed of the development process. Compared to other frontend frameworks, the React code is easier to maintain and is flexible due to its modular structure. This flexibility, in turn, saves huge amount of time and cost to businesses. React JS was designed to provide high performance in mind. The core of the framework offers a virtual DOM program and server-side rendering, which makes complex apps run extremely fast. Deploying React is fairly easy to accomplish if you have some basic knowledge of JavaScript. (this is a filthy lie >:( ) One of the main benefits of using React JS is its potential to reuse components. It saves time for developers as they don't have to write various codes for the same features. Furthermore, if any changes are made in any particular part, it will not affect other parts of the application.

What is a state in React and how is it used?

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

What is the virtual DOM? Explain how it works within ReactJS.

The virtual DOM (VDOM) is a programming concept where a virtual representation of a UI is kept in memory and synced with the "real" DOM by a library such as ReactDOM. This process is called reconciliation. React uses a diffing algorithm to update only the changes it finds. I like to think of it as a virtual machine running behind the browser that executes an application that takes the data of the current state of the web page and calculates the changes between the actions and renders the changes.

List some of the cases when you should use Refs.

There are a few good use cases for refs: Managing focus, text selection, or media playback. Triggering imperative animations. Integrating with third-party DOM libraries.

In package.json, how can you ensure that only patch version updates are accepted when npm install is run? (i.e. upgrading from 2.3.0 to 2.3.1 is okay, but not 2.4.0 or greater)

To ensure that only minor/patch updates are installed when running npm install. You have to change your "version" in package.json to include a caret before the version you want to keep it at. "^2.3.x" This code would ensure that npm install would only update below version 2.4.

How can you update the state of a component?

To update our state, we use this. setState() and pass in an object. This object will get merged with the current state. When the state has been updated, our component re-renders automatically.

How come when you declare a variable in any js or jsx file outside of any class, object, or function, it's not really global to all other files, components?

Usually passing variables to components via props is handled by react. But if you need to pass props down to multiple components, it becomes unmanageable.-Using react's built in API called Context .- Context provides a way to pass data through the component tree without having to pass props down manually at every level - By using the properties of Context (Provider & Consumer) -Provider allows you to declare data need throughout the component tree -Consumer allows any component in the tree to receive it.

How are forms created in React?

We can combine the two by making the React state be the "single source of truth". Then the React component that renders a form also controls what happens in that form on subsequent user input. An input form element whose value is controlled by React in this way is called a "controlled component".

What is NPM/Yarn?

Yarn is a package manager for Node. js that focuses on speed, security, and consistency. It was originally created to address some issues with the popular NPM package manager.

Can different versions of the same package be used in the same application?

Yes, but they have to be installed with Aliases. With npm or yarn, you can install a package under a custom alias. This enables you to install multiple versions of a package in the same project.

Explain the lifecycle methods of React components in detail.

componentWillMount executes before rendering on the server and client-side -componentDidMount is where AJAX requests and state updates should occur. -shouldComponentUpate is called when props are updated before another render -componentWillUpdate is called before rendering -componentWillUnmount is called after the component is unmounted from the DOM

"In calling setState, when would you pick one method of calling this function over the other?"

object vs updater function

What is the significance of keys in React?

A "key" is a special string attribute you need to include when creating lists of elements in React. Keys are used to React to identify which items in the list are changed, updated, or deleted. In other words, we can say that keys are used to give an identity to the elements in the lists.

What is a constructor? Is it required?

A constructor in Java is a special method that is used to initialize objects. The constructor is called when an object of a class is created. If you don't initialize state and you don't bind methods, you don't need to implement a constructor for your React component.

What is Higher OrderComponents(HOC)?

A higher-order component (HOC) is an advanced technique in React for reusing component logic. HOCs are not part of the React API, per se. They are a pattern that emerges from React's compositional nature. Concretely, a higher-order component is a function that takes a component and returns a new component.

What are synthetic events in React?

A synthetic event 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.

What is an event in React?

An event is an action that could be triggered as a result of the user action or system generated event. For example, a mouse click, loading of a web page, pressing a key, window re-sizes, and other interactions are called events.

What is arrow function in React? How is it used?

Arrow functions in class properties are way easier to write and to read than a method with a bind call inside of a constructor. Arrows prevent this bugs. Arrow functions don't redefine the value of this within their function body. This makes it a lot easier to predict their behavior when passed as callbacks, and prevents bugs caused by use of this within callbacks.

What is the difference between calling a promise and using a `.then` vs using `await`?

Async/await and then() are very similar. The difference is that in an async function, JavaScript will pause the function execution until the promise settles. With then() , the rest of the function will continue to execute but JavaScript won't execute the . then() callback until the promise settles.

What are Pure Components?

By default, React will always re-render the component each time there is a change in state or props value. A Pure Component is a component that performs a check on the value of React props before deciding whether to re-render the component or not.

What are the different ways that you can call setState ?

Can use it in render() but will not modify a component's state. This method only returns the same result each time it's invoked and does not interact with the browser. Therefore, don't use componentDidMount() invokes immediately after a component mounts. You can call setState immediately with this and it triggers an extra rendering. This happens before the browser updates the screen, calling render() twice. componentDidUpdate() invokes immediately after updating. You can call setState immediately here but it must be wrapped in a condition or it causes an infinite loop.

How can you embed two or more components into one?

Components can be embedded into other components by establishing a parent-child relationship. If an application has multiple pages that serve different purposes, it can be broken up into specialized components (children) which will be rendered by one app component (parent).

What do you know about controlled and uncontrolled components?

Controlled component is component that get the changed value from the callback function and uncontrolled component is component that have the one from the DOM. For example, When input value is changed,we can use onChange function in Controlled Component and also we can get the value using DOM like ref.

How different is React's ES6 syntax when compared to ES5?

ES6 introduced Const and Let, arrow functions, destructuring and spread operators, import and export vs require, and template literals for string interpolation.

What do you understand from "In React, everything is a component."

Each React app contains components that represent specific windows or elements in the app. Components are one of the basic building blocks of React, and they represent classes or functions that accept input and render the various HTML elements.

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

Each component in React has a lifecycle which you can monitor and manipulate during its three main phases. The three phases are: Mounting, Updating, and Unmounting

What can you do with HOC?

Higher order components are JavaScript functions used for adding additional functionalities to the existing component. These functions are pure, which means they are receiving data and returning values according to that data. If the data changes, higher order functions are re-run with different data input.

Differentiate between stateful and stateless components. Stateful vs Stateless Components React

In React, a stateful component is a component that holds some state. Stateless components, by contrast, have no state. Note that both types of components can use props.

Explain the purpose of render() in React.

In React, the render() method is the only required method in a class component and is responsible for describing the view to be rendered to the browser window. Coupled with the clever way React operates around its virtual DOM concept, there are certain subtleties in how this method works.

How do you create an event handler in React?

In general, an event handler has the name of the event, preceded by "on." For example, the event handler for the Focus event is onFocus. Many objects also have methods that emulate events. For example, button has a click method that emulates the button being clicked.

What are the features of React?

JSX Components One-way Data Binding Virtual DOM Simplicity Performance

Why can't browsers read JSX?

JSX is not valid JavaScript. Browsers can only read JavaScript objects. To read JSX you would need a transpiler to convert the JSX to regular JavaScript that the browsers can understand. JSX files can contain elements of CSS, HTML, and JS that must be converted to its proper styling before the browser will recognize it.

What is JSX?

Javascript XML Used in React, utilizes the expressiveness of JS along with HTML like template syntax.

Which of these are required properties of the object in your package.json file?

Name&Version-Both form the unique identifier for your package. However, if you don't plan to publish your package, the name and version fields are optional. Description-Put a description in it. It's a string. This helps people discover your package, as it's listed in npm search Keywords-Put keywords in it. It's an array of strings. This helps people discover your package as it's listed in npm search Homepage-The url to the project homepage. Contact for Bug Fixes-The url to your project's issue tracker and / or the email address to which issues should be reported. These are helpful for people who encounter issues with your package. License-You should specify a license for your package so that people know how they are permitted to use it, and any restrictions you're placing on it. People(Author/Contributors)-The "author" is one person. "contributors" is an array of people. A "person" is an object with a "name" field and optionally "url" and "email"

What is Props?

Props are arguments that are passed into react components. It stands for properties.

How is React Router different from conventional routing?

React Router is a library for React that provides routing functionality. It is different from conventional routing in a few ways. First, React Router is declarative. This means that you specify what you want your route to look like, rather than specifying how to get there. This makes it more user-friendly and easier to read. Second, React Router is modular. This means that you can use only the features you need, rather than having to include everything in the library. This makes it more lightweight and efficient. Third, React Router is asynchronous. This means that routes can be loaded on-demand, rather than all at once. This makes the application more responsive and efficient. Fourth, React Router is composable. This means that you can create complex routes by combining multiple routes together. This makes the routing process more flexible.

Why do we need a Router in React?

React Router is a standard library for routing in React. It enables the navigation among views of various components in a React Application, allows changing the browser URL, and keeps the UI in sync with the URL.

What is React Router?

React Router is the standard routing library for React. From the docs: "React Router keeps your UI in sync with the URL. It has a simple API with powerful features like lazy code loading, dynamic route matching, and location transition handling built right in. Make the URL your first thought, not an after-thought."

How do you modularize code in React?

React code can easily be modularized by using the component structure. The approach is to define each component into different files. With each component separated into different files, all we have to do is figure out how to access the code defined in one file within another file

What are the limitations of React?

React is just a library, not a framework, meaning React doesn't call your code. It cannot add structure or guidelines to developing your application. Due to its size as a library, it can take time to understand, especially for beginner programmers. Coding with React can get more complex and more complicated than with vanilla JS, due to its use of inline templating and JSX.

What is React?

React. js is an open-source JavaScript library that is used for building user interfaces specifically for single-page applications. It's used for handling the view layer for web and mobile apps. React also allows us to create reusable UI components.

What is React.memo ?

React. memo is a higher order component. If your component renders the same result given the same props, you can wrap it in a call to React. memo for a performance boost in some cases by memoizing the result. This means that React will skip rendering the component, and reuse the last rendered result.

Is setState a synchronous or async call?

ReactJs sets its state asynchronously because it can result in an expensive operation. Making it synchronous might leave the browser unresponsive. Asynchronous setState calls are batched to provide a better user experience and performance.

Differentiate between Real DOM and Virtual DOM.Real DOM vs Virtual DOM

Real DOM - The DOM is an abstraction of a page's HTML structure. It takes HTML elements and wraps them in an object with a tree-structure — maintaining the parent/child relationships of those nested HTML elements. This provides an API that allows us to traverse nodes (HTML elements) and manipulate them in a number of ways — such as adding nodes, removing nodes, editing a node's content, etc. Virtual DOM - The virtual 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 such as ReactDOM. This process is called reconciliation.

What is a ref in React?

Refs is the shorthand used for references in React. It is similar to keys in React. It is an attribute which makes it possible to store a reference to particular DOM nodes or React elements. It provides a way to access React DOM nodes or React elements and how to interact with it.

List down the advantages of ReactRouter.

Routing between components is fast as the amount of data that renders is less. The rest of the data is rendered by the DOM, and even when there's tons of HTML and CSS to render, the DOM handles that part in the blink of an eye. Using lazy loading, any delay in rendering HTML is compensated for. For better user experience, animations and transitions can be easily implemented when switching between different components. It gives a real sense of a single-page application in action. No separate pages are rendered, and the current page doesn't refresh to load a new view.