React.js Interview Question and Answer

What is React
React is a JavaScript library created for building fast and interactive user interfaces for web and mobile applications. It is an open-source, component-based, front-end library responsible only for the application’s view layer. In Model View Controller (MVC) architecture, the view layer is responsible for how the app looks and feels. React was created by Jordan Walke, a software engineer at Facebook.

Why react:
It has huge community of github Components base architecture
React Features
React’s popularity today has eclipsed that of all other front-end development frameworks. Here is why:
• Easy creation of dynamic applications: React makes it easier to create dynamic web applications because it requires less coding and offers more functionality, as opposed to JavaScript, where coding often gets complex very quickly. • Improved performance: React uses Virtual DOM, thereby creating web applications faster. Virtual DOM compares the components’ previous states and updates only the items in the Real DOM that were changed, instead of updating all of the components again, as conventional web applications do.
• Reusable components: Components are the building blocks of any React application, and a single app usually consists of multiple components. These components have their logic and controls, and they can be reused throughout the application, which in turn dramatically reduces the application’s development time.
• Unidirectional data flow: React follows a unidirectional data flow. This means that when designing a React app, developers often nest child components within parent components. Since the data flows in a single direction, it becomes easier to debug errors and know where a problem occurs in an application at the moment in question.
• Small learning curve: React is easy to learn, as it mostly combines basic HTML and JavaScript concepts with some beneficial additions. Still, as is the case with other tools and frameworks, you have to spend some time to get a proper understanding of React’s library.
• It can be used for the development of both web and mobile apps: We already know that React is used for the development of web applications, but that’s not all it can do. There is a framework called React Native, derived from React itself, that is hugely popular and is used for creating beautiful mobile applications. So, in reality, React can be used for making both web and mobile applications.
• Dedicated tools for easy debugging: Facebook has released a Chrome extension that can be used to debug React applications. This makes the process of debugging React web applications faster and easier.

What is hooks
Hooks are introduce in version 16.8 we used recycling method before that like class but basically hooks replaced the classes method to function components , we use useState and usestate a array return current data and updated data = initial data

What is jsx

JSX stands for JavaScript XML. JSX allows us to write HTML in React. JSX makes it easier to write and add HTML in React. Babel compiles JSX down to send compile data to browser What is render() method in react.js 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

What is render and return method
Render is a method that tell react what to display. Return is a method / give output of function render is a method of react. return is just pure javascript for returning output. ... In react, render is a method that tell react what to display. return in a method or function is the output of the method or function

What is arrow function:-
Arrow functions were introduced in ES6. Arrow functions allow us to write shorter function syntax Const sum = ()=>{ }

What is Event
Handling events with React elements is very similar to handling events on DOM elements. There are some syntax differences: React events are named using camelCase, rather than lowercase. With JSX you pass a function as the event handler, rather than a string.

What is the use of virtual Dom in react JS?
Virtual dom is clone of Real dom we can do something in react pages its kept in virtal dome and after that it sync with real 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 controled and uncontroled components? In a controlled component, form data is handled by a React component. The alternative is uncontrolled components, where form data is handled by the DOM itself. 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.
An input form element whose value is controlled by React in this way is called a “controlled component”. For example, if we want to make the previous example log the name when it is submitted, we can write the form as a controlled component: class NameForm extends React. An input form element whose value is controlled by React in this way is called a “controlled component”.

What is State
State use in react you can update your data use state You cant update your date via variable

What is functional components
A Functional component is a function that takes props and returns JSX. They do not have state or lifecycle methods. Functional components are easier to read, debug, and test. They offer performance benefits, decreased coupling, and greater reusability.