Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
//import logo from './logo.svg';
//import './App.css';
//
//function App() {
// return (
// <div className="App">
// <header className="App-header">
// <img src={logo} className="App-logo" alt="logo" />
// <p>
// Edit <code>src/App.js</code> and save to reload.
// </p>
// <a
// className="App-link"
// href="https://reactjs.org"
// target="_blank"
// rel="noopener noreferrer"
// >
// Learn React
// </a>
// </header>
// </div>
// );
//}
//
//export default App;
import React, { useState } from 'react';
import FourButtons from './Components/FourButtons'
function App() {
const { useState } = React;
const [queryStr, setQueryStr] = useState('')
const [jsonValue, setJsonValue] = useState('')
const [text, setText] = useState('This area shows the result of requests..')
const axios = require('axios').default;
function mesg() {
alert('Hey!')
}
return (
<div>
<form name='mainform'>
<h1> Welcome to the home page of GoodReads Crawler! </h1>
<h3> Please input your query string:</h3>
<input
id='queryString'
type='text'
placeholder='example: book?id=12345678'
size='40'
value={queryStr}
onChange={(e) => setQueryStr(e.target.value)}
/>
<h3> Please input your json parameters (only effective for POST and PUT):</h3>
<input
id='jsonValue'
type='text'
placeholder='example: {"rating_counr": 1000000}'
size='40'
value={jsonValue}
onChange={(e) => setJsonValue(e.target.value)}
/>
</form>
<div style={{marginTop:20}}>
<FourButtons
backColor='blue'
borderColor='RoyalBlue'
leftMargin={0}
text='GET'
func={mesg} />
<FourButtons
backColor='black'
borderColor='gray'
leftMargin={20}
text='PUT'
func={mesg} />
<FourButtons
backColor='green'
borderColor='seagreen'
leftMargin={20}
text='POST'
func={mesg} />
<FourButtons
backColor='red'
borderColor='indianred'
leftMargin={20}
text='DELETE'
func={mesg} />
</div>
<div style={{marginTop:20}}>
<textarea id="board" name="returnData" rows="6" cols="50" value={text} readOnly={true}>
</textarea>
</div>
</div>
);
}
export default App;