React – základ – poznámky

Stažení knihovny create-react-app a následné vygenerování nového projektu s její pomocí.

npm install create-react-app
.\node_modules\.bin\create-react-app <project-name>

Alternativou může být příkaz npx, který příkaz rovnou vykoná

npx create-react-app <project-name>

Základní obsah souboru src/index.js

//import React (pojmenování importu) from 'react' (jméno závislosti nebo cesta k souboru)
import React from 'react';  
import ReactDOM from 'react-dom';
//definování komponenty
const App = () => { //const App = function() {
    return ( //zabalení do závorek, kdyby za returnem nic nebylo, vrátí se undefined
        <div>Hello</div>;
    )
}
//vykreslení komponenty
ReactDOM.render(<App/>,document.querySelector("#root"));
  • pomocí importu lze přidat i css soubory import ‚./soubor.css‘
  • named vs default export
    • default – pokud obsahuje jeden defaultní
      export default <jméno komponenty>;
    • named – pokud vyjmenovává více
      export const <jméno komponenty> = () => {}<br>export const <jméno další komponenty> = () => {}

JSX

JSX přidává do JavaScriptu  XML syntax. Předchozí zápis App se tak zkompiluje do následujícího JS kódu, aby byl v prohlížeči funkční.

https://babeljs.io/repl | http://buildwithreact.com/tutorial/jsx

"use strict";

var App = function App() {
  //const App = function() {
  return React.createElement("div", null, "Hello");
};

HTML a JSX zápis není úplně stejný, jsou tam drobné odlišnosti.

  • style=“font-weight:bold“ => style={{fontWeight:’bold‘,color:’grey‘}}
    • {} = proměnná, {{}} = proměnná obsahující js objekt, kterému musí odpovídat zápis
  • class – v JS vyhrazené slovo, pro HTML class by se mělo použít className (v budoucnu bude možná odstraněno)
  • proměnné z JS jsou zobrazované v „{proměnné/fce}“
    • vypsání proměnné a textu (pokud promenna = 5, tak výstup bude „5 text“)
      {`${promenna} text`}
  • pro <label> místo for použít htmlFor

Props

  • předávání dat do podřazených komponent
  • jako atribut elementu
  • v rámci komponenty získané z prvního parametru
    const AppXy = (props) => {
  • lze udělat defaultní nastavení props v rámci komponenty
    const Komponenta = (props)=>{
        return <div>:)</div>;
    }
    Komponenta.defaultProps = {};

State

  • objekt, držící data komponenty
    • pokud komponenta obsahuje input s kterým se pracuje – drží se jeho data ve state a pro jejich získání se nepřistupuje do DOMu
  • inicializace v konstruktoru this.state = {}
  • plnění vždy přes this.setState({})
    • vyvolá opětovné vykreslení komponenty

Class-based

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
    //automaticky volane pred vsim ostatnim
    constructor(props){
        super(props);
    }

    render() {
        //pro caste volani neni vhodne zde cokoli inicializovat
        return (
            <div>:)</div>
        )
    }
};

ReactDOM.render(<App/>, document.querySelector("#root"));

Lifecycle

  • základní
    • constructor – jednorázové nastavení
    • render – pouze vykreslení
    • componentDidMount – načítání dat
    • componentDidUpdate – při změně state, props, případně pro další načítání dat
    • componentWillUnmount
  • méně časté
    • shouldComponentUpdate
    • getDrivedStateFromProps
    • getSnapshotBeforeUpdate

API požadavky

Redux

  • action creator (vytvoří objekt action)
  • action (objekt popisující jaké změny dat se mají provést)
  • dispatch (vytvoří kopii objektu akce a rozešle ho na všechny ‚reducers‘)
  • reducers (zpracovávají data z objektu akce, vracejí nová data)
  • state (aktualizovaná data z reducerů se ukládají do stavu)

