React router

Na své stránce nejspíš budu potřebovat několik stránek. Bude to main page, přidání nového příspěvku (nebo úprava příspěvku) a to je asi tak vše.

K tomu se využívá balíček react-router-dom

Není to tak, že se někde bokem zaregistrují všechny routy, ale je to takzvané dynamic routing. Ok!

Jsou několik hlavních komponent, protože v reactu je prostě všechno komponenty. Máme zde BrowserRouter, Route, Link. Já jsem ještě použíl komponentu Redirect.

Route - komponenta, která specifikuje URL a odkaz na komponentu. V tomto případě to musí být co page, to komponenta.

BrowserRouter - věc, co odpovídá za sync URL v prohlížeči a Route komponenty, ve které se právě nacházíte.

Link - komponenta, co vygeneruje odkaz. Pokud ten odkaz odpovídá URL v Route, tak se příslušná Route vyrenderuje.


Ok, myslím, že je na čase to hodit na github spolu s prázdným projektem pro .NET Core API a začít sepisovat samotné API

September 2, 2018
by ZonerM
0
6

Kurz 3(2) - A Practical Start with React

Něco jako psaní komponent asi patří do samostatného postu.

Komponenty se v Reactu dělí na function a class. Stavové a nejstavové. Function komponenta je vlastně reference na anonymní funkci, co nemá ani return statement

const TableTab = () => (
<div className="container">
  <div className="alert alert-success" role="alert">
    <h4 className="alert-heading">Well done!</h4>
  </div>
</div>
);  

Statové komponenty, co mají i Lifecycle musí dědit z React.Component klasy.

Nejdřív to jednodušší. Props. Uložiště pro vlastnosti každé komponenty. Následně můžeme napsat něco takového.

import React from 'react';
const Header = (props) => {
    if(props.headerText)
    return ( <div><h1>{props.headerText}</h1></div> );
}
 
export default Header;

a vyrenderujeme jako

<Header headerText="wow"></Header>

Pretty ez asi. Při renderu pole dětí se používá .map nějak takto

  <tbody>
    {this.props.posts.map(function(post) {     
return (
    <tr>
      <td>{post.id}</td>
      <td>{post.title}</td>
      <td>{post.body}</td>
    </tr>
       ) 
    })}
  </tbody>

Jelikož je všechno generické a netypové, tak se může použít balíček prop-types, který dovoluje definovat které props vlastnosti jsou required. Nebo použít Typescript, který to řeší interfacy

August 13, 2018
by ZonerM
0
6

Kurz 3 - A Practical Start with React

Ok, teď mám v hlavě jak JS, tak i nějaké nejnovější features. Myslím, že je největší čas se vrhnout do Reactu.

npx create-react-app reactive-blog-posts

Here we go: npm start

Pro správný debug ještě bylo potřeba doinstalovat pár pluginu do VS Code, jinak to bude black magic.

Importy odpovídají za import modulů (tento modul musím exportovat). Když je v souboru jenom jeden komponen můžu exportovat pomocí

export default component;

Pak při referenci se tento component může jmenovat jakkoliv a nepotřebuje chlupaté závorky

Samotné slovíčko import nám dovoluje babel. Ale třeba připojení obrázků a stylu přes import, za to už odpovídá webpack. Taky při importu nemusíme specifikovat js soubory nazvane "index.js"

Co se týká jsx a psaní komponent, tak všechno, co se bude překládát do JS, se musí dávat do závorek

Co se týká skruktury projektu, tak se to může dělit na stránky se svými js soubory a každá stránka má svojí složku "components"?

August 13, 2018
by ZonerM
0
7

Kurz 2 - Getting Started with ES2017/ES8

Ok, takže poté, co jsem si osvěžil základní znalosti o JS, můžeme se vrhnout na něco pokročilejšího (snad)

ECMAScript je jednoduše specifikace JS, která obsahuje také jednotlivé stage pro přidávaní nových features do JS. V momentě, kdy je feature ve stagi finished, tak se přidá do další speficifikace JS

V momentě, kdy chci používat nejnovější features JS, ale většina prohlížečů to ještě nepodporuje, tak použiju code transpiling. Většinou za to odpovídá babel

Těmito features se rozumí věci, které byli v knihovnách tak cool a používané, že se to rozhodli přidat do vanila JS.

Novinky:

Každý object má prototype. Funguje to jako extension metody v C#

Object.key, .values pomůžou vytáhnout property a hodnoty na konkrétním objektu

Je funny, že až v ES8 přidali extension metodu .includes, což je nejspíš ekvivalent .Contains()

Math.Pow se nahradila tímto: Math.Pow(3,2) => 3**2

Callbacky nahradili Promises (Pending, Fulfilled, Rejected)

Konečně to začíná dávat smysl

Async a Await fungují podobně jako v C#, kde výsledkem není Task, ale Promise. Await mi z Promisu vytahuje hodnotu

Web Workery - věc, pomocí které můžeme JS spouštět paralelně

Vypadá to sice skvěle, ale nejspíš to bude hell až to budu chtít použít v kodu :D

August 12, 2018
by ZonerM
0
4

Kurz 1 - JavaScript: Getting Started

Tohle zní jako něco pro mě.

Po tomhle bych rád skončil někde jako Getting Started with ES2017/ES8

budeme používat plnkr.co

Super, JS má taky typeof i když je to netypový jazyk

10/0 je Infinity, což je typu number. Stejně jako NaN je taky typu number...

Další skvělá věc je undefined a null. Když nic nepřiřazuji, tak je to undefined typu undefined. Je to inicializace od JS enginu. Null je typu object a přižazuje jí samotný vývojář.

August 11, 2018
by ZonerM
0
4
Show more