REACT Flashcards
What is React JS?
-React is a JavaScript library for building user interfaces.
-Developed by Facebook in 2011
-React allows developers to build reusable UI components
-It has the support of a large, open source community
What is a component in React?
- reusable piece of code.
-Components are the building materials React uses to create user interface.
-Components break a UI down into reusable parts. React then renders each UI component as needed (separately from the others)
What’s the main difference between props and state?
-“State” describes a default data value in a React component that can change over time (usually based on user actions that call for changes in a UI).
-“Props” (or properties) describe the way a React component is configured. Props do not change.
In summary: state is mutable (changeable based on user actions) while props are not
What is React and what are its key features?
React is a JavaScript library used for building user interfaces. Its key features include component-based architecture, virtual DOM for efficient rendering, and reusable UI components.
Explain the concept of JSX and how it is used in React.
-JSX is a syntax extension for JavaScript that allows you to write HTML-like code within JavaScript
-It is used to define the structure and appearance of React components.
What is the purpose of lifecycle methods in React and give examples of their usage?
-A lifecycle method is a method that is called at a specific point in the lifecycle of a component,
-such as when it is created, updated, or removed from the DOM.
-They can be used to perform certain actions at specific times during the lifecycle of a component.
How does React handle event handling? Explain the synthetic event system.
React handles event handling by using synthetic events, which are cross-browser wrappers around native DOM events.
What are React events?
Events are reactions (the library IS called React, right?) that are triggered by specific user actions like clicking on a UI button, hovering a mouse over a UI object, using keyboard commands with the UI, etc.
What are Virtual DOMs and how do they work?
-When web browsers render HTML documents and turn them into a website or application on a screen, they create a representational tree of how the site or app is arranged called a Document Object Model (DOM).
-Without React, your website or app will use HTML to update its DOM in order to make things “change” on screen without users needing to manually refresh a page. React JS takes a different approach by creating a Virtual DOM—a copy of the site’s “actual” DOM.
-React uses this copy to determine what parts of the actual DOM need to change based on a user’s action. React then takes the change date from the Virtual DOM and selectively updates the actual DOM (versus reloading the entire thing). Over time, this leads to significant performance improvements for the website or application.
What are some of the major advantages to using React when building UIs?
-Increased application performance via the Virtual DOM model
-Improved coding efficiency with JSX
-The ability to reuse components across multiple projects
-Flexibility and extensibility through add-on tools provided by React’s open source community
What is the role of Redux in React?
- Redux is a state management library for JavaScript applications.
- It is often used with React to manage the state of an application in a predictable and centralized way.
- Redux provides features such as a single source of truth and time-travel debugging.
What are the advantages of Redux?
-Redux adds a solid structure to React code, making your code easier to maintain, and your intended coding results more predictable.
-includes developer tools that allow you to track your web application’s performance in real time (from actions to state changes)
-Like React, Redux has strong community support and robust ecosystem.
What is state in React?
- State is an object that represents the current state of a component.
- It can be updated by the component itself using the setState() method.
- Changes to state trigger a re-render of the component and its child components.
What is props in React?
- Props are short for “properties” and are used to pass data from a parent component to a child component.
- They are read-only and cannot be changed by the child component.
What is the difference between state and props in React?
- State is used to represent the current state of a component and can be updated by the component itself.
- Props are used to pass data from a parent component to a child component and are read-only.
- Changes to state trigger a re-render of the component and its child components, while changes to props do not.