What defines the name of Arrow Function in React

Asked

Viewed 166 times

0

I’m studying Reactjs, and in the course I’m doing the teacher varies between class and arrow function, my doubt is, where the name of Function comes from?

Example:

When we create a component in React using class we define it as follows 

import React, { Component } from 'react';

class Componente extends Component {
  render(){
     return(
        <div>
          <h1>Componente</h1>
        </div>
     )
  }

}

export default Componente;


There we define in the export default the name of the component, and to use the component we use its tag <Componente />


Arrow Function

import React from 'react';

export default props => (
  <div>
    <h1>Componente</h1>
  </div>
)

But when we create a Arrow Function where this name comes from to use in the tag since we didn’t define it in export default?

javascript react ecmascript-6
  • 1

    You give the name of the component when using import NOME_DO_COMPONENTE from './component_file'.

  • 1

    The name defined in the creation is irrelevant, what matters is the name defined in the import import UmNomeQualquer from './MeuComponente;

2 answers

2


In the case of using Arrow Function, you are creating an anonymous function and exporting it.

To use it, you can import with any name you prefer.

For example: 

import Qualquer from './path-do-component';

and use as tag: 

<Qualquer />

0

There are two different export types, named and standard. You may have several exports named per module, but only one export [...] standard Named exports are useful for exporting various values. During import, it is mandatory to use the same name as the corresponding object, but a standard export can be imported under any name.

   // module.js
   export default class {}

 

   // app.js
   import HelloWorld from 'module';

You can find more examples by consulting the documentation of Mozilla Developer Network

Browser other questions tagged javascript react ecmascript-6

You are not signed in. Login or sign up in order to post.