Download Web programming important questions and more Lecture notes Web Application Development in PDF only on Docsity!
UNIT-
1. What is React?
React is a JavaScript library for building user interfaces. It allows developers to create reusable UI components and efficiently update the user interface in response to data changes.
2. What are the major features of React?
Some major features of React include the ability to create reusable components, the ability to manipulate the DOM in an efficient and declarative manner, and the ability to efficiently update the user interface in response to data changes.
3. What is JSX?
JSX is a syntax extension for JavaScript that allows developers to write HTML-like code in their JavaScript files. It is typically used in combination with React to create and manipulate the user interface.
4. What is the difference between Element and Component?
In React, an element is a simple JavaScript object that represents a DOM node or tree. A component, on the other hand, is a more advanced construct that can be used to create custom reusable UI components. Components can be either class-based or functional, and they can have their own state and lifecycle methods.
5. How to create components in React?
There are two main ways to create components in React: class-based components and functional components. Class-based components are created using the React.Component class and must define a render() method that returns a React element. Functional components are created by defining a JavaScript function that returns a React element.
6. When to use a Class Component over a Function Compornent?
There are a few cases where you might want to use a class-based component over a functional component:
If you need to use state or lifecycle methods in your component
If you need to bind a specific this value to your component's methods
If you want to optimize performance with the shouldComponentUpdate() lifecycle method
7. What are Pure Components?
Pure components are a type of React component that implement a strict shouldComponentUpdate() method that returns false if the component's props and state have not changed. This can be useful for optimizing performance by avoiding unnecessary re-renders.
8. What is state in React?
In React, state is an object that represents the data or variables that a component needs to render its UI. State can be modified by a component's event handlers, and it can trigger a re-render of the component when it changes.
9. What are props in React?
Props (short for "properties") are a way for a parent component to pass data to its child components. Props are immutable in the child component, meaning they cannot be modified by the child.
10. What is the difference between state and props?
State is an object that represents the data or variables that a component needs to render its UI. It is managed and modified within the component itself. Props, on the other hand, are data that is passed to a component from its parent. Props are immutable in the child component, meaning they cannot be modified by the child.
11. Why should we not update the state directly?
Updating the state directly can lead to unexpected behavior and make it difficult to determine how the component's state changed. Instead, React provides the setState() method for updating the component's state in a controlled and predictable way.
12. What is the purpose 'of callback function as an argument of setState()?
The callback function as an argument of setState() is called after the component's state has been updated. It can be used to trigger additional actions or processes that depend on the updated state.
13. What is the difference between HTML and React event Handlers.
In HTML, event handlers are specified as attributes of an HTML element. For example:
In React, event handlers are specified as properties of a component's JSX element. They are written in camelCase and are called using the this keyword. For example:
14. How to bind methods or event handlers in JSX callbacks?
There are a few different ways to bind methods or event handlers in JSX callbacks:
Bind the method in the constructor of the component: 15. How to pass a parameter to an event handler or callback?
There are a few different ways to pass a parameter to an event handler or callback in React:
Use an arrow function in the callback:
21. What are forward refs?
Forward refs are a way to pass a ref through a component to one of its children. This can be useful for cases where the ref needs to be attached to an element that is not a direct child of the component.
22. Which is preferred option with in callback refs and findDOMNode()?
It is generally recommended to use callback refs over findDOMNode() for most cases. findDOMNode() has been deprecated in favor of callback refs because it can be harmful to the overall performance of the application.
23. Why are String Refs legacy?
String refs are legacy in React because they have been replaced by the more efficient callback refs. String refs are created by assigning a string value to the ref attribute of a DOM element, and they can be accessed using the this.refs object. However, string refs have been deprecated in favor of callback refs because they can lead to a number of problems, such as poor performance and potential security issues.
24. What is Virtual DOM?
The Virtual DOM (VDOM) is an abstraction of the actual DOM used by React to improve the performance of updates to the user interface. When a React component's state changes, the VDOM will create a new virtual tree of React elements. This virtual tree is then compared to the previous virtual tree, and a minimum number of DOM operations are used to update the actual DOM to match the new virtual tree.
25. How Virtual DOM works?
When a React component's state changes, the VDOM will create a new virtual tree of React elements. This virtual tree is then compared to the previous virtual tree, and a minimum number of DOM operations are used to update the actual DOM to match the new virtual tree. This process is known as "reconciliation."
The VDOM uses a diffing algorithm to determine the minimum number of DOM operations needed to update the actual DOM. It does this by comparing the attributes and children of each element in the old and new virtual trees, and only updating the elements that have changed. This allows React to avoid unnecessarily updating the DOM, which can be slow and resource-intensive.
26. What is the difference between Shadow DOM and Virtual DOM?
The Shadow DOM and the Virtual DOM are two different technologies that are used to improve the performance and encapsulation of web pages.
The Shadow DOM is a browser API that allows developers to attach a hidden, encapsulated DOM to a web element. It is used to improve the performance and encapsulation of web components by isolating the DOM and styling of a component from the rest of the page.
The Virtual DOM, on the other hand, is an abstraction of the actual DOM used by React to improve the performance of updates to the user interface. It works by creating a virtual tree of React elements and using a diffing algorithm to determine the minimum number of DOM operations needed to update the actual DOM.
27. What is React Fiber?
React Fiber is a reimplementation of the React core algorithm that was released in version 16.0 of React. It was designed to improve the performance of React applications by making the rendering process more incremental and flexible.
28. What is the main goal of React Fiber?
The main goal of React Fiber is to improve the performance of React applications by making the rendering process more incremental and flexible. It does this by breaking the rendering process into smaller, more granular pieces that can be worked on independently and in parallel. This allows the rendering process to be interrupted and resumed as needed, which can lead to smoother animations and better overall performance.
29. What are controlled components?
Controlled components are form elements in React that are controlled by the component's state. This means that the value of the form element is determined by the value of a corresponding piece of state, and any user input is passed through an event handler and used to update the state.
30. What are uncontrolled components?
Uncontrolled components are form elements in React that are not controlled by the component's state. This means that the value of the form element is determined by the user's input, and the component does not maintain its own internal state for the form element.
31. What is the difference between createElement and cloneElement?
React.createElement() is a function that creates a new React element. It takes a tag name, an object of props, and any children as arguments, and returns a new React element.
React.cloneElement() is a function that creates a new React element that is a copy of an existing element. It takes an existing element, an object of props, and any children as arguments, and returns a new React element that is a copy of the original element with the specified props and children.
32. What is Lifting State Up in React?
In React, "lifting state up" refers to the process of moving shared state from a lower-level component to a higher-level component that is shared by multiple components. This is often done to avoid prop drilling, which is the process of passing props down through multiple levels of nested components in order to share data.
32. What are the different phases of component lifecycle?
The different phases of the React component lifecycle are:
Mounting: This phase includes the processes of creating and inserting the component into the DOM. The component's constructor and componentWillMount() method are called before the
This HOC adds a customProp prop with a value of "foo" to the wrapped component.
37. What is context?
In React, context is a way to pass data through the component tree without having to pass props down manually at every level. It is used to share data that is considered global to the component tree, such as a user's authentication status or the theme of the application.
38. What are Children props.
The children prop in React refers to the content that is passed between the opening and closing tags of a component. It can be used to pass data or render nested components.
For example:
This is the content of the children prop
39. How to write comments in React?
In React, you can write comments in your JSX code using the {/ comment /} syntax. For example:
40. What is the purpose of using super constructor with props argument?
In a subclass constructor in React, the super(props) statement is used to call the constructor of the parent class. It is necessary to include the props argument in the call to super() because it passes the props that were received by the subclass constructor to the parent class constructor. This allows the parent class to access the props that were passed to the subclass.
41. What is reconciliatíon?
In React, reconciliation is the process of updating the user interface to reflect the current state of the component. It is performed by the Virtual DOM whenever the state or props of a component change.
During reconciliation, the Virtual DOM creates a new virtual tree of React elements based on the current state of the component, and then compares it to the previous virtual tree. It uses a diffing algorithm to determine the minimum number of DOM operations needed to update the actual DOM to match the new virtual tree.
42. How to set state with a dynamic key name?
To set state with a dynamic key name in React, you can use the computed property name syntax ( [] ) to create a dynamic key name. For example:
This will set the state with a key of foo and a value of bar.
43. What would be the common mistake of function being called every time the componentrenders?
One common mistake that can cause a function to be called every time a component renders is forgetting to bind the function to the component instance. This can cause the function to be called with a different this value each time the component renders, causing it to be called multiple times.
To avoid this mistake, you can bind the function to the component instance in the constructor or using an arrow function:
44. Is lazy function supports named exports?
Yes, the lazy() function from the react-loadable library supports named exports. This means that you can use the as keyword to give a different name to the lazy-loaded component when it is imported. For example:
45. Why React uses className over class attribute?
React uses className instead of class as the attribute name for defining class names in JSX elements. This is because class is a reserved word in JavaScript and cannot be used as an identifier. Using className avoids any potential conflicts and ensures that the code is properly parsed.
46. What are fragments?
This will render the ‘Modal’ component to the DOM element with an ID of ‘modal-root’, rather than as a child of the component's parent element.
49. What are stateless components?
Stateless components, also known as "pure" or "dumb" components, are React components that do not have their own state and do not handle their own logic. They are functions that take props as input and return a JSX element to be rendered.
Stateless components are simple, easy to test, and can improve the performance of a React application, as they do not have to manage their own state or perform complex logic.
50. What are stateful components?
Stateful components, also known as "class components," are components in React that have state and lifecycle methods. They are created using a class that extends the Component class from the react package.
Stateful components are typically used for container components that manage state or perform complex logic. They allow you to use features like local state, lifecycle methods, and the render() method to create a reusable component.
51. How to apply validation on props in React?
In React, prop validation can be used to ensure that a component is being used correctly by checking the type, shape, and values of the props it receives. This can be done using the prop-types library, which provides a range of built-in validators that can be imported and used in a component. For example:
52. What are the advantages of React?
There are many advantages to using React for building web applications:
It uses a virtual DOM, which makes rendering and updating the UI more efficient.
It has a declarative syntax, which makes it easier to understand and debug your code.
It uses a reusable component model, which makes it easier to build and maintain complex UI.
It has a large and active community, which means there are many resources and libraries available for use.
It is widely adopted by companies and developers, which makes it a good choice for building professional-grade applications.
53. What are the limitations of React?
There are a few limitations to using React for building web applications:
It can have a steep learning curve, especially for developers who are new to the framework.
It requires the use of additional libraries, such as a routing library or a state management library, to build a complete application.
It uses a JSX syntax, which can be unfamiliar to developers who are not familiar with it.
It can be difficult to debug performance issues in large applications, as the virtual DOM can make it hard to understand what is causing an issue.
54. What are error boundaries in React v1.
In React v16, error boundaries are components that can catch JavaScript errors anywhere in their child component tree, log the error, and display a fallback UI instead of the component tree that crashed.
Error boundaries are implemented using the componentDidCatch() lifecycle method. This method receives two arguments: the error and an info object containing the component stack trace.
Error boundaries can be used to prevent errors in a component's child components from causing the entire component tree to crash. This can improve the stability and user experience of a React application.
55. How are error boundaries handled in React v15?
In React v15, error boundaries were introduced as a way to handle errors that occur in a component's render, lifecycle methods, or constructor. An error boundary is a special kind of component that can catch errors that occur within its children and display a fallback UI instead of crashing the application.
56. What are the recommended ways for static type checking?
There are several recommended ways for static type checking in React:
Use the prop-types library to check the types and required status of props passed to a component.
Use a static type checking tool like Flow or TypeScript to add static types to your JavaScript code.
Use a linter like ESLint with the eslint-plugin-react plugin to catch type errors during development.
Using static type checking can help to catch mistakes early in the development process and make your code more reliable and maintainable.
57. What is the use of react-dom package?
The react-dom package provides DOM-specific methods that can be used to manipulate the DOM from a React application. It includes methods like render(), which can be used to render a React
Inline styles: Inline styles can be applied directly to an element using the style prop. CSS files: Styles can be defined in a separate CSS file and imported into a component. CSS modules: CSS modules are a way to write CSS in a way that is scoped to a specific component and does not affect the rest of the application. Styled components: Styled components are a library that allows you to write styles in a declarative way and apply them directly to a component.
62. How events are different in React?
In React, events are handled differently than in traditional JavaScript. Rather than using the traditional DOM event handlers (such as "onclick" or "onmouseover"), React uses synthetic event handlers that are attached to the element using the event name as a prop (such as "onClick" or "onMouseOver"). These synthetic event handlers are designed to be more performant and consistent across browsers.
63. What will happen if you use setState in the constructor? If you use setState in the constructor, it will update the state of the component immediately, which may cause unexpected behavior if the state depends on props that have not yet been initialized. 64. What is the impact of using indexes as keys?
Using indexes as keys can have a negative impact on performance because React uses the keys to identify which elements have changed and need to be re-rendered. Using a unique, stable identifier for each item is a better choice for keys.
65. Is it good to use setState() in componentWillMount() method?
It is generally not recommended to use setState in the componentWillMount method because this method is called before the initial render, and any state updates may trigger additional unnecessary renders. Instead, you should use the constructor or componentDidMount to set initial state.
66. What will happen if you use props in the initial state?
If you use props in the initial state, the state of the component will be dependent on the props, which can make it more difficult to reason about the component's behavior. It is generally better to compute the initial state based on the props in the constructor.
67. How do you conditionally render components?
You can conditionally render components in React by using a JavaScript expression inside the JSX to specify when a component should be rendered. For example, you could use an if statement or a ternary operator to conditionally render a component based on a prop or state value.
68. Why do we need to be careful when spreading props on DOM elements?
We need to be careful when spreading props on DOM elements because it can cause unexpected behavior if the spread includes props that are reserved for DOM elements, such as the "style" prop. It is generally better to spread the props on a wrapper component rather than on the DOM element itself.
69. How do you use decorators in React?
You can use decorators in React by installing the appropriate babel plugin and using the decorator syntax. Decorators are a way to add additional functionality to a component or method by wrapping it with another function.
70. How do you memoize a component?
You can memoize a component in React by using a higher-order component or a utility library like React.memo to wrap the component and cache the previous rendering results. This can improve performance by avoiding unnecessary re-renders when the component's props have not changed.
71. What is the control flow function?
The control flow function is a way to manage the order in which asynchronous tasks are executed in Node.js. It helps to ensure that tasks are executed in the correct order and that resources are released when they are no longer needed.
72. How does control flow manage the function calls?
The control flow function manages the function calls by scheduling them to be executed in the correct order and by providing a mechanism for handling errors and releasing resources.
73. What is the difference between fork() and spawn() methods in Node.js?
The fork() method in Node.js is used to create a new process from the current process. It is a way to create a child process that runs in parallel with the parent process. The spawn() method is also used to create a new process, but it is more flexible and allows you to specify additional options, such as the command to run and the arguments to pass to it.
74. What is the buffer class in Node.js?
The buffer class in Node.js is a global class that is used to manipulate binary data. It provides methods for creating, reading, and writing to buffers, as well as for converting between buffers and other data Types.
75. What is the control flow function? The control flow function is a way to manage the order in which asynchronous tasks are executed in Node.js. It helps to ensure that tasks are executed in the correct order and that resources are released when they are no longer needed. 76. How does control flow manage the function calls?
The control flow function manages the function calls by scheduling them to be executed in the correct order and by providing a mechanism for handling errors and releasing resources.
77. What is the difference between fork() and spawn() methods in Node.js?
The fork() method in Node.js is used to create a new process from the current process. It is a way to create a child process that runs in parallel with the parent process. The spawn() method is also used to create a new process, but it is more flexible and allows you to specify additional options, such as the command to run and the arguments to pass to it.
