React js

What can you do with HOC?

HOC can be used for many tasks like: Code reuse, logic, and bootstrap abstraction Render High Jacking State abstraction and manipulation Props manipulation

How are forms created in React?

React forms are similar to HTML forms. But in React, the state is contained in the state property of the component and is only updated via setState(). Thus the elements can't directly update their state and their submission is handled by a JavaScript function. This function has full access to the data that is entered by the user into a form.

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.

What are the features of React?

Virtual DOM. Virtual DOM is one of the chief characteristics that facilitate fast and flexible application development using Reactjs. ...JSX. ...One-way data binding. ...React native. ...Declarative UI. ...Component-based architecture. ...Speed and efficiency. ...Flexibility.

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.this helps to adhere to the single-responsibility principle.

List some of the major advantages of React.

- It is component-based, which are essentially functions that return HTML. They can be independent and re-used inside other components. - It utilizes virtual DOMs vs real DOM, updating only the changes found using its Diff algorithm. This increases performance. - It utilizes JSX, which is a syntax extension of the JavaScript language and are known as React elements. It's essentially HTML but with the ability to use JavaScript expressions anywhere using curly braces. This is easier to read.

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

- The first method is to pass an object into setState. - The second method in calling setState, you can pass an updater function instead. The difference between these two are that passing a function allows you to access the current state value inside the updater. Whenever we are trying to perform any expression or calculation that depends on the latest version of state, we should use setState with a function.

What are the limitations of React?

- The most obvious limitation of React is that it is solely a UI library, not a framework such as Angular and Vue.- Because it is not a framework, there are more steps that need to be taken to integrate it into a tradition MVC framework.- It can be pretty difficult to learn React at first.

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

The fundamental difference between await and vanilla promises is that await X() suspends execution of the current function, while promise. then(X) continues execution of the current function after adding the X call to the callback chain.

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 change the version number in package.json , on the command line, in the package root directory, run the following command, replacing <update_type> with one of the semantic versioning release types (patch, major, or minor): npm version <update_type> Run npm publish .

What is NPM / Yarn?

What do you use npm or Yarn for? Installing npm seems much easier than that of Yarn—npm comes already bundled with your Node. js installation, so there'll be no need to install it. However, the Yarn core team does not recommend installing it via npm yarn- js package manager npm-node pack manager; install packages likes tools

How can you embed two or more components into one?

In React, you can embed another or multiple components by calling it inside of a component's return statement.wrap them in div. or you can also you react fragment.

List down the advantages of ReactRouter.

- It enables navigation among different application views- It keeps the UI in sync with the URL- It allows dynamic URLs, using URL paramaters, and nesting routes inside others

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

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. arrrow goes where ever it is define. it scopes this to this content. The arrow function is a syntactically alternative to regular function expressions but without its own bindings to the this keyword. Functional components are created using an arrow function format. In state components, they are used instead of functions that use function expression to avoid binding this every time. Arrow functions adopt the this object from its parent scope which would be the component, which is in a function expression.

What is an event in React?

In React, events are the triggered reactions to specific actions like mouse hover, mouse click, key press, etc. Handling these events are similar to handling events in DOM elements. But there are some syntactical differences like: Events are named using camel case instead of just using the lowercase. Events are passed as functions instead of strings. The event argument contains a set of properties, which are specific to an event. Each event type contains its own properties and behavior which can be accessed via its event handler only.

What is a ref 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

What is JSX?

JSX is a syntax notation for Javascript XML and provides expressiveness of JavaScript along with HTML.

How is React Router different from conventional routing?

Main difference between react and other routings. React Router uses dynamic routing. React Router, and dynamic, client-side routing, allows us to build a single-page web application with navigation without the page refreshing as the user navigates.

What are Pure Components?

Pure components are the simplest and fastest components which can be written. They can replace any component which only has a render(). These components enhance the simplicity of the code and performance of the application. Pure Components in React are the components which do not re-renders when the value of state and props has been updated with the same values.

What are the different ways that you can call setState ?

Using setState() in React lifecycle methods render() constructor() componentDidMount() componentDidUpdate() componentWillUnmount()

What is React.memo ?

What is the use of react memo? React. memo() is a great tool to memoize functional components. When applied correctly, it prevents useless re-renderings when the next props equal to previous ones. Take precautions when memoizing components that use props as callbacks.

List some of the cases when you should use Refs.

When you need to manage focus, select text or media playback To trigger imperative animations Integrate with third-party DOM libraries ref way are way you can get info from a dom elemetnt. why wouldnt you use ref: when u use ref not handling with state, you use ref in stead of ref like using native javascript. also react required to use props to use a compent to another component.

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?

the global scope is the scope that contains, and is visible in, all other scopes import is global already. If you export an object (singleton) it is then globally accessible as an import statement and it can also be modified globally.

Why do we need a Router in React?

A Router is used to define multiple routes and when a user types a specific URL, if this URL matches the path of any 'route' defined inside the router, then the user is redirected to that particular route. So basically, we need to add a Router library to our app that allows creating multiple routes with each leading to us a unique view.

