teratail
回答率
85.36%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問reactをtypescriptで書きたい

編集履歴

質問編集履歴

4

編集

2019/11/22 07:52

投稿

cuku
cuku

スコア108

test CHANGED
File without changes
test CHANGED
@@ -1,82 +1,72 @@
1
1
  ```react
2
2
 
3
- // App.js
4
-
5
-
6
-
7
- // ComponentもReactと一緒にインポートする → OK
8
-
9
- import React, { Component } from 'react';
3
+ import React from 'react';
10
4
 
11
5
  import logo from './logo.svg';
12
6
 
13
7
  import './App.css';
14
8
 
9
+ import Title from './components/Title';
15
10
 
16
11
 
17
- import Title from './components/Title/Title';
18
-
19
-
20
-
21
- //class componentの宣言 → OK
22
12
 
23
13
  class App extends Component {
24
14
 
25
15
 
26
16
 
17
+ //Event handlerやstateを定義する場所 → OK
27
18
 
19
+ onClickHandler = () => {
28
20
 
29
- //Event handlerやstateを定義する場所 → OK
21
+ let title = document.getElementById('versionCounter');
30
22
 
31
- onClickHandler = () => {
23
+ let upgradeButton = document.getElementById('upgradeButton');
32
24
 
33
- let title = document.getElementById('versionCounter');
25
+ upgradeButton.style.display = "none";
34
26
 
35
- let upgradeButton = document.getElementById('upgradeButton');
36
-
37
- upgradeButton.style.display = "none";
38
-
39
- }
27
+ }
40
28
 
41
29
 
42
30
 
43
- //render()メソッド → OK
31
+ //render()メソッド → OK
44
32
 
45
- render() {
33
+ render() {
46
34
 
47
35
 
48
36
 
49
- //return → OK
37
+ //return → OK
50
38
 
51
- return (
39
+ return (
52
40
 
53
- <div className="App">
41
+ <div className="App">
54
42
 
55
- <header className="App-header">
43
+ <header className="App-header">
56
44
 
57
- <Title
45
+ <Title
58
46
 
59
- title="Hello World 3.0"
47
+ title="Hello World 3.0"
60
48
 
61
- titleStyle={{color: 'orange'}}
49
+ titleStyle={{color: 'orange'}}
62
50
 
63
- onClick={this.onClickHandler}
51
+ onClick={this.onClickHandler}
64
52
 
65
- >
53
+ >
66
54
 
67
- Hello World <span id="versionCounter" style={{borderBottom: '1px solid orange'}}>3.0</span>
55
+ Hello World <span id="versionCounter" style={{borderBottom: '1px solid orange'}}>3.0</span>
68
56
 
69
- </Title>
57
+ </Title>
70
58
 
71
- </header>
59
+ </header>
72
60
 
73
- </div>
61
+ </div>
74
62
 
75
- );
63
+ );
76
-
77
- }
78
64
 
79
65
  }
66
+
67
+ }
68
+
69
+ export default App;
80
70
 
81
71
  ```
82
72
 

3

修正

2019/11/22 07:52

投稿

cuku
cuku

スコア108

test CHANGED
File without changes
test CHANGED
@@ -90,4 +90,6 @@
90
90
 
91
91
  Attempted import error: './App' does not contain a default export (imported as 'App').
92
92
 
93
+ Cannot find name 'Component'. TS2304
94
+
93
95
  というエラーが出ています

2

修正

2019/11/22 07:37

投稿

cuku
cuku

スコア108

test CHANGED
File without changes
test CHANGED
@@ -34,8 +34,6 @@
34
34
 
35
35
  let upgradeButton = document.getElementById('upgradeButton');
36
36
 
37
- title.textContent = "4.0";
38
-
39
37
  upgradeButton.style.display = "none";
40
38
 
41
39
  }
@@ -56,8 +54,6 @@
56
54
 
57
55
  <header className="App-header">
58
56
 
59
- <img src={logo} className="App-logo" alt="logo" />
60
-
61
57
  <Title
62
58
 
63
59
  title="Hello World 3.0"
@@ -73,12 +69,6 @@
73
69
  </Title>
74
70
 
75
71
  </header>
76
-
77
- <p className="App-intro">
78
-
79
- To get started, edit <code>src/App.js</code> and save to reload.
80
-
81
- </p>
82
72
 
83
73
  </div>
84
74
 

1

修正

2019/11/22 07:31

投稿

cuku
cuku

スコア108

test CHANGED
File without changes
test CHANGED
@@ -93,3 +93,11 @@
93
93
 
94
94
 
95
95
  上記のコードをtypescriptに直したいのですがどこを直したらいいのでしょうか？
96
+
97
+
98
+
99
+ ./src/index.tsx
100
+
101
+ Attempted import error: './App' does not contain a default export (imported as 'App').
102
+
103
+ というエラーが出ています