Components in React (and) Export Default v/s Export

Components in React

React supports two types of components which are Class Components and Function Components.

Class Components:

Class level components support state management.

Example:

import React,{Component} from 'react'

// Class component
export default class App extends Component {
  // state management
  state = {
    name: "React JS Tutorial"
  }
  render(){
    return(
      <div>
        <h2>Welcome to {this.state.name}</h2>
      </div>
    )
  }
}

Function Components:

Function level components support React Hooks which supports state management.

Example:

import React, { Component, useState } from "react";

// Function component
const App = () => {
  // use state hook
  const[name, setName] = useState("React JS Tutorial, Function component.")

  return (
    <div>
      <h2>Welcome to {name}</h2>
    </div>
  );
};

export default App;

Export Default v/s Export

What are Exports?

In JavaScript, modules are individual files containing code. This code can be functions, objects, values, classes, or React components. The exportkeyword allows these elements to be used in other JavaScript files, thus making the code reusable and modular.

Export Default:

A file can have no more than one default export. This type of export is commonly used when a file exports only one component.

Display.js

import React from "react";

const Display = (props) => {
  return <div style={{ margin: "20px" }}>Hello, Welcome.</div>;
};

export default Display;

App.js

In App.js using import Display function is imported

Syntax: import <functionName/fileName>

import Display from "./Display";

import React from "react";
import Display from "./Display";

// Class component
const App = () => {
  const name = "Welcome to React JS Tutorial";
  
  return (
    <div>
      <Display name={name} />
    </div>
  );
};

export default App;

Export:

A file can have as many named exports as you like. Named exports are used when a file exports multiple components or values.

To use these functions in another file, we need to import them using the same names and curly braces.