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&3
   1*&,"3$;:,
   !QFUFSQNF
2. 
   1*&
   ↟$"3
   ↟$)*$, ↟ 71
   1SPEVDU
   HPCPPUMFSDPN
   ↟ 3FBDU
   /BUJWF
   3BEJP
   ↟ 4QFBLFS
   ↟ t&OUSFQSFOVFSu !QFUFSQNF !QFUFSQNF
3. ↟9BNBSJO
   YBNBSJODPN
   ↟#VJME
   /BUJWF
   "OESPJE
   J04
   .BD
   BQQT
   VTJOH
   $
   ↟.BUVSF
   BOE
   QFSGPSNBOU
   QMBUGPSN
   ↟#BDLFE
   #Z
   .JDSPTPGU
   ↟/BUJWF
   4DSJQU
   OBUJWFTDSJQUPSH
   ↟#VJMU
   GPS
   "OHVMBS
   5ZQF4DSJQU
   PS
   +BWBTDSJQU
   ↟8SJUF
   PODF
   SVO
   FWFSZXIFSF
   ↟#BDLFE
   CZ
   5FMFSJL $0.1&5*5034
4. 3&"%
   5)&
   %0$4
5. IUUQTGBDFCPPLHJUIVCJPSFBDUOBUJWF
7. 3&"%
   5)&
   3&-&"4&
   /05&4
