Написал React приложение, которое при поиске исполнителя через Spotify API выдает все альбомы:
'use strict';
const e = React.createElement;
import logo from './logo.svg';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Container, InputGroup, FormControl, Button, Row, Card} from 'react-bootstrap';
import { useState, useEffect} from 'react';
class LikeButton extends React.Component {
constructor(props) {
super(props);
}
render() {
const [searchInput, setSearchInput] = useState("");
const [acessToken, setAcessToken] = useState("");
const [albums, setAlbums] = useState([]);
const CLIENT_ID = "2c8ed13da29f45b990a1ad43ba870f7d";
const CLIENT_SECRET = "c18c855bfbe442d6aed8b9df99ae131f";
useEffect(() => {
//API Acess Token
var authParameters ={
method: 'POST',
headers:{
'Content-Type' : 'application/x-www-form-urlencoded'
},
body: 'grant_type=client_credentials&client_id=' + CLIENT_ID + '&client_secret=' + CLIENT_SECRET
}
fetch('https://accounts.spotify.com/api/token', authParameters)
.then(result => result.json())
.then(data => setAcessToken(data.access_token))
//token
}, [])
//Search
async function search(){
console.log("Search for " + searchInput);
//Get request using search to get the Artist ID
var searchParametrs = {
method: 'GET',
headers:{
'Content-Type' : 'application/json',
'Authorization' : 'Bearer ' + acessToken
}
}
var artistID = await fetch('https://api.spotify.com/v1/search?q=' + searchInput + '&type=artist', searchParametrs)
.then(response => response.json())
.then(data => {return data.artists.items[0].id})
.then(console.log("The Artist ID is " + artistID));
//Get request with Artist ID to grab all the albums from the artist
var returnedAlbums = await fetch('https://api.spotify.com/v1/artists/' + artistID + '/albums' + '?include_groups=album&market=US&limit=50', searchParametrs)
.then(response => response.json())
.then(data => {
console.log(data);
setAlbums(data.items);
});
//Dispaly all the albums
}
console.log(albums);
return e(
<div className="App">
<Container>
<InputGroup className="mb-3" size="lg">
<FormControl
placeholder="Search for Artist"
type="input"
onKeyPress={event =>{
if(event.key == "Enter"){
console.log("Pressed Enter");
search();
}
}
}
onChange={event => setSearchInput(event.target.value)}
/>
<Button onClick={search}>
Search
</Button>
</InputGroup>
</Container>
<Container>
<Row className="mx-2 row-cols-4">
{albums.map((album, i) => {
console.log(album);
return(
<Card>
<Card.Img src={album.images[0].url}/>
<Card.Body>
<Card.Title>{album.name}</Card.Title>
</Card.Body>
</Card>
)
})}
</Row>
</Container>
</div>
);
}
}
const domContainer = document.querySelector('#like_button_container');
const root = ReactDOM.createRoot(domContainer);
root.render(e(LikeButton));
Хочу вставить его в свою html форму:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Add React in One Minute</title>
</head>
<body>
<h2>Add React in One Minute</h2>
<p>This page demonstrates using React with no build tooling.</p>
<p>React is loaded as a script tag.</p>
<!-- We will put our React component inside this div. -->
<div id="like_button_container"></div>
<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<!-- Load our React component. -->
<script src="/js/like_button.js"></script>
</body>
</html>
Програма не отображается. P.S: В реакте разбираюсь только пару дней
root.render(e(LikeButton));
наroot.render(<LikeButton />);