Skip to content

Latest commit

 

History

History
502 lines (305 loc) · 12.2 KB

deck.mdx

File metadata and controls

502 lines (305 loc) · 12.2 KB
Raw

import { Head, Notes } from 'mdx-deck'

import myTheme from './lib/theme' export const theme = myTheme

import LargeImage from './components/largeImage' import Credit from './components/credit' import SlideHeadline from './components/slide-headline' import OpeningSlide from './components/opening-slide' import BackgroundBubbles from './components/background-bubbles' import Website from './components/website/Website'

import {SplitContainer, Part} from './lib/split.layout.js' import { CodeSurferColumns, Step } from 'code-surfer' import CodeSlide from './components/code-slide.js'

import downloadsImg from './img/downloads.png' import usageImg from './img/js-frameworks-use.png' import reduxDirImg from './img/redux-dir-structure.png' import nextjsDirImg from './img/nextjs-dir-structure.png' import input1Img from './img/input1.png' import input2Img from './img/input2.png' import input3Img from './img/input3.png' import input4Img from './img/input4.png'

<title>React και BDR</title>

Downloads

Γνώμες

View library

Το React είναι library και όχι framework.

Είναι το View κομμάτι από την αρχιτεκτονική MVC. Δηλ. εμπλέκεται μόνο με το κομμάτι των στοιχείων που εμφανίζονται στο χρήστη. Με άλλα λόγια, με ό,τι σχετίζεται με τα components.

Αποθήκευση δεδομένων

Είναι επιλογή του προγραμματιστή το πώς θα αποθηκεύει το state της εφαρμογής.

Πιθανές λύσεις:

Just React or Redux?

Οργάνωση αρχείων

Ο προγραμματιστής επιλέγει την οργάνωση των αρχείων του project.

Το ίδιο το React προτείνει ομαδοποίηση των αρχείων με βάση το είδος του αρχείου, τα features ή τα routes. Πηγή

Οργάνωση αρχείων

<SplitContainer style={{ display: 'flex', justifyContent: 'space-between', marginTop:30, }}>

NextJS

<img src={nextjsDirImg} style={{width: '100%'}}/>

Redux

<img src={reduxDirImg} style={{width: '100%'}} />

Routing

Ο προγραμματιστής επιλέγει πώς θα υλοποιήσει το routing της εφαρμογής.

Δημοφιλείς βιβλιοθήκες για routing:

Static type checking

Ο προγραμματιστής αν και ποιο μηχανισμό θα χρησιμοποιήσει για type checking.

Τι είναι;

Επειδή το React δεν είναι opinionated και δεν περιλαμβάνει στον κώδικα του επιλογές για όσα αναφέρονται, έχει δημιουργηθεί ένα οικοσύστημα που περιλαμβάνει έναν μεγάλο αριθμό βιβλιοθηκών που δουλεύουν με React projects και συντηρούνται από διαφορετικούς προγραμματιστές.

Πώς μοιάζει το αποτέλεσμα;

Όπως εμείς θέλουμε!

Αυτό που βλέπει ο χρήστης και το style των components μπορεί να βασίζεται σε δικό μας design ή στο design κάποιας από τις πολυάριθμες βιβλιοθήκες που προσφέρουν components.

Ενδεικτικές βιβλιοθήκες components

Material-UI, React Bootstrap, React Semantic UI, Rebass, κλπ...

Παράδειγμα Inputs

Μπορεί ένα input να μοιάζει όπως θέλουμε:

Class component BdrLink
























D. Abramov:
Hooks


Ο κώδικας που ακολουθεί είναι το πρώτο μέρος από την παρουσίαση των hooks.


Πλήρης παρουσίαση: ReactConf 2018






































Καλύψεις


Για να δημιουργήσουμε την οθόνη με τις καλύψεις χρειαστήκαμε:




    

  • Κάποια components
    • 

  • Κάποια άλλα containers
    • 

  • Actions
    • 





    

  • Σύνδεση με το store μέσω Redux
    • 

  • i18n
    • 

  • Style
    • 















































































Από που ξεκινάω;







The End!