Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
234 lines (158 sloc) 12.1 KB
title date language
Čo považujem za nevyhnutné pri Reacte?
2019-01-19T17:00:00
sk

Za posledný rok som sa stretol s množstvom knižníc, ktoré sa týkajú Reactu. Je to dané najmä tým, že som nemal veľké predchádzajúce skúsenosti s ním a zároveň javascript je tak rýchly jazyk, že v ňom vychádza každý deň nové množstvo knižníc. Rád by som si tu odložil doterajšie skúsenosti a priblížil vám, čo všetko považujem dnes za nevyhnutné vedieť pri práci s Reactom. Knižnice môžu pomôcť hlavne tým, ktorí s ním začínajú. Začiatok som absolvoval s oficiálnym tutoriálom. Keď si človek uchopí základné pojmy a zistí, ako približne štruktúrovať React projekt, potrebuje dostať nejaký background k aktuálnym populárnym knižniciam. Tu je zoznam knižníc, ktoré považujem za dôležité.

Don’t overthink it. If you’re just starting a project, don’t spend more than five minutes on choosing a file structure.

React

Boilerplate

create-react-app - ak nemáte skúsenosti s Reactom, táto knižnica vám vytvorí boilerplate (kostra projektu) pre vašu aplikáciu. Obsahuje všetky nevyhnutné konfigurácie a závislosti, aby ste mohli rovno písať React a nemuseli sa o nič starať. Na začiatku veľa súvislostí ešte nemusíte vedieť. Tento tool sa o to postará.

What's included? React, JSX, ES6, TypeScript and Flow syntax support.

State Container

Redux - ide o globálne uložisko s premennými. Je vhodný k tomu, aby ste nemuseli preposielať premennú cez ďalších x komponent do hĺbky. Tak ju napojíte na globálny obchod. Použitie napríklad: user data, aktuálna téma, stav aplikácie, ... Používa sa často. Odporúčam si doinštalovať na vyvíjanie plugin do chrome. Ak sa chcete vyhnúť boilerplate (bez akcií, switchov, ...), ktorý je spojený s Reduxom, odporúčam rematch.

Redux

React Context - je to pomerne nová feature od Reactu. Je teoretickým nahraditeľom Reduxu. Tu sa ale vytvorí provider dát a jeho vnútorné komponenty vo vnútri ich vedia čítať pomocou consumera.

React Context

MobX - ďalšia možnosť stavového kontajneru.

Úložisko

store.js - pomáha pri aplikáciách založených na local storage. Staršie iPhone telefóny ho nepodporujú 😅.

Serverová komunikácia

fetch - natívny príkaz z ES6, ktorým je možné dopytovať server. Chýbajú mu zatiaľ nejaké funkcie ako napríklad abort.

Axios - rozšírená verzia fetch, založená na XMLHttpRequests.

const axios = require('axios')
axios
  .get('/user?ID=12345')
  .then(function(response) {
    console.log(response)
  })
  .catch(function(error) {
    console.log(error)
  })

Ky - kolega poradil prácu s touto knižnicou, ktorý je založený na fetch. Porovnanie autora Axios vs Ky.

Yes. Axios is based on XMLHttpRequests, while Ky is based on Fetch. Axios has manually implemented a lot of things we get for free with Fetch. Fetch-based libs should be more stable and less buggy in general. Ky also has retry functionality.

Sindre Sorhus

Apollo Client - knižnica s plnou podporou pre GraphQL. Ponúka tiež dev tools pre Chrome. Odporúčam si to pozrieť. GraphQL v skratke: Viacero dopytov je možné zlúčiť do jedného, alebo namiesto reťazových volaní na server ich je možné nahradiť za jeden.

GraphQL

CSS

Styled Components - vizualizácia komponentov v javascripte pomocou CSS. Výhodou je napríklad vyhnutie sa class-name konfliktov.

const Button = styled.a`
  display: inline-block;
  color: #e62076;
`
render(<Button href="http://www.martinboksa.eu/">GitHub</Button>)

CSS-in-JS - podobná knižnica ako Styled Components, používame ju v práci.

classnames - zaradil som to do CSS, ale ide skôr o utilitu, ktorá pomáha vytvárať class-names pre komponenty. Je to jeden z mojích najobľúbenejších nástrojov. Podľa mňa výborne zprehľadní kód.

classNames('foo', { bar: true }) // => result class name: 'foo bar'

react-responsive - jednoduchý spôsob, ako použiť media query v Reacte a vytvoriť tak responzívny web.

import MediaQuery from 'react-responsive'
const Example = () => (
  <div>
    <div>Device Test!</div>
    <MediaQuery query="(min-device-width: 1824px)">
      <div>You have a huge screen</div>
    </MediaQuery>
    <MediaQuery query="(max-width: 1224px)">
      <div>You are sized like a tablet or mobile phone though</div>
    </MediaQuery>
  </div>
)

React DnD - knižnica k vytvoreniu Drag&Drop rozhrania.

