How to focus an input element on page load?

  • Use the autoFocus attribute on the input element
  • Use the focus() method in componentDidMount()
  • Use the onFocus() event in the render method
  • Use the onLoad() event on the body element
In React, you can focus an input element on page load by using the "focus()" method in the "componentDidMount()" lifecycle method. This will set the focus to the input element after the component has been mounted in the DOM. For example: componentDidMount() { this.myInput.focus(); }.

When component props defaults to true?

  • When the prop is undefined
  • When the prop is null
  • When the prop is an empty string
  • When the prop is zero
In React, a component's props will default to true if the prop value is undefined. This can happen if the prop is not passed explicitly in the component declaration or if it is explicitly set to undefined in the parent component. To avoid this behavior, default values can be set for props using the defaultProps property in the component class.

What is "key" prop and what is the benefit of using it in arrays of elements?

  • A prop that determines the order of elements in an array
  • A prop that provides a unique identifier for each element in an array
  • A prop that specifies the position of an element in an array
  • A prop that specifies the type of each element in an array
The "key" prop in React is a special prop that provides a unique identifier for each element in an array of elements. It is used to optimize the performance of rendering by allowing React to identify which elements have changed, and to update only those elements instead of re-rendering the entire list. The "key" prop should be a unique and stable identifier for each element, such as an ID or index.

How to pass params to history.push method in React Router v4?

  • Pass a string with the route path and query parameters
  • Pass an object with a "params" property
  • Pass an object with a "query" property
  • Pass an object with a "state" property
In React Router v4, you can pass params to the history.push method by using the "state" property of the location object. This property can contain any data that you want to pass along with the route, such as query parameters, form data, or session information. For example: this.props.history.push({ pathname: '/new-route', state: { foo: 'bar' } });.

What is the difference between setState and replaceState methods?

  • There is no difference, they both update component state
  • replaceState is deprecated in React v16, while setState is still supported
  • setState is used in class components, while replaceState is used in functional components
  • setState merges the new state with the old state, while replaceState overwrites the old state
In React, the "setState" method is used to update component state, and it merges the new state with the old state. The "replaceState" method is similar, but it overwrites the old state completely with the new state. However, "replaceState" is deprecated in React and should not be used. Instead, you should use the "setState" method to update state in a React component.

How to use https instead of http in create-react-app?

  • Use the HTTP=false environment variable
  • Use the HTTPS=true environment variable
  • Use the SSL=true environment variable
  • Use the SSL_CERTIFICATE=true environment variable
In Create React App, you can use HTTPS instead of HTTP by setting the "HTTPS=true" environment variable. This will start the development server with HTTPS enabled, and will allow you to test your application with SSL/TLS encryption.

How do you programmatically navigate using React router v4?

  • Use the "document.navigate" function with a URL string
  • Use the "this.props.history.push" method with a route path
  • Use the "this.props.navigate" method with a route path
  • Use the "window.location" object with a URL string
In React Router v4, you can programmatically navigate by using the "history" object provided by the router. To navigate to a new route, you can use the "this.props.history.push" method with a route path as a string. This method adds a new entry to the history stack and navigates to the specified route. For example: this.props.history.push('/new-route');.

What is the difference between Element and Component?

  • Element is a React class, while Component is a React function
  • Element is a plain JavaScript object, while Component is a function or class that returns an Element
  • Element represents a single HTML element, while Component can represent multiple HTML elements
  • There is no difference
In React, an element is a plain JavaScript object that represents a single HTML element. A component, on the other hand, is a function or class that returns an element (or multiple elements). Components are used to create reusable UI elements, while elements are used to represent the actual DOM elements that make up the UI.

What are portals in React?

  • A way to communicate between components
  • A way to create dynamic forms
  • A way to handle errors in components
  • A way to render a component's children in a different part of the DOM
Portals in React provide a way to render a component's children in a different part of the DOM. This can be useful for creating modal dialogs, tooltips, and other UI components that need to be positioned outside the normal flow of the page.

What are the sources used for introducing hooks?

  • Community proposals and discussions
  • Official React documentation and blog posts
  • React conferences and meetups
  • All of the above
React Hooks were introduced based on community proposals and discussions, as well as official React documentation and blog posts. They were also presented and discussed at React conferences and meetups.