まずjsonデータを作成します。適当に株価で作ります。
{
"stocks": [
{"id": 4563, "name":"アンジェス", "price": 780},
{"id": 9318, "name":"アジア開発キャピタル", "price": 9},
{"id": 8256, "name":"プロルート丸光", "price": 283},
{"id": 4755, "name":"楽天グループ", "price": 1132},
{"id": 9984, "name":"ソフトバンクグループ", "price": 7179}
]
}
### ReactのClassで書く場合
<script type="text/babel">
class App extends React.Component{
constructor(props){
super(props)
this.state = {
isLoaded: false,
error: null,
stocks: []
}
}
componentDidMount(){
fetch("http://192.168.34.10:8000/data.json")
.then(res=> res.json())
.then(
(result) => {
this.setState({
isLoaded: true,
stocks: result.stocks
});
},
(error) => {
this.setState({
isLoaded: true,
error: error
});
})
}
render(){
if(this.state.error){
return <div>Error: {this.state.error.message}</div>
} else if(!this.state.isLoaded) {
return <div>Loading...</div>
} else {
return (
<ul>
{this.state.stocks.map( stock =>(
<li key={stock.id}>
{stock.name} {stock.price}
</li>
))}
</ul>
);
}
}
}
const target = document.getElementById('app');
ReactDOM.render(<App />, target);
</script>
### function(関数)で書く場合
function App(){
const [data, setData] = React.useState([]);
React.useEffect(() => {
fetch("http://192.168.34.10:8000/data.json")
.then((resoponse) => resoponse.json())
.then((data) =>{
setData(data.stocks);
});
}, []);
return(
<ul>
{data.map( stock =>(
<li key={stock.id}>
{stock.name} {stock.price}
</li>
))}
</ul>
);
}
const target = document.getElementById('app');
ReactDOM.render(<App />, target);
結果は同じですが、関数型の方が遥かに書きやすいですね。
これをbitcoinで実装する
function App(){
const [data, setData] = React.useState([]);
React.useEffect(() => {
fetch("https://blockchain.info/ticker")
.then((resoponse) => resoponse.json())
.then((data) =>{
setData(data.JPY);
});
}, []);
console.log(data);
return(
<h1>ビットコイン価格(JPY):{data.last}</h1>
);
}
settime intervalでやりたい。
