React JS Components, Fragments, Importing and Exporting React Components

On day three of learning React JS with Bikash Karki Sir, I explored the types of components used in react js, and the import and export of the files in react js.

In React, components can be written either as class components or functional components. Both have their use cases and benefits, and with the introduction of React Hooks, functional components have become more powerful and are often preferred. Here's a breakdown of both types:

• Class Components
• Functional Components

Class Components:

Class components are ES6 classes that extend from `React.Component` and must include a render method that returns JSX. Class components are State full. in there we can change the data for example: FB like/react. when we like the post there we can see the data are changed.

class FirstClass extends React.Component {
  render() {
    return <h2>First Class!!</h2>;
  }
}        

Functional Components:

Functional components are simple JavaScript functions that return JSX. Before React 16.8, functional components were stateless. In this update there is introduction of Hooks, functional components can now use state and other React features. A Function component 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. Functional components are state less.

const First = ()=>{

    
    return(
        <>
            <h1 className="text-2xl font-medium " >This is  my First Component</h1>
            
        </>
    )
}        

ReactJS Fragments:

We know that we make use of the render method inside a component whenever we want to render something to the screen. We may render a single element or multiple elements, though rendering multiple elements will require a ‘div’ tag around the content as the render method will only render a single root node inside it at a time. 

const First = ()=>{

    
    return(
        <>
            <h1 className="text-2xl font-medium " >This is  my First Component</h1>
            <p className="size-[40%]" id="para">This Component was Created by <strong>Saroj bata</strong>. </p>
        </>
    )
}        

Importing and Exporting React Components:

In React js, we can use the export and import statements to share code between different files.

Importing:

we use the `import` statement to bring in values from other files. The syntax differs slightly between named and default exports.

import '../Style/style.css'

const First = ()=>{

    
    return(
        <>
            <h1 className="text-2xl font-medium " >This is  my First Component</h1>
            
        </>
    )
}


export default First;
        

Exporting:

There are two types of exports in JavaScript: named exports and default exports.

Named Exports:

Named exports allows to export multiple values from a file. When importing, same name as the exported value.

Default exports:

Default exports allows to export a single value from a file. When importing, we choose any name for the imported value.

const First = ()=>{

    
    return(
        <>
            <h1 className="text-2xl font-medium " >This is  my First Component</h1>
          
        </>
    )
}


export default First;