I am trying to implement hooks into a React (^16.6.0) application using TypeScript
import * as React, {useState} from 'react';
Any idea what is the right syntax for this import?
import supports a limited set of syntax variations.
It can be:
import React, {useState} from 'react';
The downside is that entire library is imported, because React is default export and cannot be tree-shaken. Since the presence of React import is needed to use JSX syntax, a more efficient way is:
import * as React from 'react';
import {useState} from 'react';
Hooks were introduced in pre-release React 16.7. react version constraint should be ^16.7.0-alpha.0, #types/react should be ^16.7.0.
I had the same error on "#types/react": "^16.8.17". Looking at it's type def file, it was missing the useState function for some reason, though it was mentioned in the comments of other hooks like useReducer.
Upgrading to "#types/react": "^16.8.18" with npm i #types/react#latest fixed it.
Related
With the new JSX transform that dropped in React 17, we don't need to write import react from 'react'.
But
If I'm using hooks, I'd anyway be doing, say, import { useState } from 'react' which would include react anyway.
So, is there a benefit of omitting import react from 'react'?
Will it reduce bundle size in this case?
This question already has answers here:
import * as React from 'react'; vs import React from 'react';
(2 answers)
Closed 3 years ago.
Thoughout our TSX/React web application, we use two different import style for the react module:
import * as React from "react";
and
import React from "react"
I am not aware of any functional difference between the two. Both work just fine. Is there any reason to prefer one notion over the other?
You want to do import React from "react" so you editor can auto change it to import React, { useState } from "react".
As per my knowledge both are same.
import everything from "react" and then we can use it as React in our application
import * as React from "react";
same as
import React from "react";
So as per me you need to use import React from "react";.Because you can directly access React from react npm.
I want to use import React from "react" in typescript, but I have to use import * as React from "react", otherwise can't recognize the 'react' package of nodemodules
try setting allowSyntheticDefaultImports: true in your ts-config. It will fix the above error.
You are doing it wrong.
The import should be
import React from 'react';
With a capital R
The reason why import * as react from "react"; works because it specifies that everything should be imported from "react" package and it should be given an alias of react.
If you already tried the above import, you can try the allowSyntheticDefaultImports compiler flag as mentioned here.
You can learn more about it here
For me
import React from 'react';
doesn't work. I get the following error
Module ".../node_modules/#types/react/index"' can only be default-imported using the 'esModuleInterop' flagts(1259)
index.d.ts(55, 1): This module is declared with using 'export =', and can only be used with a default import when using the 'esModuleInterop' flag.
So I'm going with
import * as React from 'react';
I am going through some react code, can any one please let me know what does default as React in below code does.
import {
default as React,
Component,
PropTypes,
} from "react";
Thanks,
Guru
what is default in react import?
Default in that context is the entire React library. It is unnecessary in this case and could be shortened to import React, { Component } from 'react'
Another thing to note, is that proptypes have been moved to their own package now.
That's the same as:
import React, { Component, Proptype } from 'react';
obs: Since react v15.5 React.PropTypes has moved into a different package
In some example, I saw :
import React, {
Component
} from 'react';
import {
StyleSheet, Text,...
} from 'react-native';
I know the 'react-native' purpose, but I don't understand why they import 'React' in some example? it makes me confused...
Thanks for your time :)
import React from 'react' is required for JSX to work.
Under the hood, JSX is being transpiled to React.createElement(...) invocations. So, even though you don't have to type React.createElement(), JSX still requires React to be active in the module namespace so that it can do it for you.
Example of what React looks like without the transpilation step.