REACT Flashcards

1
Q

What is React JS?

A

-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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

What is a component in React?

A
  • 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)
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

What’s the main difference between props and state?

A

-“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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

What is React and what are its key features?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

Explain the concept of JSX and how it is used in React.

A

-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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

What is the purpose of lifecycle methods in React and give examples of their usage?

A

-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 well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

How does React handle event handling? Explain the synthetic event system.

A

React handles event handling by using synthetic events, which are cross-browser wrappers around native DOM events.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

What are React events?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

What are Virtual DOMs and how do they work?

A

-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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

What are some of the major advantages to using React when building UIs?

A

-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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

What is the role of Redux in React?

A
  • 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.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

What are the advantages of Redux?

A

-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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

What is state in React?

A
  • 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.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

What is props in React?

A
  • 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.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

What is the difference between state and props in React?

A
  • 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.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

what are the hooks?

A

The useState hook enables components to manage their own state. useEffect is used to perform side effects (such as data fetching) and manage component lifecycle events. The useContext hook provides access to a context object shared across the component tree, allowing components to consume and update context values.