What does `import type {Node} from 'react';` and usage in App: () => Node

user_13903942 0
Viewed 7754

Running this command:

npx react-native init AwesomeProject

In the App.js file I don't understand 2 lines:

import React from 'react';
import type {Node} from 'react';  // 1
import {
  SafeAreaView,
  ScrollView,
 // ..... Code .... 

const App: () => Node = () => {  // 2
   // ..... Code .... 


export default App;

  1. Importing type Node

    Following Is there a point to doing 'import type' rather than 'import' with Flow?, I understand that such import is used to import a type of object, for instance:

    import type { Array, Object, ... } from 'wherever';

    To be honest I am more concerned on the next point (probably If I understand that I would automatically get the this as well).

  2. const App: () => Node = () =>

    All that I see is that App is a variable which references a function that returns an Object of type Node which this Object s also a function. Does it wrap the App into a 'React' instance or something?

react-native reactjs node.js import javascript
1 Answers

What does const App: () => Node = () => do and why you would want to use it?

If we remove the types, the code is:

const App = () => {
  // ... code
}

This is a react functional component.

Then on top of that is added a type: () => Node. This means it's a function that takes no parameters and returns a react Node. Types help with development by letting the computer analyze the code better, and point out bugs sooner (before even running the code)

user_37948120
Related