React.js Flashcards
What is React?
-Open source JavaScript library use for building reusable UI components.
What are the key features of React?
- Virtual DOM (Document Object Model)
-Component Based Architecture
-Unidirectional flow of data
-JSX
What is Virtual DOM?
Lightweight copy of actual DOM maintained by React. When changes in the application state occur, the actual DOM is compared to the virtual DOM and efficiently updates only the necessary parts. For example a “Like” button on a platform. The entire page does not have to be re-rendered only the change in the “Like” button.
What is component bases architecture?
Components are reusable and self-contained module that represents a part of the user interface. There are functional components and class components.
What is unidirectional flow of data?
One-way data binding which makes it easier to track and debug changes.
What is JSX?
-Syntax extension of JS. It allows developers to write HTML like code directly within JS. This makes it easier to create and manipulate React elements.
Explain the difference between functional components and class components in React.
Functional components are stateless (no state to manage, simply take in props as input and return JSX output) are defined as JS function. They are simpler and easier to read, test, and maintain.
Class components are defined as ES6 classes and have additional features like lifecycle methods and state managements like constructors and classes to initialize.
What is a React element?
A React element is a lightweight representation of a DOM element. It is plain JS object that describes what should be rendered on the screen. React elements are the building blocks of React applications.
What is state in React?
State is an object that hold data that can change over time in a React component. It represents the mutable part of the component and can be accessed using “this.state” for class components and useState for functional components.
What is the difference between props and state in React?
Props (short for properties) and state are both used to manage data.
Props are read-only and are passed from parent components to child components. They are used for passing data down the component tree.
State is mutable and is managed internally within a component. It is used to manage data that can change over time within a component.
What are React hooks?
React hooks are functions that allow functional components to use state and other React features without writing a class. Hooks, such as useState and useEffect, provide a simpler way to manage component state and lifecycle.
What is purpose of useState hook?
useState is used to add state to functional components. It returns an array with two elements: the current state value and a function to update the state value. It enables functional components to have state similar to class components.
What is the purpose of useEffect hook?
useEffect is used to perform side effects in React components. It allows you to perform actions like data fetching, subscriptions, or manually changing the DOM after the component has rendered.
How can you update the state of a component in React?
To update the state of a component, you should never mutate the state directly. Instead, use the setState method provided by React. It accepts a new state object or a function that returns a new state object, and React will merge the changes and trigger a re-render.
