Read on Twitter
Components in React.
Explained:
Explained:
Real-Life Example:
Imagine building a house π .
Each room (kitchen, bedroom, bathroom) represents a component.
React components contain particular UI and behaviour, just as rooms have particular purposes and looks.
Let's explore these "rooms" in the world of React!
Imagine building a house π .
Each room (kitchen, bedroom, bathroom) represents a component.
React components contain particular UI and behaviour, just as rooms have particular purposes and looks.
Let's explore these "rooms" in the world of React!
πΉ Functional Components:
β’ Simpler and more concise.
β’ Stateless (initially).
β’ Use functions to return JSX.
β’ With Hooks, they've become even more powerful!
Example:
β’ Simpler and more concise.
β’ Stateless (initially).
β’ Use functions to return JSX.
β’ With Hooks, they've become even more powerful!
Example:
πΉ Class Components:
β’ "Component" is React's foundational class.
β’ Components can be defined using JavaScript classes.
β’ React continues to support these class components.
β’ Yet, they're not advised for new projects.
Example:
β’ "Component" is React's foundational class.
β’ Components can be defined using JavaScript classes.
β’ React continues to support these class components.
β’ Yet, they're not advised for new projects.
Example:
πΈ Props:
β’ Short for "properties".
β’ A way to pass data from parent to child components.
β’ Immutable (read-only).
β’ Short for "properties".
β’ A way to pass data from parent to child components.
β’ Immutable (read-only).
πΈ State:
Internal data storage for components.
β’ this.setState() in class components.
β’ useState() hook in functional components.
Internal data storage for components.
β’ this.setState() in class components.
β’ useState() hook in functional components.
πΈ Lifecycle Methods & Effects:
β’ Class components have lifecycle methods like componentDidMount(), componentDidUpdate(), etc.
β’ Functional components use the useEffect() hook for similar purposes.
β’ Class components have lifecycle methods like componentDidMount(), componentDidUpdate(), etc.
β’ Functional components use the useEffect() hook for similar purposes.
πΈ Composition vs Inheritance:
React favours composition.
Instead of inheriting from a base component, you "compose" your UI by nesting components.
Example:
React favours composition.
Instead of inheriting from a base component, you "compose" your UI by nesting components.
Example:
πΈ Higher-Order Components (HOCs):
A design pattern where a component wraps another, adding additional props or state.
Great for code reuse.
Example:
A design pattern where a component wraps another, adding additional props or state.
Great for code reuse.
Example:
Components are the essence of React.
They make our UI:
β’ Modular
β’ Maintainable
β’ Intuitive.
Whether you opt for class or functional components, mastering their fundamentals is crucial! π
They make our UI:
β’ Modular
β’ Maintainable
β’ Intuitive.
Whether you opt for class or functional components, mastering their fundamentals is crucial! π
That's a wrap.
Follow @mdjunaidap for more.
Follow @mdjunaidap for more.
β’ β’ β’
Missing some Tweet in this thread? You can try to
force a refresh
γ
