I'm adding typescript to my react-native app,
in App.tsx
I'm getting this error on Cannot find name React$Node on
const App: () => React$Node = () => {
...
}
To solve the "Cannot find name" error in React typescript, use a . tsx extension for the files in which you use JSX, set jsx to react-jsx in your tsconfig. json file and make sure to install all of the necessary @types packages for your application.
The . ts file extension is used when you are creating functions, classes, reducers, etc. that do not require the use of JSX syntax and elements, whereas the . tsx file extension is used when you create a React component and use JSX elements and syntax.
IntrinsicAttributes interface can be used to specify extra properties used by the JSX framework which are not generally used by the components' props or arguments - for instance key in React. Specializing further, the generic JSX.
Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and return HTML. Components come in two types, Class components and Function components, in this tutorial we will concentrate on Function components.
I'm unsure of the syntax you're using, and not sure where React$Node
comes from. From my experience, the correct typing and syntax should be React.ReactNode
or React.ReactElement
. For example:
import React from 'react'
const App = (): React.ReactElement => {
return (
// component code
)
}
As for the difference between ReactNode
and ReactElement
(because I wasn't entirely sure), I found ford04's answer useful - quoted here:
ReactElement and JSX.Element are the result of invoking
React.createElement
directly or via JSX transpilation. It is an object withtype
,props
andkey
. [JSX.Element
]ReactNode is used as return type for
render()
in class components. It also is the default type forchildren
attribute with [PropsWithChildren
]
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With