react-beautiful-dnd - v práci chalani majú výbornú skúsenosť s týmto DnD.

má to super performance a majú dosť veľa examples, čo pokryje väčšinu základných vecí.

Denis Slávik

React Spring - knižnica na animácie. Mám veľmi dobrú skúsenosť s výkonom, aký je možný s ňou dosiahnúť. Odporúčam si pozrieť "Prečo React potrebuje ďalšiu knižnicu na animácie?".

React Spring - Drag&Drop

Semantic UI - UI framework, ktorým vytvoríte responzívny web. Obsahuje preddefinované dizajny.

Carbon Components - Kolekcia rôznych UI hotových komponentov od IBM.

Fabric - Rôzne komponenty od Microsoftu.

Tu chýbajú knižnice ako React Bootstrap alebo Material UI, boli vyberané skôr tak, aby sa vám podarilo vytvoriť pekný web čo najjednoduchšie 📚.

Preklady

React Intl - knižnica na preklady, ktorá okrem iného poskytuje formátovanie dátumov, čísel, reťazcov, pluralizácie, ...

react-i18next - internacionalizácie pre reactjs / reactnative, ktorý je založený na i18next.

React Intl Redux - preklady sa držia v redux store.

FBT - framework na preklad, ktorý používa Facebook.

V tejto časti som písal hlavne zo skúsenosti kolegov.

Testovanie

Jest - testovacia platforma s nulovou konfiguráciou. Používa ho tiež Facebook.

Enzyme - testovací nástroj od Airbnb.

Meta Tags

React Document Title - nastavenie javascript÷document.title.

React Helmet - nástroj na správu hlavičiek html÷<head>.

Formuláre

Redux Form - Drží formuláre v state containeri. Treba poznať HOC a Redux.

Formik - kompletné riešenie pre formuláre, vrátane validácie, ... Jedno z najpopúlárnejších riešení, ktoré poradil aj Facebook.

Utility

lodash - rozširuje javascript o veľa zaujímavých funkcií ako debounce.

Moment.js - parsovanie, manipulácia a zobrazovanie dátumu a času 📅. Existuje veľa ďalších možností na prácu s dátumom. Myslím si, že nie je to úplne dobrá utilita, ale je populárna a známa.

date-fns - namiesto momentjs môžete použiť túto knižnicu.

Good library if you’re looking to replace Moment.js for one reason or another. Immutable too.

Dan Abramov

Rich Editor

Draft.js - framework s ktorým je možné vytvoriť rich editor. Rich Editor

Type Checking

PropTypes - kontrola typu props v runtime.

flow - statický typechecker.

TypeScript - jazyk, ktorý sa prekladá do javascriptu, ale je typový. Odporúčam si ho pozrieť.

Nice to know

Storybook - developerské rozrahnie pre UI komponenty. Vidíte, ako vyzerajú vaše komponenty . Jeden z dôsledkov použitia Storybook je že komponenty sa dajú lepšie znovu použiť a testovať. Pekný príklad použitia s Twitterom. Storybook intro

Prettier - jeden z mojích ďalších obľúbených nástrojov. Slúži ako formátovač kódu, snáď všetky známe editory ho integrujú. Stačí stlačiť klávesovú skratku a naformátuje dokument.

ESLint - The pluggable linting utility for JavaScript and JSX. Vo všetkých mojich projektoch som ho používal. Niekedy je otravný :).

TSLint - Ako ESLint ale pre TypeScript, na statickú analýzu kód.

PixiJS - posledný rok som pracoval na grafickom editore, v ktorom bol použitý PixiJS. Môžem plne odporučiť pri práci s plátnom (canvasom).

Gatsby - pomáha vytvárať jednoducho stránky bez "headache". Je v ňom napísaný napríklad React Docs alebo tento blog.

SENTRY - tool, ktorý som používal na zachytávanie chýb v produkcii. Môžem odporučiť, výborne sa dá skombinovať s Reactom, najmä ešte keď pridali Error Boundaries v metóde javascript÷componentDidCatch().


Knižníc a utilít na prácu s Reactom a javascriptom je naozaj veľa. Myslím, že toto je len zlomok zoznamu, ktorý by vám mohol byť užitočný. Ďalších veľa knižníc môžete pozrieť tu. Knižnice, ktoré si vyberiete sú na vás. Záleží veľmi od toho, čo chcete docieliť, ale ja som zástanca toho, aby sme nevymýšľali druhýkrát koleso. Všetky knižnice sú opensource a prípadne prerobenie ich, nemusí byť tak náročné.

Keď som písal blog, premýšľal som o tom, komu tento článok smerovať. Rozhodol som sa nakoniec pre ľudí, ktorí nemajú veľkú skúsenosť s Reactom. Dôsledkom toho som sa rozhodol nepopisovať nástroje ako webpack, parcel, grunt, ... Myslím, že to sú veci, ktoré na začiatku nie sú potrebné.

You can’t perform that action at this time.