R1 Flashcards
What is React?
React is a JavaScript library for building user interfaces, focusing on component-based development and efficient rendering.
What is React Router v6?
React Router v6 is a routing library for React that helps manage navigation and routing within a React application.
What is Redux used for in a React application?
Redux is a state management library used to manage the global state of a React application in a predictable and centralized way.
What is the purpose of the Button component in Material-UI?
The Button component is used to create clickable buttons with different styles and configurations.
When would you use the TextField component in Material-UI?
The TextField component is used to create input fields for text entry and form submissions.
What is the role of the AppBar component in Material-UI?
The AppBar component is used to create a top app bar for navigation, branding, and other app-related actions.
How does the Material-UI Grid 2.0 system help with layout in a React app?
The Material-UI Grid 2.0 system provides a flexible and responsive grid layout that helps organize and structure components within a layout.
What is the purpose of the setState method in React?
The setState method is used to update the state of a React component, triggering re-rendering and reflecting changes in the UI.
What is the recommended way to update state using setState?
The recommended way is to provide a function to setState, which receives the previous state and returns the new state. This ensures proper handling of asynchronous updates.
What are props in React?
Props (short for properties) are a way to pass data from a parent component to a child component in React. They are read-only and help customize the behavior and appearance of components.
How are props used in a React component?
Props are passed as attributes to a component when it’s used within another component. The component can access and use these props to render content dynamically.
What is the purpose of props in React applications?
Props enable components to be reusable and flexible by allowing them to receive data and settings from their parent components. This helps achieve modularity and separation of concerns.
How can child components communicate with their parent components in React?
Child components can communicate with their parent components by invoking functions passed as props from the parent. This way, the child can trigger actions in the parent’s context.
What is the concept of “lifting state up” in React?
Lifting state up refers to the practice of moving the state of a component to a common ancestor that’s higher up in the component hierarchy. This allows child components to share and update state through props.
How can child components notify their parent components of events or changes?
Child components can send data or trigger functions provided by their parent components through props. This allows them to notify the parent of specific events or state changes.
What is the purpose of callback functions in React?
Callback functions passed as props allow child components to call functions defined in their parent components. This is a way for child components to communicate back to the parent.
How can parent components access data or functions in child components?
Parent components can pass data or functions as props to child components. This way, the parent has access to the child’s behavior and can respond to changes.
component
a reusable, self-contained building block that encapsulates a specific piece of functionality and user interface. Components are the fundamental building blocks of a React application, allowing you to break down the user interface into smaller, manageable parts.
There are two types of components: function and class
function component
These are JavaScript functions that receive props (properties) as arguments and return JSX (JavaScript XML) elements that define the component’s structure and content. Function components are simpler and used for presenting UI based on the provided props.
Class Components
These are JavaScript classes that extend the React.Component class. They have additional features compared to function components, such as lifecycle methods and the ability to hold state. However, with the introduction of React Hooks, function components are now preferred for most use cases.
What is rendering?
the process of converting your component hierarchy and state data into the final visual representation that appears on the screen
Virtual DOM
‘Document Object Model’; a virtual representation of the actual DOM in memory. It is a lightweight copy of the actual DOM tree.
Reconciliation
It calculates the difference between the previous virtual DOM and the new virtual DOM
Diff
The difference between the virtual DOM and the new virtual DOM in the reconciliation process
