React 101 Flashcards
What is React and why is it used web development.
React is a Javascript library used for developing user interfaces. It’s used in web development to build interactive and efficient UIs by breaking down the interface into small reusable components. The virtual DOM is React also ensures that its performance efficient
What is the virtual DOM and why is it important in React
The virtual is a lightweight copy of the actual DOM. It ensures optimal rendering by comparing changes in the virtual DOM and applying only the necessary changes in the actual DOM, improving performance
Explain the concept of JSX in React.
JSX is a syntax like extension of Javascript used with React. It allows developers to write HTML like code to describe UI components. It is later transpiled to Javascript for execution in the browser.
What are React components. And how do you create them.
React components are reusable, self-contained pieces of UI that can be composed to create complex user interface. They can be created functionally or as a class-based component. Functional components are simple, concise, and stateless. Where as class based components are complex, state-full, and has life cycle methods. However, since the introduction of hooks functional components have become the preferred way for creating components since they allow functional to access functional components to access React features that where only available to class based components like state and side effects.
Explain the difference between state and props.
State and props are both used to manage data in React. Props are external inputs passed to a component by its parent, and they are immutable within the component and state are internal in the component and are mutable.
How do you handle forms in React.
Forms in React are typically controlled components, where form elements have their values controlled by the React state. This involves setting the attribute “value” to the corresponding state variable and handling the onchange event to update the state.
What is a React Router and how does it work.
React router is a library for handling routing and navigation in a React application. It enables the creation of single page applications with multiple views. React Router uses a component based approach to render different components based on the URL to provide a seamless user experience.
Describe the life cycle methods and why is it important in React
Class components in React have life cycle methods that are invoked at various stages of a components existence. Examples include componentDidMount, componentDidUnmount, component DidUpdate.
How does data flow in React.
The flow of data is unidirectional in React from parent to children. Changes in data is managed by lifting state up to a common ancestor, and communication between components is achieved through callback functions.
What are hooks, and why are we’re they introduced
Hooks are functions that provide functional components with React features that’s were previously only available in class-based components. Hooks provide a more concise way to manage state and side effects in a functional component
Explain the significance of the key attribute in React lists.
The key attribute is used to uniquely identify and track an item in a list during rendering. This helps React efficiently update the UI by recognizing which items have changed, been added or been removed in a list, preventing unnecessary re-rendering
How can you optimize performance in React.
Performance in React can be achieved by using techniques like code splitting, lazy loading, and Memoization and optimizing the rendering process by implementing shouldComponentUpdate, PureComponents and using production builds.
What is Redux, and when would you use it in a React Application
Redux is a state management library for Javascript applications. It is used in React applications when the state needs to be managed centrally and shared amongst components.
Describe the difference between controlled components and uncontrolled components
Controlled components in React have their state controlled by React. In form inputs, the key attribute corresponds to a state variable, and the onChange handler is used to update the state. Uncontrolled components have their state managed internally and are not controlled React state.
How would you do authentication in React.
Authentication in React us handled by using techniques like JWT, secure cookies, OAuth. Typically, you store tokens securely and make authenticates requests.
