Things I Wish I Knew About React Native When I Started

Practical guide to making your React Native experience better :)

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