Home>

i want to write react with typescript

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

react.js typescript
  • Answer # 1

    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, butdocument.getElementByIdWhen 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.

  • Answer # 2

      

    Attempted import error: './App' does not contain a default export (imported as 'App').

    The error message is correct.importfailed becauseexportnothing from this file.

    I think it is appropriate to useexport default App(omitted).

  • Answer # 3

    Hello.
    Add the following line to the end of theApp.jsfile that contains theclass Applisted in the question. ?

    export default App;
    Additional

    Cannot find name 'Component'. TS2304has 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?

    {
    "compilerOptions": {
        ...
        "typeRoots": ["./node_modules/@types"]
    }
}
    Additional 2

    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-typescriptoption to create an application templatemyapp. App created automatically by this is written with typescript from the beginning.

Related articles