Cestovní mapa React pro začátečníky, o kterých jste ani nevěděli, že je potřebujete.

Jednou z nejrozšířenějších knihoven JavaScriptu pro vývoj dynamických webových aplikací je React. Má rozsáhlou komunitu a za ním oddaný vývojářský tým.
Přestože je React sám o sobě přiměřeně jednoduchý, naučit se pouze jednu knihovnu nestačí, zvláště pokud chcete vytvořit komplexní webovou aplikaci.
V tomto článku načrtnu plán, jak se naučit používat React k vytváření aplikací v reálném světě. Projdu si klíčové principy a knihovny Reactu, které byste měli znát.

Níže jsou uvedeny některé jazyky a rámce, se kterými se budete muset seznámit, než se pustíte do Reactu.

1. Základy
   1. HTML
      • Naučte se základy HTML
      • Udělejte si několik stránek jako cvičení
   2. CSS
      • Naučte se základy CSS
      • Upravte styl stránek z předchozího kroku
      • Vytvořte stránku s mřížkou a flexboxem
   3. Základy JS
      • Seznamte se se syntaxí
      • Naučte se základní operace na DOM
      • Seznamte se s mechanismy typickými pro JS (Hosting, Event Bubbling, Prototyping)
      • Proveďte nějaká volání AJAX (XHR)
      • Naučte se nové funkce (ECMA Script 6+)
      • Navíc se seznamte s knihovnou jQuery
2. Obecné rozvojové dovednosti
   1. Naučte se GIT, vytvořte si několik úložišť na GitHubu, sdílejte svůj kód s ostatními lidmi
   2. Znáte protokol HTTP(S), metody požadavku (GET, POST, PUT, PATCH, DELETE, OPTIONS)
   3. Nebojte se používat Google, Power Searching with Google
   4. Seznamte se s terminálem, nakonfigurujte svůj shell (bash, zsh, fish)
   5. Přečtěte si několik knih o algoritmech a datových strukturách
   6. Přečtěte si několik knih o návrhových vzorech
3. Naučte se React na oficiálních stránkách nebo absolvujte nějaké kurzy
4. Seznamte se s nástroji, které budete používat
   1. Správci balíčků
      • npm
      • příze
      • pnpm
   2. Provozovatelé úloh
      • skripty npm
      • doušek
   3. Webový balíček
   4. Souhrn
   5. Balík
5. Styl
   1. Předprocesor CSS
      • Sass/CSS
      • PostCSS
      • Méně
      • Dotykové pero
   2. Rámce CSS
      • Bootstrap
      • Materializovat, Material UI, Material Design Lite
      • Bulma
      • Sémantické uživatelské rozhraní
   3. Architektura CSS
      • BEM
      • moduly CSS
      • Atomový
      • OOCSS
      • SMACSS
      • SUITCSS
   4. CSS v JS
      • Stylované součásti
      • Radium
      • Emoce
      • JSS
      • Aphrodite
6. Správa státu
   1. Component State/Context API
   2. Redux
      1. Asynchronní akce (vedlejší účinky)
         • Redux Thunk
         • Redux Better Promise
         • Redux Saga
         • Redux Observable
      2. Pomocníci
         • Odveta
         • Znovu vybrat
      3. Stálost dat
         • Redux Persist
         • Redux Phoenix
      4. Formulář Redux
   3. MobX
7. Kontrola typu
   • PropTypes
   • TypeScript
   • Tok
8. Pomocníci s formuláři
   • Formulář Redux
   • Formik
   • Formátový
   • Konečný formulář
9. Směrování
   • React-Router
   • Směrovač5
   • Směrovač Redux-First
   • Směrovač zásahu
10. Klienti API
    1. ODPOČINEK
       • Načíst
       • SuperAgent
       • axios
    2. GraphQL
       • Apollo
       • Relé
       • urql
11. Knihovny nástrojů
    • Lodash
    • Moment
    • názvy tříd
    • Číslice
    • RxJS
    • ImmutableJS
    • Ramda
12. Testování
    1. Testování jednotek
       • Jest
       • Enzym
       • Sinon
       • Moka
       • Chai
       • AVA
       • Páska
    2. Testování od konce do konce
       • Selen, Webdriver
       • Cypřiš
       • Loutkář
       • Cucumber.js
       • Nightwatch.js
    3. Testování integrace
       • Karma
13. Internacionalizace
    • React Intl
    • Reagovat i18další
14. Vykreslování na straně serveru
    • Next.js
    • After.js
    • Rogue
15. Statický generátor stránek
    • Gatsby

Nyní můžete svou cestu zahájit podle níže uvedeného plánu.

Zdroj

Děkujeme za přečtení.

Do příště,
Abhiraj