13. '"/5"45*$
    3&4063$&4 ↟ NBLFJUPQFODPN
    ↟ '#T
    '
    $POGFSFODF
    "QQ
    GFBUVSJOH
    3/
    3FEVY
    (SBQI2-
    'MPX
    ↟ SFBDUOBUJWFFYQSFTTDPN
    ↟ 6QUPEBUF
    HVJEF
    GVMMMFOHUI
    CFHJOOFST
    HVJEF
    ↟ 3FBDU
    /BUJWF
    'VOEBNFOUBMT
    !
    FHHIFBEJP
    ↟ 7JEFP
    HVJEF
    CZ
    5ZMFS
    .D(JOOJT
14. '"/5"45*$
    3&4063$&4 ↟ SFBDUOBWJHBUJPOPSH
    ↟ "
    TFSJFT
    PG
    HVJEFT
    GSPN
    UIF
    GPMLT
    UIBU
    CVJMU
    UIF
    OFX
    /BWJHBUJPO
    MJCSBSZ
    ↟ -FBSOJOH
    3FBDU
    /BUJWF
    #PPL
    ↟ "
    QSBDUJDBM
    JOUSPEVDUJPO
    CZ
    #POOJF
    &JTFONBO
    GSPN
    5XJUUFS
15. 3&"$5
    /"5*7&
    
    6#&3 IUUQXXXSFBDUOBUJWFFYQSFTTDPNVCFS
16. +0*/
    3&"$5*'-69
    0/
    %*4$03% SFBDUJGMVYDPN
17. 6*
    &91-03&3 (PPHMF
    t3FBDU
    /BUJWF
    6*&YQMPSFS
    (JUIVCu ↟$PNQPOFOU
    ,JUDIFO
    4JOL
    ↟&BTZ
    UP
    &YQFSJNFOU
    8JUI
    ↟-FBET
    UP
    0UIFS
    (SFBU
    &YBNQMFT
    5PP
18. 6*
    &91-03&3
19. ,&&1
    :063
    /"5*7&
    "11
    "%%
    3&"$5
    /"5*7&
    50
    *5 IUUQTFOHJOFFSJOHJOTUBHSBNDPN ↟ *ODSFNFOUBM
    6QEBUFT
    '58
    ↟ 4FF
    JG
    :PVSF
    5SVMZ
    *OUP
    JU
    ↟ (FU
    $MPTFS
    XJUI
    :PVS
    /BUJWF
    5FBN
20. #0*-&31-"5&4
    
    
    (&55*/(
    45"35&% 410*-&3
    %0/5
    
    64&
    0/&
    +645
    :&5
21. #0*-&31-"5&
    1304 ↟ 1SPKFDU
    4FUVQ
    JT
    UJNF
    DPOTVNJOH
    ↟ 3FEVY
    /BWJHBUJPO
    %BUB
    1FSTJTUFODF
    /FUXPSL
    $BMMT
    j
    ↟ -BSHF
    $PNNVOJUZ
    PG
    $POUSJCVUPST
    ↟ .BLFT
    JU
    FBTZ
    UP
    HFU
    IFMQ
    BOE
    VOEFSTUBOE
    EFDJTJPOT
    WJB
    13T
    ↟ $PNQMFY
    5FDI
    8PSLT
    JO
    )BSNPOZ
    ↟ /PU
    BMM
    TFUVQ
    JT
    FBTZ
    UP
    DPOGJHVSF
22. #0*-&31-"5&
    $0/4 ↟ .BHJD
    ↟ *G
    ZPV
    EPOU
    VOEFSTUBOE
    UIF
    UFDI
    DIBOHJOH
    BOZUIJOH
    
    OJHIUNBSF
    ↟ 0QJOJPOBUFE
    ↟ :PV
    NJHIU
    OPU
    MJLF
    4BHBT
    PS
    5IVOLT
    PS
    $44*O+4
    ↟ "CTUSBDUJPOT
    %POU
    $PWFS
    FWFSZ
    6TFDBTF
    ↟ :PVSF
    UIF
    POMZ
    POF
    UIBU
    VOEFSTUBOET
    BMM
    UIF
    SFRVJSFNFOUT
23. 1016-"3
    #0*-&31-"5&4 ↟*HOJUF
    HJUIVCDPNJOGJOJUFSFEJHOJUF
    ↟4OPXGMBLF
    HJUIVCDPNCBSUPOIBNNPOETOPXGMBLF
    ↟1FQQFSPOJ
    HFUQFQQFSPOJDPN
    ↟/BUJWF#BTF
    OBUJWFCBTFJP
24. 1-"/
    ")&"%
25. ↟.BLF
    B
    #MVFQSJOU
    ↟5FTU
    $PNQPOFOUT
    "IFBE
    0G
    5JNF
    ↟4FBSDI
    *TTVFT
    GPS
    4JNJMBS
    6TF
    $BTFT
26. .",&
    1"5)4
    '6/ DPOTU
    )FMMP*NBHF
    
    SFRVJSF JNBHFTIFMMPQOH  #&'03& DPOTU
    )FMMP*NBHF
    
    SFRVJSF !JNBHFTIFMMPQOH  "'5&3
27. app |—assets |—images |—hello-world.png |—index.js |—package.json |—components |—utilities |—index.js |—package.json |—build-fetch.js |—format-currency.js
28. const IMAGES = { helloWorld: require(‘./hello-world.png’), backButton: require(‘./back-button.png’), }; module.exports = IMAGES; JNBHFTJOEFYKT
29. { “name”: “@images”, “main”: “index.js” } JNBHFTQBDLBHFKTPO
30. export buildFetch from ‘./build-fetch’; export formatCurrency from ‘./format-currency’; VUJMJUJFTJOEFYKT
31. import buildFetch from ‘./build-fetch’; import formatCurrency from ‘./format-currency’; export const BuildFetch = buildFetch; export const FormatCurrency = formatCurrency; VUJMJUJFTJOEFYKT
32. /"7*("5*0/ 8&#
    
    /"5*7&
33. /"7*("5*0/ ↟ 4UBDL
    /BWJHBUJPO
    ↟ "
    TUBDL
    PG
    SPVUFT
    UIBU
    ZPV
    QVTI
    
    QPQ
    
    ↟ 5BC
    /BWJHBUJPO
    ↟ J04
    5BC
    #BS
    ↟ %SBXFS
    /BWJHBUJPO
    ↟ "OESPJE
    0GG$BOWBT
    ↟ .PEBMT
    ↟ 'SBNFXPSLTQFDJGJD
    &BTZ
    UP
    ,FFQ
    0VU
    PG
 UIF
    3PVUFS
    "MUPHFUIFS
34. ↟ /VDMJEF
    ↟ '#
    1MVHJO
    #VJMU
    PO
    UPQ
    PG
    "UPN
    UP
    VOJGZ
    'BDFCPPL
    %FWFMPQFST
    8PSLGMPXT
    ↟ OVDMJEFJP
    ↟ &YQPOFOU
    9%&
    &YUFOEFE
    %FWFMPQNFOU
    &OWJSPONFOU
    ↟ "CTUSBDUJPO
    0O
    5PQ
    0G
    3FBDU
    /BUJWF
    ↟ HFUFYQPOFOUDPN
    ↟ %&$0
    *%&
    ↟ 4LFUDITUZMF
    (6*
    ↟ EFDPTPGUXBSFDPN %&7&-01&3
    &91&3*&/$&
35. ↟ 3FBE
    UIF
    3FMFBTF
    /PUFT
    ↟ $SFBUF
    B
    /FX
    #SBODI
    ↟ #F
    1SFQBSFE
    5P
    /VLF
    OPEF@NPEVMFT
    CVJMET
    FUD
    ↟ SOEJGG
    JT
    :PVS
    'SJFOE 61(3"%*/(
36. ↟ (FOFSBUFT
    B
    1BUDI
    #BTFE
    0O
    &WFSZ
    7FSTJPO
    ↟ $PNQBSF
    5IF
    %JGG
    JO
    UIF
    #SPXTFS
    ↟ "QQMZ
    5IF
    1BUDI
    5P
    :PVS
    #SBODI
    ↟ HJUIVCDPNODVJMMFSZSOEJGG SOEJGG
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" } }
38. $44
    
    *4
    %*''&3&/5
39. ↟4VCTFU
    PG
    "DUVBM
    $44
    "1*
    ↟4UZMF4IFFU$SFBUF
    ↟/P
    $44
    "OJNBUJPOT
    ↟/P
    1SF1SPDFTTPST
    MJLF
    4BTT
    -FTT
40. var styles = StyleSheet.create({ container: { borderRadius: 4, borderWidth: 0.5, borderColor: '#d6d7da', } });
41. '-&9#09
    
    *4
    %*''&3&/5
42. '0-,4
    50
    '0--08 ↟ /BEFS
    %BCJU
    !EBCJU
    ↟ #SFOU
    7BUOF
    !OPUCSFOU
    ↟ .JLF
    (SBCPXTLJ
    !HSBCCPV
    ↟ 4BUZBKJU
    4BIPP
    !TBUZB
    ↟ +BTPO
    #SPXO
    !CSPXOJFGFE ↟ -FMBOE
    3JDIBSETPO
    !JOUFMMJHCBCCMF
    ↟ %FWJO
    "CCPUU
    !EFWJOBBCCPUU
    ↟ +BOJD
    %VQMFTTJT
    !KBOJDEVQMFTTJT
    ↟ .BUFVT[
    ;BUPSTLJ
    !NBU[BUPSTLJ
    ↟ 1FUFS
    1JFLBSD[ZL
    !QFUFSQNF
43. 5)"/,4 !QFUFSQNF !QFUFSQNF