import React from 'react';
import logo from './logo.svg';
import './App.css';
import Title from './components/Title';
class App extends Component {
// Location to define event handler and state → OK
onClickHandler = () =>{
let title = document.getElementById ('versionCounter');
let upgradeButton = document.getElementById ('upgradeButton');
upgradeButton.style.display = "none";
}
// render () method → OK
render () {
// return → OK
return (
<header className = "App-header">
<Title
title = "Hello World 3.0"
titleStyle = {{color: 'orange'}}
onClick = {this.onClickHandler}
>
Hello World<span style = {{borderBottom: '1px solid orange'}}>3.0</span>
</Title>
</header>
);
}
}
export default App;
I want to change the above code to typescript. Where should I fix it?
./ src/index.tsx
Attempted import error: './App' does not contain a default export (imported as 'App').
Cannot find name 'Component'. TS2304
Error
-
Answer # 1
-
Answer # 2
Attempted import error: './App' does not contain a default export (imported as 'App').
The error message is correct.
import
failed becauseexport
nothing from this file.I think it is appropriate to use
export default App
(omitted). -
Answer # 3
Hello.
Add the following line to the end of theApp.jsfile that contains theclass App
listed in the question. ?
Additionalexport default App;
Cannot find name 'Component'. TS2304
has one countermeasure.
I don't know if this will work, but in the TypeScript configuration filetsconfig.json
"typeRoots": ["./node_modules/@types"]
If there is not, how about adding this to the following position?
Additional 2{ "compilerOptions": { ... "typeRoots": ["./node_modules/@types"] } }
If you want to start developing a React application using TypeScript quickly, you can use the following command
npx creact-react-app myapp --typescript
You can also start creact-react-app with the-typescript
option to create an application templatemyapp. App created automatically by this is written with typescript from the beginning.
Related articles
- typescript - react: about component rendering
- typescript - want to compare with react initial value
- typescript - about react hook
- can't run usedispatch on redux toolkit | react hooks + redux toolkit + typescript
- i want to output text voice with react + typescript
- typescript - i don't know how to write a test in vuejs
- javascript - array operations with typescript + react
- typescript - uses of react indexhtml
- typescript - react hooks error cannot be resolved
- how to type react component in typescript
- typescript - react router error
- type error in react typescript argument
- about the type definition of react typescript
- typescript - i can't use react props well
- typescript - i want to put together a function that changes the react state
- google apps script - typescript is too long, so i want to write it short
- javascript - get the value of react typescript radiobuttom event
- React + TypeScript + webpack4 multi-entry configuration
- Write an Animation component in React to add animation/excessive effects to component entry and exit
- Learn more about best practices for TypeScript, React, Redux, and Ant-Design
- version control - data not found in react + redux + typescript
- i want to wrap the hook in typescript+react hooks
- how to use redux-localstorage with redux + typescript
- typescript - the usereducer state looks like a nested array
- typescript - about react hook
- typescript - what is the general flow of development using storybook?
- typescript - i want to dynamically change the provider used for sign-up/sign-in on sns of firebase
- typescript - i want to prepare a file exclusively for the tyepscript type
- authentication - when using firebase, where should i refer to the user information displayed on the front side, such as currentu
- typescript - advantages of react next ssr
It seems that the error contents are not simply default exported.
However, as an advantage of using such a front framework, I think that the value on HTML can be defined with ordinary variables, but
document.getElementById
When pulling values from HTML, the advantage of using the front system framework is crushed.Although you should also use TypeScript, you may want to start with learning about the benefits of using React, start with useful features of React, and step up.