0

I am new in Reactjs and I want to know what is the difference between "react functional component" and "react functional component export"?

Here is react functional component code

import React from 'react'
export default function Test() {
  return (
    <div>Test</div>
  )
}

Here is "react functional component export"

import React from 'react'
function Test() {
  return (
    <div>Test</div>
  )
}

export default Test
Ricardo Sanchez
  • 4,935
  • 11
  • 56
  • 86
amit
  • 1
  • 1
  • 18
  • 28

2 Answers2

0

I want to add more context to your question: I suppose your question comes from the different snippets rfc and rfce of ES7+ React/Redux/React-Native snippets extension in VScode.

Two both cases do the same thing. The differences are the syntax of export. It's not particular to ReactJS but about JavaScript.

  • 1st case: you use export directly before the declaration function line.

  • 2nd case: you declare a function first and later use export with the function's name at the bottom of your code.

I'm used to using 2nd case.

You can read more about export syntax variant + named export vs. default export in this link

Khanaru846
  • 1
  • 1
  • The first (`export` declaration) is actually preferred since it exports the binding itself, and works better in circular dependencies due to hoisting. – Bergi Aug 05 '22 at 01:52
-1

You mean the difference between Functional Components And Class Components? The functions you have shared are the same, both are React Functional Component

React Class Components: is a class component requires you to extend from React Component and create a render function which returns a React element.

example:

import React from 'react'

export default class Test extends React.Component {
  render () {
    console.log(this.props)
    return <div>Test</div>
  }
}

React Functional Components: is just a plain JavaScript pure function that accepts props as an argument and returns a React element(JSX)

example:

import React from 'react'
export default function Test(props) {
  console.log(props)
  return (
    <div>Test</div>
  )
}
Sofiane999
  • 1
  • 1
  • In which situation we should use "class component" and in which situation we should use "functional components" ? – amit Jul 21 '22 at 05:33