$30 off During Our Annual Pro Sale. View Details »

Things I Wish I Knew About React Native When I Started

Things I Wish I Knew About React Native When I Started

Practical guide to making your React Native experience better :)

Peter Piekarczyk

February 22, 2017
Tweet

More Decks by Peter Piekarczyk

Other Decks in Technology

Transcript

  1. 456''1&01-&4)06-%
    )"7&50-%.&"#065
    3&"$5/"5*7&
    1&5&31*&,"3$;:,
    !QFUFSQNF

    View Slide

  2. 1*&↟$"3↟$)*$,
    ↟ 71 1SPEVDUHPCPPUMFSDPN
    ↟ 3FBDU/BUJWF3BEJP
    ↟ 4QFBLFS
    ↟ t&OUSFQSFOVFSu
    !QFUFSQNF
    !QFUFSQNF

    View Slide

  3. ↟9BNBSJO YBNBSJODPN

    ↟#VJME/BUJWF"OESPJE J04 .BDBQQTVTJOH$
    ↟.BUVSFBOEQFSGPSNBOUQMBUGPSN
    ↟#BDLFE#Z.JDSPTPGU
    ↟/BUJWF4DSJQU OBUJWFTDSJQUPSH

    ↟#VJMUGPS"OHVMBS 5ZQF4DSJQUPS+BWBTDSJQU
    ↟8SJUFPODF SVOFWFSZXIFSF
    ↟#BDLFECZ5FMFSJL
    $0.1&5*5034

    View Slide

  4. 3&"%5)&%0$4

    View Slide

  5. IUUQTGBDFCPPLHJUIVCJPSFBDUOBUJWF

    View Slide

  6. View Slide

  7. 3&"%5)&
    3&-&"4&/05&4

    View Slide

  8. View Slide

  9. View Slide

  10. View Slide

  11. View Slide

  12. View Slide

  13. '"/5"45*$3&4063$&4
    ↟ NBLFJUPQFODPN
    ↟ '#T'$POGFSFODF"QQGFBUVSJOH3/ 3FEVY (SBQI2- 'MPX
    ↟ SFBDUOBUJWFFYQSFTTDPN
    ↟ 6QUPEBUFHVJEFGVMMMFOHUICFHJOOFSTHVJEF
    ↟ 3FBDU/BUJWF'VOEBNFOUBMT!FHHIFBEJP
    ↟ 7JEFPHVJEFCZ5ZMFS.D(JOOJT

    View Slide

  14. '"/5"45*$3&4063$&4
    ↟ SFBDUOBWJHBUJPOPSH
    ↟ "TFSJFTPGHVJEFTGSPNUIFGPMLTUIBUCVJMUUIFOFX/BWJHBUJPO
    MJCSBSZ
    ↟ -FBSOJOH3FBDU/BUJWF#PPL
    ↟ "QSBDUJDBMJOUSPEVDUJPOCZ#POOJF&JTFONBOGSPN5XJUUFS

    View Slide

  15. 3&"$5/"5*7&6#&3
    IUUQXXXSFBDUOBUJWFFYQSFTTDPNVCFS

    View Slide

  16. +0*/3&"$5*'-69
    0/%*4$03%
    SFBDUJGMVYDPN

    View Slide

  17. 6*&91-03&3
    (PPHMFt3FBDU/BUJWF6*&YQMPSFS(JUIVCu
    ↟$PNQPOFOU,JUDIFO4JOL
    ↟&BTZUP&YQFSJNFOU8JUI
    ↟-FBETUP0UIFS(SFBU&YBNQMFT5PP

    View Slide

  18. 6*&91-03&3

    View Slide

  19. ,&&1:063/"5*7&"11
    "%%3&"$5/"5*7&50*5
    IUUQTFOHJOFFSJOHJOTUBHSBNDPN
    ↟ *ODSFNFOUBM6QEBUFT'58
    ↟ 4FFJG:PVSF5SVMZ*OUPJU
    ↟ (FU$MPTFSXJUI:PVS/BUJWF5FBN

    View Slide

  20. #0*-&31-"5&4
    (&55*/(45"35&%
    410*-&3
    %0/564&0/&+645:&5

    View Slide

  21. #0*-&31-"5&1304
    ↟ 1SPKFDU4FUVQJTUJNFDPOTVNJOH
    ↟ 3FEVY /BWJHBUJPO %BUB1FSTJTUFODF /FUXPSL$BMMTj
    ↟ -BSHF$PNNVOJUZPG$POUSJCVUPST
    ↟ .BLFTJUFBTZUPHFUIFMQBOEVOEFSTUBOEEFDJTJPOTWJB13T
    ↟ $PNQMFY5FDI8PSLTJO)BSNPOZ
    ↟ /PUBMMTFUVQJTFBTZUPDPOGJHVSF

    View Slide

  22. #0*-&31-"5&$0/4
    ↟ .BHJD
    ↟ *GZPVEPOUVOEFSTUBOEUIFUFDI DIBOHJOHBOZUIJOHOJHIUNBSF
    ↟ 0QJOJPOBUFE
    ↟ :PVNJHIUOPUMJLF4BHBT PS5IVOLTPS$44*O+4
    ↟ "CTUSBDUJPOT%POU$PWFSFWFSZ6TFDBTF
    ↟ :PVSFUIFPOMZPOFUIBUVOEFSTUBOETBMMUIFSFRVJSFNFOUT

    View Slide

  23. 1016-"3#0*-&31-"5&4
    ↟*HOJUF HJUIVCDPNJOGJOJUFSFEJHOJUF

    ↟4OPXGMBLF HJUIVCDPNCBSUPOIBNNPOETOPXGMBLF

    ↟1FQQFSPOJ HFUQFQQFSPOJDPN

    ↟/BUJWF#BTF OBUJWFCBTFJP

    View Slide

  24. 1-"/")&"%

    View Slide

  25. ↟.BLFB#MVFQSJOU
    ↟5FTU$PNQPOFOUT"IFBE0G5JNF
    ↟4FBSDI*TTVFTGPS4JNJMBS6TF$BTFT

    View Slide

  26. .",&1"5)4'6/
    DPOTU)FMMP*NBHFSFRVJSF JNBHFTIFMMPQOH

    #&'03&
    DPOTU)FMMP*NBHFSFRVJSF !JNBHFTIFMMPQOH

    "'5&3

    View Slide

  27. app
    |—assets
    |—images
    |—hello-world.png
    |—index.js
    |—package.json
    |—components
    |—utilities
    |—index.js
    |—package.json
    |—build-fetch.js
    |—format-currency.js

    View Slide

  28. const IMAGES = {
    helloWorld: require(‘./hello-world.png’),
    backButton: require(‘./back-button.png’),
    };
    module.exports = IMAGES;
    JNBHFTJOEFYKT

    View Slide

  29. {
    “name”: “@images”,
    “main”: “index.js”
    }
    JNBHFTQBDLBHFKTPO

    View Slide

  30. export buildFetch from ‘./build-fetch’;
    export formatCurrency from ‘./format-currency’;
    VUJMJUJFTJOEFYKT

    View Slide

  31. import buildFetch from ‘./build-fetch’;
    import formatCurrency from ‘./format-currency’;
    export const BuildFetch = buildFetch;
    export const FormatCurrency = formatCurrency;
    VUJMJUJFTJOEFYKT

    View Slide

  32. /"7*("5*0/
    8/"5*7&

    View Slide

  33. /"7*("5*0/
    ↟ 4UBDL/BWJHBUJPO
    ↟ "TUBDLPGSPVUFTUIBUZPVQVTIQPQ
    ↟ 5BC/BWJHBUJPO
    ↟ J045BC#BS
    ↟ %SBXFS/BWJHBUJPO
    ↟ "OESPJE0GG$BOWBT
    ↟ .PEBMT
    ↟ 'SBNFXPSLTQFDJGJD &BTZUP,FFQ0VUPG

    UIF3PVUFS"MUPHFUIFS

    View Slide

  34. ↟ /VDMJEF
    ↟ '#1MVHJO#VJMUPOUPQPG"UPNUPVOJGZ'BDFCPPL%FWFMPQFST8PSLGMPXT
    ↟ OVDMJEFJP
    ↟ &YQPOFOU 9%&
    &YUFOEFE%FWFMPQNFOU&OWJSPONFOU
    ↟ "CTUSBDUJPO0O5PQ0G3FBDU/BUJWF
    ↟ HFUFYQPOFOUDPN
    ↟ %&$0*%&
    ↟ 4LFUDITUZMF(6*
    ↟ EFDPTPGUXBSFDPN
    %&7&-01&3&91&3*&/$&

    View Slide

  35. ↟ 3FBEUIF3FMFBTF/PUFT
    ↟ $SFBUFB/FX#SBODI
    ↟ #F1SFQBSFE5P/VLFOPEF@NPEVMFT CVJMET FUD
    ↟ SOEJGGJT:PVS'SJFOE
    61(3"%*/(

    View Slide

  36. ↟ (FOFSBUFTB1BUDI#BTFE0O&WFSZ7FSTJPO
    ↟ $PNQBSF5IF%JGGJOUIF#SPXTFS
    ↟ "QQMZ5IF1BUDI5P:PVS#SBODI
    ↟ HJUIVCDPNODVJMMFSZSOEJGG
    SOEJGG

    View Slide

  37. diff --git a/RnDiffApp/package.json b/RnDiffApp/package.json
    index ae545bd ..af81e62 100644
    --- a/RnDiffApp/package.json
    +++ b/RnDiffApp/package.json
    @@ -7,6 +7,6 @@
    },
    "dependencies": {
    "react": "15.3.1",
    - "react-native": "0.36.1"
    + "react-native": "0.37.0"
    }
    }

    View Slide

  38. $44
    *4%*''&3&/5

    View Slide

  39. ↟4VCTFUPG"DUVBM$44"1*
    ↟4UZMF4IFFU$SFBUF

    ↟/P$44"OJNBUJPOT
    ↟/P1SF1SPDFTTPSTMJLF4BTT -FTT

    View Slide

  40. var styles = StyleSheet.create({
    container: {
    borderRadius: 4,
    borderWidth: 0.5,
    borderColor: '#d6d7da',
    }
    });

    View Slide

  41. '-&9#09
    *4%*''&3&/5

    View Slide

  42. '0-,450'0--08
    ↟ /BEFS%BCJU!EBCJU
    ↟ #SFOU7BUOF!OPUCSFOU
    ↟ .JLF(SBCPXTLJ!HSBCCPV
    ↟ 4BUZBKJU4BIPP!TBUZB
    ↟ +BTPO#SPXO!CSPXOJFGFE
    ↟ -FMBOE3JDIBSETPO!JOUFMMJHCBCCMF
    ↟ %FWJO"CCPUU!EFWJOBBCCPUU
    ↟ +BOJD%VQMFTTJT!KBOJDEVQMFTTJT
    ↟ .BUFVT[;BUPSTLJ!NBU[BUPSTLJ
    ↟ 1FUFS1JFLBSD[ZL!QFUFSQNF

    View Slide

  43. 5)"/,4
    !QFUFSQNF
    !QFUFSQNF

    View Slide