ways of exporting the default function app with code inside in react native

Question

I am new to react native and I have a question regarding the export of functions, specifically the exporting of the default app.

I have seen two ways of exporting it, the first being:

export default function App() {
  return (/*Code goes in here and it renders*/);
}

Which automatically renders whatever code there is inside, and the other one is by creating a class component, like this

class App extends Component {
 /*functions like componentDidMount() can go in here/*

 render() { /*now the rendering code goes in here}
}

export default App;

What's the difference between this two forms of exporting the default app? Is it that the first one can only return basic code while in the second one a person can define the state and create functions like componentDidMount()? Or you can do the same in both, but it's just a way of declaring things?

Thanks for your time and your consideration in explaining this matter.

https://stackoverflow.com/questions/53062732/react-function-components-with-hooks-vs-class-components — Ugur Eren, Jul 14 '21 at 01:57
Those are two different ways of defining components in react. The first one is a function component, and the second is a class component. — Tayyab Mazhar, Jul 14 '21 at 07:14

score 1 · Accepted Answer · answered Jul 14 '21 at 15:26

You are defining different kind of components.

The first one is a functional component, defined with a function.

The second one is a class component, defined with a class.

For more information about the differences between them you can check https://www.geeksforgeeks.org/differences-between-functional-components-and-class-components-in-react/ or google it.

ways of exporting the default function app with code inside in react native

1 Answers1