React Core Concepts Flashcards
Learn the core concepts of React
Components
Components are like building blocks for your app.
Each component is a small, reusable piece of your user interface (UI), like a button or a form.
Functional Components
These are simple functions that return what the UI should look like.
Class Components
These are a bit more complex and used to be the main way to create components, but now we often use functional components.
JSX (JavaScript XML)
JSX is a special syntax that looks like HTML but is used in JavaScript. It makes it easier to create and understand the structure of your UI.
Props (Properties)
Props are inputs passed from a parent component to a child component. They are read-only and used to pass data or functions to components.
Props usage
Props allow components to be dynamic and flexible, as they can change based on the parent’s state or data.
State
State is an object that holds data that may change over time and affect how the component renders.
State usage
Each component can manage its own state (especially with theuseStatehook in functional components) and re-render when the state changes.
Hooks
Hooks are functions that allow you to manage state and side effects in functional components.
Introduced in React 16.8, they remove the need for class components in many cases.
useState
Manages local state in functional components.
useEffect
Handles side effects like data fetching or updating the DOM.
useContext
Accesses context values without passing props through every level of the tree.
useReducer
Manages complex state logic, similar to Redux’s reducer concept.
Common Hooks
- useState
- useEffect
Virtual DOM
The Virtual DOM is a lightweight copy of the real DOM.
React uses the Virtual DOM to keep track of changes and update only the parts of the actual DOM that need to be re-rendered.
Virtual DOM usage
This makes React applications more efficient by minimising direct DOM manipulation.
Lifecycle Methods (in Class Components)
Lifecycle methods are special methods in class components that are called at specific points in a component’s life (e.g., when it is created, updated, or destroyed).
Note: With hooks likeuseEffect, lifecycle methods in functional components are often replaced.
componentDidMount()
Runs after the component is first rendered.
Examples of Lifecycle Methods
- componentDidMount()
- componentDidUpdate()
- componentWillUnmount()
componentDidUpdate()
Runs after the component updates.
componentWillUnmount()
Runs just before the component is removed from the DOM.
Context and its usage
Context allows you to pass data through the component tree without manually passing props down through each level.
It is useful for global data like user authentication status or theme.
You useReact.createContext()to create a context, and components can access it with theuseContexthook or by subscribing to it.
Conditional Rendering
Conditional rendering refers to rendering different components or UI elements based on certain conditions (e.g., whether a user is logged in).
Conditional Rendering usage
This is typically achieved using JavaScript’s ternary operators or logical operators directly within JSX.
Lists and Keys
When rendering lists of data in React, each list item should have a unique “key” prop. This helps React track which items have changed, been added, or removed, improving performance.
Lists and Keys usage
Amap()function is commonly used to render lists in React, with each element given a unique key.
Events
Events are actions that happen in the app, like clicking a button or typing in a field. You can attach functions to these events to run specific code when they happen.
Event handling in React is similar to native JavaScript, but events are named using camelCase (onClick,onChange, etc.) and use JSX to pass the event handler function.
Events usage
Event handlers are passed as props to elements, and the function can be used to update the component’s state.
Lifting State Up
Lifting state up refers to moving shared state to the closest common ancestor of the components that need it. This allows multiple components to access and modify the same piece of state.
Fragment and usage
React fragments let you group a list of children without adding extra nodes to the DOM. It helps in reducing unnecessary markup.
<> … </>or<React.Fragment> ... </React.Fragment>.
