Well, recently I've started using the React.js library, and now I'm trying to use it with Firebase Hosting, with the TypeScript language. But, every time I try to write some code using tsx it just doesn't work, for example:
import * as React from "react"; //red underline under "react"
import "./App.css";
import logo from "./logo.svg";
class App extends React.Component {
render() {
return <h1>Hello</h1>; //red underline under <h1> and </h1>
}
}
export default App;
that way I just can't write any jsx code here, because it always appears the issue:
test.tsx(1,1): error TS7026: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists
Can somebody please help me with this?
How did you create your react application? If you used create-react-app you'll need to use react-scripts-ts as your --scripts-version flag. This should install the #types packages along side React's dependencies, eliminating your problem.
Also, it should get you started with an App.tsx file as the one provided in your snippet is not a valid typescript react component (i.e. the your render() method is not public).
Happy hacking!
I solved this issue by reloading VSCode.
ctrl+shift+P > Developer: Reload Window
Related
im little bit React noobie when it comes to project setup. I have created a simple project with defaults using npx create-react-app. I wanted to use Sass so I installed a sass module. When it comes to usage, I created styles.scss with basic background styling, and tried:
function App() {
return \<div className="container"\>app\</div\>;
}
export default App;
this works fine, but I wanted to use it this way:
import styles from "./styles.scss";
function App() {
return <div className={styles.container}>app</div\>;
}
export default App;
but it doesn't work. I see that any className is given to this div. I quite don't understand why. Could anybody explain me the difference and give any tips how can I start using the second option mentioned?
If you're just trying to import a stylesheet, you should simply use:
import './styles.scss';
Of course you should also have SASS installed in your project, but I assume you already do.
I'm building a react component library (using typescript and styled-components) and I want to reuse as much as possible code between the two targets (web and native).
I have a folder called styled, and inside that folder, I have two index files: index.ts and index.native.ts.
Inside the index.ts I have: export { default as styled } from 'styled-components'; while in the index.native.ts I have export { default as styled } from 'styled-components/native';
I know react-native uses index.native.ts instead index.ts during the build process when it is available but I really need to make the IDE (vscode) to understand that, I mean, when I'm building a Button.native.ts the statement: import { styled } from '../styled' should import from the .native barrel and the ctrl + click should let us to the .native file.
I don't know if there is a configuration to change the default import file used as a barrel, I already tried to search in the typescript documentation for some react-native preset but I didn't find anything.
It is not related to TypeScript, it is an open issue on VSCode GitHub page. Still doesn't have any solution.
Even I didn't find solution on react native vscode plugin.
By my understanding you are working on RNW, so it is not a correct expectation that VSCode understand by Ctrl+CLICK your meaning is Web or Native side.When it works in development and production so forget about opening right code by click.
I have a Next.js app with several pages in it. All of the pages look similar.
import React, { Component } from "react";
import from "components/Wrapper";
export default class About extends Component {
render() {
return <Wrapper />;
}
}
I would like to refactor it using functional component.
I read here that you don't have to import react package here in a page due to next.js routing system. Next.js docs also show examples without react import on a page component, but no explanation given.
Can you clarify please. Is it necessary to import React at all in this case? Can I remove the import React line?
Well, actually it is still a complicated issue for all of us to realise when to use import React from "react"; and when not to in Next.js apps. But according to Tim Neutkens co-author of Next.js, in this thread he mentioned:
Next.js automatically adds the React import when JSX is used indeed. However, keep in mind that we still need to import React from 'react' when the React variable is used.
So this will show us, that whenever we want to use the JSX feature alone from React we do not have to import React from 'react' and Next.js will implicitly import it for us, but in any other case, we have to do that.
Update
Since the release of react v17.*.*, there is no need to import React from 'react' to use only JSX in the React and CRA apps, but you still need to import it for the usage of the hooks and other compartments that React offers with destructured named imports.
NPM libraries/packages
Though you will still need it if you want to create an npm package with react because under the hood it is the react-scripts job to do the automatic imports and babel or rollup won't do this on their own and they've just transpile the provided code. Keep in mind even in this case the usage of import React from 'react' is discouraged because the support will be dropped in the upcoming versions, so it is highly recommended to use import * as React from 'react' in these cases.
After creating a new react project using npx create-react-app new I'm getting functional js code in App.js:
import React from 'react';
import './App.css';
//need to have a class instead of a function here:
function App() {
return (
<div className="App">
</div>
);
}
export default App;
What command do I need to create a none functional react project? If functional is better than none functional please explain why.
If you have install create-react-app for this project, then it is come up with all the new features from react 16.8.6 (latest version of react). The latest react version come up with concept of Hooks. That is why we are getting functional component by default instead of class based component to increase the performance.
If you want class based component by default they you have to come up with older version of create-react-app. Ref
You can migrate react-scripts v3.x to v2.x like so:
npx create-react-app my-app --scripts-version react-scripts#2.1.7
When a new react app is created using create-react-app, it pulls the template from here https://github.com/facebook/create-react-app/tree/master/packages/react-scripts/template
Functional components are preferred than Class components (ES6 class) because, Functional components are usually stateless i.e. without any state and lifecycle methods - check this https://reactjs.org/docs/state-and-lifecycle.html. Their performance is better over class components which have state. Therefore, as a good practice one should always prefer as many stateless components (Functional) over stateful (Class), which is also done in react starter app i.e. create-react-app
Use: create-react-app <project> --scripts-version 2.1.7 to create a new react project that start with a class based App component rather than functional.
There are situations where a developer would prefer the class based design so the --scripts-version argument is good to know about.
I am trying to import elements from react semantic ui like this after installing via npm.
import React, { Component } from "react";
import "./App.css";
import { Button } from "semantic-ui-react";
class App extends Component {
render() {
return <Button>hi</Button>;
}
}
export default App;
But i get this error.
I guess the app was already running when you installed semantic-ui package, therefore, the appropriate file were not loaded.
Keep in mind to restart your app after installing every package or simply stop it before installing.
There are two possible scenarios for this error:
1.Hot module reload not working: Sometimes the npm does not automatically reload the pages, so re-starting the app would solve this problem.
2.Yarn / NPM mismatch: Some packages (especially semantic-ui) throws error when there is a mismatch with package-json and yarn.lock. It is recommended to stick with yarn package manager if you are using yarn.
Hope this helps :)