This commit is contained in:
matteo
2018-11-14 15:08:21 +01:00
parent 78857bb1c5
commit d2c592d18d
4 changed files with 83 additions and 21 deletions
+21 -18
View File
@@ -1,3 +1,5 @@
# HazeTV
## Available Scripts
In the project directory, you can run:
@@ -20,7 +22,7 @@ Your app is ready to be deployed!
**Quando questo comando viene eseguito viene creata la cartella `build/` e al suo interno vengono messi i file per la nostra single page application**
# Axios
## Axios
[https://github.com/axios/axios](https://github.com/axios/axios#example)
@@ -98,6 +100,7 @@ axios.get('https://jsonplaceholder.typicode.com/users',
```
## Config Object
[Request config object link](https://github.com/axios/axios#request-config)
In questo oggetto andiamo a definire particolari tipi di configurazione.
@@ -107,9 +110,10 @@ Nelle righe dove c'è `//default` li abbiamo dei parametri predefiniti che perme
Di norma le uniche proprietà che andremo a definire nell'oggetto saranno `params: {}` e `data:{}` rispettivamente per GET e POST.
---
``` json
params:{
id:1,
id: 1,
name: 'Tiziano'
}
```
@@ -121,12 +125,12 @@ mentre `data:{}` sarà riempito con l'oggetto da passare al POST
---
Quindi in generale `axios.get(url,{})` con
`{} == `
`{} ==`
```json
{
params:{
id:1,
params: {
id: 1,
name: 'Tiziano',
key: 'value'
}
@@ -141,7 +145,7 @@ Dopo ogni `axios.get(url,{})` c'è un `.then()` all'interno di questo `then` vie
`response` sarà un oggetto strutturato in questo modo:
```json
```json
response: {
// `data` is the response that was provided by the server
data: {},
@@ -167,11 +171,12 @@ response: {
```
## Error object
[Error object reference](https://github.com/axios/axios#handling-errors)
in generale `error.message` e `error.response.status` sono sufficienti
in generale `error.message` e `error.response.status` sono sufficienti.
# YouTube API
## YouTube API
L'API key è `AIzaSyBbuSz5f4wzfVJzHZpDv_UJcM8WZYH4YmE` Può essere trovata nel file `apikey`.
@@ -218,10 +223,10 @@ axios.get('https://www.googleapis.com/youtube/v3/videos', {
})
```
# React Bootstrap
## React Bootstrap
``` javascript
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap.css';
```
Il css di bootstrap va importato una volta sola nel componente che racchiude tutta la logica dell'applicazione, infatti qui è importato solamente in `App.js`.
@@ -230,12 +235,12 @@ Il css di bootstrap va importato una volta sola nel componente che racchiude tut
- [Bootstrap 4.1 site](https://getbootstrap.com/docs/4.1)
- [ReactBootstrap reference](https://react-bootstrap.netlify.com/getting-started/introduction/)
# YouTube video player
## YouTube video player
## [From react-youtube README:](https://github.com/troybetz/react-youtube/blob/master/README.md)
Usage
----
## Usage
```js
<YouTube
videoId={string} // defaults -> null
@@ -257,8 +262,7 @@ Usage
For convenience it is also possible to access the PlayerState constants through react-youtube:
`YouTube.PlayerState` contains the values that are used by the [YouTube IFrame Player API](https://developers.google.com/youtube/iframe_api_reference#onStateChange).
Example
-----
## Example
```js
import React from 'react';
@@ -296,6 +300,5 @@ class Example extends React.Component {
You can access & control the player in a way similar to the [official api](https://developers.google.com/youtube/iframe_api_reference#Events):
> The component will pass an event object as the sole argument to each of the event handler props. The event object has the following properties:
> * The event's `target` identifies the video player that corresponds to the event.
> * The event's `data` specifies a value relevant to the event. Note that the `onReady` event does not specify a `data` property.
> - The event's `target` identifies the video player that corresponds to the event.
> - The event's `data` specifies a value relevant to the event. Note that the `onReady` event does not specify a `data` property.
+6 -2
View File
@@ -3,8 +3,12 @@ const app = express();
app.use(express.static(__dirname + '/build'));
app.get('/test', (req, res) => {
res.send({ ok: 'ok get' });
app.get('/test/:id', (req, res) => {
// req.params.id
// new wiki().page(req.params.id)
// .then(page => page.fullInfo())
// .then(parsed => res.send(parsed));
res.send({ok:req.params.id});
});
app.listen(8000, () => console.log('listen on 8000'));
+6 -1
View File
@@ -5,6 +5,7 @@ import { Row, Col } from 'react-bootstrap'; // eslint-disable-line no-unused-var
import VideoList from './VideoList'; // eslint-disable-line no-unused-vars
import TopBar from './TopBar'; // eslint-disable-line no-unused-vars
import VideoPlayer from './VideoPlayer'; // eslint-disable-line no-unused-vars
import Test from './Test';
import './App.css';
class App extends React.Component {
@@ -22,7 +23,11 @@ class App extends React.Component {
</Col>
</Row>
<Row>
<VideoList />
<Switch>
<Route path="/wikipedia" component={Test} />
<Route exact path='/' component={VideoList} />
</Switch>
</Row>
</React.Fragment>
);
+50
View File
@@ -0,0 +1,50 @@
import React, { Component } from 'react';
import wikijs from 'wikijs';
//import PropTypes from 'prop-types';
class Test extends Component {
constructor(props) {
super(props);
}
componentWillMount() {
}
componentDidMount() {
wikijs.find('star wars').then(data => console.log(data.results.length));
}
componentWillReceiveProps(nextProps) {
}
shouldComponentUpdate(nextProps, nextState) {
}
componentWillUpdate(nextProps, nextState) {
}
componentDidUpdate(prevProps, prevState) {
}
componentWillUnmount() {
}
render() {
return (
<div>
</div>
);
}
}
Test.propTypes = {
};
export default Test;