React JS- Fragmentation, Components, import/export Components

Fragment

React Fragment is a feature in React that allows you to return multiple elements from a React component by allowing you to group a list of children without adding extra nodes to the DOM. To return multiple elements from a React component, you'll need to wrap the element in a root element. like this

const First = () =>{
   return(
     <Fragment>
        <h1>This is heading 1</h1>
        <h1>This is heading 2</h1>
     </Fragment>
)}        

Advantages of using fragments :

• We can avoid extra dom nodes. <div> as an extra element is removed.

• Improved Performance, Cleaner Code.

Disadvantages of Fragment :

• Lack of Attributes, Limited Use Cases, Potential Confusion
• Debugging Complexity, Older Browser Compatibility

React Components

Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and return HTML. Components come in two types, State full component and stateless component

Stateful Components: Use them when you need to manage state, lifecycle methods, or when dealing with complex UI logic that requires the component to keep track of changes over time

Stateless Components: Ideal for presentational components that focus solely on the UI and do not require any state management.

Function Components

Function components is stateless component. it also returns HTML and behaves much the same way as a Class component, but Function components can be written using much less code, are easier to understand.

Class Components

Class component is steteful component. Class components are robust and feature-rich, offering lifecycle methods and state management, but they tend to be more verbose

Default export

Default exports are used for single value or module export, allowing flexibility in import naming conventions.

import React from 'react';
const Comp= () => {
  return <div>Hello React!</div>;   
}

export default Comp;        

You can import the Comp component in another file like this:

import Message from "./Comp";        

Named Exports

Named exports to allow multiple values to be exported from a module with specific names,

export function sum(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}