Archived
test
This commit is contained in:
@@ -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
@@ -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
@@ -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
@@ -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;
|
||||
Reference in New Issue
Block a user