What is Higher OrderComponents(HOC)?

A higher-order component (HOC) is an advanced technique in React for reusing component logic. a higher-order component is a function that takes a component and returns a new component. like when u have someone loging vs someone logout

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

A package. json file must contain "name" and "version" fields. The "name" field contains your package's name, and must be lowercase and one word, and may contain hyphens and underscores. The "version" field must be in the form x.x.x and follow the semantic versioning guidelines.

What is React Router?

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 apps.

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. In React, we have used Babel to do the compiling for us.

What is the significance of keys in React?

Keys are used for identifying unique Virtual DOM Elements with their corresponding data driving the UI. They help React to optimize the rendering by recycling all the existing elements in the DOM. These keys must be a unique number or string, using which React just reorders the elements instead of re-rendering them. This leads to increase in application's performance. Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity: Example: const numbers = [1, 2, 3, 4, 5]; const listItems = numbers CompleteAdd response

Explain the lifecycle methods of React components in detail.

Mounting means putting elements into the DOM. The next phase in the lifecycle is when a component is updated. A component is updated whenever there is a change in the component's state or props. The next phase in the lifecycle is when a component is removed from the DOM, or unmounting as React likes to call it. React has only one built-in method that gets called when a component is unmounted:

What is Props?

Props are arguments passed into React components and are passed down similar to HTML attributes. Props are read-only and can be JavaScript expressions, string literals, callback functions, and other components.

How do you create an event handler in React?

React event handlers are similar to DOM event handlers, where the main differences are events being named with camel case and event handlers are passed functions instead of a string. Unlike HTML however, we do not need to add event listeners to an element after it is created. Instead, listeners are provided when an element is initially rendered.

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

State is an object managed by its own component, unlike props which are passed to a different component, and it stores property values for that component. In react, anytime the state changes, it triggers a re-render of the component. State is initialized in the constructor method and manipulating the state is done with the setState() method.

What are synthetic events in React?

SyntheticEvent is a cross-browser wrapper around the browser's native event. It's API is same as the browser's native event, including stopPropagation() and preventDefault(), except the events work identically across all browsers.

Why is Switch component used in React Router v4?

The Switch component will render only the first route that matches exclusively, instead of rendering every route that matches inclusively.

What is a constructor? Is it required?

The constructor is a method used to initialize an object's state in a class. ... The constructor in a React component is called before the component is mounted. When you implement the constructor for a React component, you need to call super(props) method before any other statement.

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

The literal difference is that one has state, and the other doesn't. That means the stateful components are keeping track of changing data, while stateless components print out what is given to them via props, or they always render the same thing.

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

The real DOM is what's displayed on the screen. The virtual DOM is a virtual representation of the real DOM and is more lightweight but it does not have the ability to change what is displayed on the screen. When attempting to update the DOM, the entire virtual DOM gets updated, is compared to the virtual DOM before the update, and the changes between the two virtual DOMs gets updated on the real DOM. creates a copy real dom but puts in memory. it makes its easier to be faster.you can update and mulipulate the visual dom with out changing rreal dom(reconciliation)

Explain the purpose of render() in React.

The render function is a function used by class components that stores the return statement for that component. It's the most common lifecycle method that gets called every time the component is updated. It returns a single React element which is the representation of the native DOM component.

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

The three phases are: Mounting, Updating, and Unmounting. they are the render phase, pre-commit phase, and the commit phase. In the render phase, React will be Diffing or comparing the most updated view compared to the previous view determining what changes were made. In the pre-commit phase, it's simply reading the DOM. In the commit phase, it is publishing and updating the DOM, but only the changes it found.

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.

What do you know about controlled and uncontrolled components?

To write an uncontrolled component, instead of writing an event handler for every state update, you can use a ref to get form values from the DOM.Since an uncontrolled component keeps the source of truth in the DOM, it is sometimes easier to integrate React and non-React code when using uncontrolled components. It can also be slightly less code if you want to be quick and dirty. Otherwise, you should usually use controlled components. 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.

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

Using React with ES5:Uses the React.createClass() API.Defines component state using getInitialState().Exports the component as a module using module.exports.React with ES6:Uses the ES6 class.Defines component state using this.state in the constructor().Exports the component as a module using the export default.The render() function is similar in both. different old package with a new syntax. CompleteAdd response

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

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.

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

everything can be broken down to different sections to kind focus on one context at a time. Components are the building blocks of a React application's UI. These components split up the entire UI into small independent and reusable pieces. Then it renders each of these components independent of each other without affecting the rest of the UI.In most apps, App.jsx would be at the top of the component tree and every child component will be rendered inside of that parent component.

What is React?

is a front-end JavaScript library for building user interfaces or UI components. Devolpe by facebook and release in 2013. the code gets rewritten -react takes the html,css, js etc and the react dom is trans-pile-ing(rewritting) all the code to seperate javascript files that dimanicly get insterted to index html that get sent to the browser here

Is setState a synchronous or async call?

is asynchronous, though it may act like it's synchronous. When calling setState, React waits for all components have finished calling setState to then re-render components. This boosts performance and reduces unneccessary re-renders.