Question:- What are Higher Order Components(HOC)?
Answer:- In React, Higher Order Component is an advanced technique for reusing component logic. It is a function that takes a component and returns a new component. In other words, it is a function which accepts another function as an argument. According to the official website, it is not the feature(part) in React API, but a pattern that emerges from Reacts compositional nature.
Question:- What can you do with HOC?
Answer:- You can do many tasks with HOC, some of them are given below: - Code Reusability - Props manipulation - State manipulation - Render highjacking
Question:- Why is it necessary to start component names with a capital letter?
Answer:- In React, it is necessary to start component names with a capital letter. If we start the component name with lower case, it will throw an error as an unrecognized tag. It is because, in JSX, lower case tag names are considered as HTML tags.
Question:- What are fragments?
Answer:- In was introduced in React 16.2 version. In React, Fragments are used for components to return multiple elements. It allows you to group a list of multiple children without adding an extra node to the DOM.
Question:- Why are fragments better than container divs?
Answer:- - Fragments are faster and consume less memory because it did not create an extra DOM node. - Some CSS styling like CSS Grid and Flexbox have a special parent-child relationship and add
tags in the middle, which makes it hard to keep the desired layout. - The DOM Inspector is less cluttered.
Question:- How to apply validation on props in React?
Answer:- Props validation is a tool which helps the developers to avoid future bugs and problems. It makes your code more readable. React components used special property PropTypes that help you to catch bugs by validating data types of values passed through props, although it is not necessary to define components with propTypes. We can apply validation on props using App.propTypes in React component. When some of the props are passed with an invalid type, you will get the warnings on JavaScript console. After specifying the validation patterns, you need to set the App.defaultProps.
Question:- What is create-react-app?
Answer:- Create React App is a tool introduced by Facebook to build React applications. It provides you to create single-page React applications. The create-react-app are preconfigured, which saves you from time-consuming setup and configuration like Webpack or Babel. You need to run a single command to start the React project, which is given below. $ npx create-react-app my-app This command includes everything which we need to build a React app. Some of them are given below: - It includes React, JSX, ES6, and Flow syntax support. - It includes Autoprefixed CSS, so you dont need -webkit- or other prefixes. - It includes a fast, interactive unit test runner with built-in support for coverage reporting. - It includes a live development server that warns about common mistakes. - It includes a build script to bundle JS, CSS, and images for production, with hashes and source maps.
Question:- What is create-react-app?
Answer:- Create React App is a tool introduced by Facebook to build React applications. It provides you to create single-page React applications. The create-react-app are preconfigured, which saves you from time-consuming setup and configuration like Webpack or Babel. You need to run a single command to start the React project, which is given below. $ npx create-react-app my-app This command includes everything which we need to build a React app. Some of them are given below: - It includes React, JSX, ES6, and Flow syntax support. - It includes Autoprefixed CSS, so you dont need -webkit- or other prefixes. - It includes a fast, interactive unit test runner with built-in support for coverage reporting. - It includes a live development server that warns about common mistakes. - It includes a build script to bundle JS, CSS, and images for production, with hashes and source maps.
Question:- When do we prefer to use a class component over a function component?
Answer:- If a component needs state or lifecycle methods, we should use the class component; otherwise, use the function component. However, after React 16.8, with the addition of Hooks, you could use state, lifecycle methods, and other features that were only available in the class component right in your function component.
Question:- Is it possible for a web browser to read JSX directly?
Answer:- Web browsers cant read JSX directly. This is because the web browsers are built to read the regular JS objects only, and JSX is not a regular JavaScript object. If you want a web browser to read a JSX file, you must transform the files into a regular JavaScript object. For this purpose, Babel is used.
Question:- What do you understand by the state in React?
Answer:- In react, the state of a component is an object that holds some information that may change over the components lifetime. It would be best to try to make your state as simple as possible and minimize the number of stateful components.
Question:- What do you understand by props in React?
Answer:- In React, the props are inputs to components. They are single values or objects containing a set of values passed to components on creation using a naming convention similar to HTML-tag attributes. They are data passed down from a parent component to a child component. The main purpose of props in React is to provide the following component functionality: - Pass custom data to your component. - Trigger state changes. - Use via this.props.reactProp inside components render() method.
Question:- What do you understand by refs in React?
Answer:- Refs is the shorthand used for references in React. It is an attribute which helps 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. It is used when we want to change the value of a child component, without making the use of props.
Question:- How to create refs?
Answer:- Refs can be created by using React.createRef() and attached to React elements via the ref attribute. It is commonly assigned to an instance property when a component is created, and then can be referenced throughout the component.