Pravidla reducerů

  • musí vrátit nějakou hodnotu mimo hodnoty undefined
  • reducer přebírá vždy předchozí stav a akci (vyjma první inicializace, kdy je předchozím stavem undefined
  • jednoduchost; pro rozhodnutí o tom, jakou hodnotu vrátit, nesmí dělat volání dalších funkcí mimo (hledat v imputu, vyvolat api request,…)
  • nesmí se měnit první vstupní parametr reduceru (state) – může pak dojít k nepřerenderování reactí aplikace (je potřeba vrátit nový objekt/pole/hodnotu… pokud chceme, aby si redux uvědomil, že došlo ke změně… při vrácení stejného o/p/h to redux vyhodnotí jako že nedošlo ke změně a neaktualizuje zbytek aplikace)

Zdroje

  1. https://www.udemy.com/react-redux/
  2. https://stackoverflow.com/questions/50605219/difference-between-npx-and-npm
  3. https://reactjs.org/docs/introducing-jsx.html
  4. React component lifecycle
  5. Named Export vs Default Export in ES6
Rubriky: Nezařazené | Štítky: , | Napsat komentář

speedtest: SanDisk Ultra USB Drive 128 GB Type-C

Flash disk SanDisk Ultra Dual – 128GB.

 

 

Celý příspěvek

Rubriky: Nezařazené | Štítky: | Napsat komentář

Strojové učení – poznámky

Základní poznámky ke strojovému učení, převážně z knihy Mastering Java Machine Learning

Celý příspěvek

Rubriky: Nezařazené | Štítky: | Napsat komentář

HAProxy

HAProxy v docker kontejneru. Příklad možného nastavení pro směrování požadavků ze subdomén na různé kontejnery. Celý příspěvek

Rubriky: Nezařazené | Štítky: , | Napsat komentář

Zvýšení výkonu PHP

Upřesněním namespace pro globální funkce a konstanty lze zvýšit výkon PHP.
Celý příspěvek

Rubriky: Nezařazené | Štítky: | Napsat komentář

Význam zápisů v PHP

Rubriky: Nezařazené | Štítky: | Napsat komentář

Elasticsearch – základní koncept – poznámky

Elasticsearch (ES)

  • vysoce škálovatelný, open-source fulltextový vyhledávač a analytický nástroj umožňující pracovat s daty v téměř reálném čase
  • ukázkový use-cases
    • katalog produktů s vyhledáváním a našeptáváním
    • sbírání dat pro analýzu – trendy, statistika, anomálie,…
    • výstrahy (alerts & notifications) – pokud data v ES splní nějakou podmínku
    • rychlé výstupy pro „ad hoc“ dotazy nad velkým množství dat (např. ve spojení s Kibanou – vizualizace dat)

Celý příspěvek

Rubriky: Nezařazené | Štítky: | Napsat komentář

screen: Must be connected to a terminal.

https://github.com/moby/moby/issues/30421

uvnitř běžícího kontejneru příkaz:

script /dev/null

 

Rubriky: Nezařazené | Štítky: | Napsat komentář

Vytvoření uživatele s veřejným klíčem

  1. vytvořit uživatele
    useradd -m -d /home/joe -s /bin/bash joe
  2. vytvořit klíče a veřejný přidat do /home/joe/.ssh
    ssh-keygen -b 4048 -t rsa
  3. importovat veřejný klíč do authorized_keys (=soubor)
    cat id_rsa.pub >> /home/joe/.ssh/authorized_keys
  4. nastavit práva (bez správného nastavení nebude fungovat!)
    chown -R joe:joe /home/joe/.ssh
    chmod 700 /home/joe/.ssh
    chmod 600 /home/joe/.ssh/authorized_keys
    
  5. ujistit se, že je povolená autentizace pomocí veřejného klíče
    grep  PubkeyAuthentication /etc/ssh/sshd_config

    očekávaný výstup: PubkeyAuthentication yes

  6. seznam uživatelů s povoleným přístupem může být omezen v souboru /etc/ssh/sshd_config
    AllowUsers alice bob

    ve stejném souboru lze zrušit povolení pro přihlášení roota

    # Prevent root logins:
    PermitRootLogin no

    poté je potřeba restart služby

    service sshd restart 
    

     

Když se nedaří připojení k ssh

lze zkusit přidat „-v“ pro sledování, jaký se použije klíč

ssh -v user@host

Zjednodušení přihlašování

editací souboru .ssh/config na straně přihlašovaného

# --- some host ---
Host nameofhost
	HostName xx.xxx.xxx.xx
	User someuser
	PreferredAuthentications publickey
	IdentityFile /Users/currentuser/.ssh/my_private_key
	UseKeychain yes
	AddKeysToAgent yes
# ----------------------------
ssh nameofhost

 

 

Zdroje

Rubriky: Linux | Napsat komentář

Zabezpečení OpenSSH

  • vypnut starší a méně bezpečný protokol 1
  • zakázat přihlašování pro roota
  • omezit přihlašování jen na vybrané uživatele
  • změnit port 22
  • omezení přístupu na IP nebo omezení IP po určitém počtu chybných přihlášení
  • nastavení veřejného/soukromého klíče pro autentizaci a následné vypnutí přihlášení pomocí hesla

Zdroj

https://wiki.centos.org/HowTos/Network/SecuringSSH

Rubriky: Linux | Napsat komentář