Thread by @mdjunaidap

Components in React.

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!

🔹 Functional Components:

• 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:

🔸 Props:

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

🔸 Lifecycle Methods & Effects:

• 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:

🔸 Higher-Order Components (HOCs):

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! 🚀

Learn React in 30 Days.

📘 React Rangers: 30-Days of React!

Grab now: reactrangers.xyz

That's a wrap.

Follow @mdjunaidap for more.