⬅️ **[[$-Tools|Tools]]**
***
# ReactJS
> [!important] wurde lediglich 2015 und 2016 erarbeitet
[6 Ways to bind Javascript´s keyword this in React, ES6, ES7](https://www.sitepoint.com/bind-javascripts-this-keyword-react/)
[Promises](https://www.promisejs.org/)
[Github Fetch](https://github.com/whatwg/fetch)
[Fetch](https://davidwalsh.name/fetch)
[flux-standard-action](https://github.com/acdlite/flux-standard-action)
- index.html - sehr simpel
- bundle.js ist das gebündelte JS von Babbel und Webpack
## npm/NodeJS
- package.json - Definition der benötigten Pakete
- npm install - installiert Pakete die in package.json stehen
- npm start - kompiliert Boilerplate Packaged und started lokalen Server (wir schreiben JS in diesem Package, Babbel und Webpack bündeln diese Daten zusammen und Konvertieren dies in ES5 "Blackbox" das im Browser ausgeführt werden kann)
- bundle.js ist das gebündelte JS von Babbel und Webpack
NodeJs Installieren: https://nodejs.org/en/
- package.json - Definition der benötigten Pakete
- npm install - installiert Pakete die in package.json stehen
## ReactJS Basics
- Components: das was ReactJS ausmacht. Wir Programmieren Components die austauschbar sind.
- functional based component
- kein State
- kein render()
- class based component
- constructor(){}
- render()
- state
- State
- Update von State mit this.setState this.setState({ term: event.target.value })
- Arrow Function " event => this.setState({ term: event.target.value }) " --> kompakter
- controlled component --> erhält seinen value von State =>
```
<input
value={this.state.term}
...
- React LifeCycle
class SearchBar extends Component{
constructor(props){
super(props);
this.state = { term: "" };
}
render (){
return (
<div>
<input
value={this.state.term}
onChange={ event => this.setState({ term: event.target.value }) } />
</div>
);
}
```
1. Input ist mit leeren State vom Constructor gierenderes
2. User tippt Buchstabe ein
3. onChange wird ausgeführt --> setState mit neuem Wert wird ausgeführt
4. React rendered Component neu
5. Input wird mit aktualisierten State also term gerendert
6. erst jetzt ist der Buchstabe sichtbar
- Downwards Dataflow
- Daten von Parent => Child Component --> props werden übergeben
<VideoList videos={this.state.videos}/>
- Funktionen von Parent => Child Component
```
// index.js
videoSearch(term){ ... }
...
<SearchBar onSearchTermChange={term => this.videoSearch(term)}/>
// search_bar.js
...
this.props.onSearchTermChange(term);
```
- SearchBar führt über die Übergabe der Property onSearchTermChange die videoSearch() Methode von index.js aus.
## vereinfachte Schreibweisen
- Funktionsaufrufe
```
<SearchBar onSearchTermChange={term => this.videoSearch(term)}/>
```
anstatt
```
<SearchBar onSearchTermChange={function (term) { this.videoSearch(term)} }/>
```
- Direkt eine Komponente von React laden
```
import React, { Component } from 'react';
```
anstatt
```
import React from 'react';
const Component = React.component;
```
- Properties direkt herausnehmen
```
const VideoListItem = ({video, onVideoSelect}) => {
```
anstatt
```
const VideoListItem = (props) => {
const video = props.video;
const onVideoSelect = props.onVideoSelect;
```
- vereinfachter Function Call
```
const NotFound = () => { ... }
```
oder
```
(event) => { ... event.get... }
```
anstatt
```
const NotFound = function(event) { .... }
```
#
***
Related:
- [[$-Software|Software]]