Running this mand:

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?

Running this mand:

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?

• javascript
• node.js
• reactjs
• react-native
• import

• 1 () => Node is the type. – jonrsharpe Commented Jul 9, 2021 at 13:34

1 Answer 1

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 ponent.

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 puter analyze the code better, and point out bugs sooner (before even running the code)