React Hands-on - Speaker Deck

Slide 1

Slide 1 text

:VUB0LBEB 3FBDU)BOET0O 3F BDU θϩ͔Β࢝ΊΔ41"ੜ׆

Slide 2

Slide 2 text

5-%3 w 3FBDU5ZQF4DSJQU w ϓϩδΣΫτͷ͸͡Ί͔ͨ w ؆୯ͳ3FBDUΞϓϦͷ࡞੒

Slide 3

Slide 3 text

1SFNJTF w )5.-$44+BWB4DSJQUʢ&4Ҏ߱ʣ͕ಡΊΔ w ύοέʔδϚωʔδϟʔΛ࢖ͬͨ͜ͱ͕͋Δ w ϞδϡʔϧόϯυϥʢXFCQBDLʣ΍+4ίϯύΠϥʢ#BCFMʣΛԿͱͳ͘ฉ͍ ͨ͜ͱ͕͋Δ

Slide 4

Slide 4 text

/PUUPEP w ͳͥ3FBDUͳͷ͔ʁ w OQN OPEFͷΠϯετʔϧ w ೉͍ٕ͠ज़ཁૉ

Slide 5

Slide 5 text

8IP*BN :VUB0LBEB 3FBDU3FBDU/BUJWF(SBQI2- #BTFCBMM3VOOJOH5SBJM 1IZTJDT&OHMJTI

Slide 6

Slide 6 text

'JSTUJTTVFPGTUBSUJOH3FBDU

Slide 7

Slide 7 text

ʮ؀ڥߏஙʯ

Slide 8

Slide 8 text

ͦΕɺղܾͰ͖·͢

Slide 9

Slide 9 text

$3"Ͱ͓खܰ؀ڥߏங

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

IUUQTSFBDUKTPSHEPDTDSFBUFBOFXSFBDUBQQIUNM   $SFBUFBOFX3FBDUQSPKFDU OQYDSFBUFSFBDUBQQSFBDUDSBTBNQMFUFNQMBUFUZQFTDSJQU 3VOUIFQSPKFDU ZBSOTUBSU OPEF@NPEVMFT QVCMJD TSD HJUJHOPSF QBDLBHFKTPO 3&"%.&NE UTDPOpHKTPO ZBSOMPDL

Slide 12

Slide 12 text

OPEF@NPEVMFT QVCMJD TSD HJUJHOPSF QBDLBHFKTPO 3&"%.&NE UTDPOpHKTPO ZBSOMPDL

Slide 13

Slide 13 text

5IBU`TJU

Slide 14

Slide 14 text

$SFBUF3FBDU"QQ w 5IF3FBDUUFBNQSJNBSJMZSFDPNNFOETGPSMFBSOJOH3FBDUPS41" w /FFEUPIBWF/PEFBOEOQN w 5IF$3"JODMVEFTBOEIJEFTTPNFDPNQMFYDPOpHVSBUJPOT

Slide 15

Slide 15 text

ຊ౰ʹཧղͰ͖ͯΔʁ

Slide 16

Slide 16 text

εΫϥονͰ؀ڥߏங

Slide 17

Slide 17 text

*OJUJBMJ[FUIFQSPKFDU OQNJOJUZ UPVDIHJUJHOPSF 3FBDU NLEJSQVCMJDTSD UPVDIQVCMJDJOEFYIUNM OQNJOTUBMMTBWFSFBDUSFBDUEPN OPEF@NPEVMFT QVCMJD JOEFYIUNM TSD HJUJHOPSF QBDLBHFMPDLKTPO QBDLBHFKTPO

Slide 18

Slide 18 text

%0$5:1&IUNM IUNM IFBE NFUBDIBSTFU65' NFUB OBNFWJFXQPSU DPOUFOUXJEUIEFWJDFXJEUI JOJUJBMTDBMF TISJOLUPpUOP UJUMF3FBDU4UBSUFSUJUMF IFBE CPEZ EJWJESPPUEJW CPEZ IUNM OPEF@NPEVMFT QVCMJD JOEFYIUNM TSD HJUJHOPSF QBDLBHFMPDLKTPO QBDLBHFKTPO

Slide 19

Slide 19 text

$SFBUFUIFJOEFYpMF UPVDITSDJOEFYUTY UPVDITSD"QQUTY OPEF@NPEVMFT QVCMJD JOEFYIUNM TSD "QQUTY JOEFYUTY HJUJHOPSF QBDLBHFMPDLKTPO QBDLBHFKTPO

Slide 20

Slide 20 text

JNQPSU3FBDUGSPNSFBDU JNQPSU3FBDU%0.GSPNSFBDUEPN JNQPSU"QQGSPN"QQ 3FBDU%0.SFOEFS "QQ EPDVNFOUHFU&MFNFOU#Z*E SPPU OPEF@NPEVMFT QVCMJD JOEFYIUNM TSD "QQUTY JOEFYUTY HJUJHOPSF QBDLBHFMPDLKTPO QBDLBHFKTPO

Slide 21

Slide 21 text

JNQPSU3FBDUGSPNSFBDU DPOTU"QQ3FBDU'VODUJPO$PNQPOFOU \ SFUVSO EJW I)FMMP 8PSMEI EJW ^ FYQPSUEFGBVMU"QQ OPEF@NPEVMFT QVCMJD JOEFYIUNM TSD "QQUTY JOEFYUTY HJUJHOPSF QBDLBHFMPDLKTPO QBDLBHFKTPO

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

8FCQBDL OQNJOTUBMMTBWFEFWXFCQBDLXFCQBDLDMJXFCQBDLEFWTFSWFSTUZMFMPBEFS DTTMPBEFSCBCFMMPBEFS UPVDIXFCQBDLDPOpHKT OPEF@NPEVMFT QVCMJD JOEFYIUNM TSD "QQUTY JOEFYUTY HJUJHOPSF QBDLBHFMPDLKTPO QBDLBHFKTPO XFCQBDLDPOpHKT

Slide 24

Slide 24 text

DPOTUQBUISFRVJSF QBUI DPOTUXFCQBDLSFRVJSF XFCQBDL NPEVMFFYQPSUT\ FOUSZTSDJOEFYUTY NPEFEFWFMPQNFOU NPEVMF\ SVMFT<> ^ SFTPMWF\FYUFOTJPOT<UT UTY KT>^ PVUQVU\ QBUIQBUISFTPMWF @@EJSOBNF EJTU pMFOBNFCVOEMFKT ^ QMVHJOT ^ OPEF@NPEVMFT QVCMJD JOEFYIUNM TSD "QQUTY JOEFYUTY HJUJHOPSF QBDLBHFMPDLKTPO QBDLBHFKTPO XFCQBDLDPOpHKT

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

#BCFM OQNJOTUBMMTBWFEFW!CBCFMDPSF!CBCFMDMJ!CBCFMQSFTFUFOW!CBCFM QSFTFUSFBDU UPVDICBCFMSD OPEF@NPEVMFT QVCMJD JOEFYIUNM TSD "QQUTY JOEFYUTY CBCFMSD HJUJHOPSF QBDLBHFMPDLKTPO QBDLBHFKTPO XFCQBDLDPOpHKT

Slide 27

Slide 27 text

\ QSFTFUT<!CBCFMFOW !CBCFMQSFTFUSFBDU> ^ OPEF@NPEVMFT QVCMJD JOEFYIUNM TSD "QQUTY JOEFYUTY CBCFMSD HJUJHOPSF QBDLBHFMPDLKTPO QBDLBHFKTPO XFCQBDLDPOpHKT

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

5ZQF4DSJQU OQNJOTUBMMTBWFEFWUZQFTDSJQUUTMPBEFS OQNJOTUBMMTBWFEFW!UZQFTSFBDU!UZQFTSFBDUEPN OQYUTDJOJU OPEF@NPEVMFT QVCMJD JOEFYIUNM TSD "QQUTY JOEFYUTY CBCFMSD HJUJHOPSF QBDLBHFMPDLKTPO QBDLBHFKTPO UTDPOpHKTPO XFCQBDLDPOpHKT

Slide 30

Slide 30 text

\ DPNQJMFS0QUJPOT\ UBSHFUFT NPEVMFDPNNPOKT KTYSFBDU TPVSDF.BQUSVF PVU%JSEJTU TUSJDUUSVF OP*NQMJDJU"OZGBMTF FT.PEVMF*OUFSPQUSVF TPVSDF3PPUTSD GPSDF$POTJTUFOU$BTJOH*O'JMF/BNFTUSVF ^ JODMVEF<TSD> ^ OPEF@NPEVMFT QVCMJD JOEFYIUNM TSD "QQUTY JOEFYUTY CBCFMSD HJUJHOPSF QBDLBHFMPDLKTPO QBDLBHFKTPO UTDPOpHKTPO XFCQBDLDPOpHKT

Slide 31

Slide 31 text

࠶ͼXFCQBDLDPOGJHKT

Slide 32

Slide 32 text

ʜ NPEVMF\ SVMFT< \ UFTUa KTcKTY FYDMVEFOPEF@NPEVMFT MPBEFSCBCFMMPBEFS ^ \ UFTUaUTY VTF<UTMPBEFS> ^ \ UFTUaDTT VTF<TUZMFMPBEFS DTTMPBEFS> ^ > ^ ʜ OPEF@NPEVMFT QVCMJD JOEFYIUNM TSD "QQUTY JOEFYUTY CBCFMSD HJUJHOPSF QBDLBHFMPDLKTPO QBDLBHFKTPO UTDPOpHKTPO XFCQBDLDPOpHKT

Slide 33

Slide 33 text

NPEVMFFYQPSUT\ ʜ EFW4FSWFS\ DPOUFOU#BTFQBUIKPJO @@EJSOBNF EJTU QPSU IPU0OMZUSVF ^ ʜ ^ OPEF@NPEVMFT QVCMJD JOEFYIUNM TSD "QQUTY JOEFYUTY CBCFMSD HJUJHOPSF QBDLBHFMPDLKTPO QBDLBHFKTPO UTDPOpHKTPO XFCQBDLDPOpHKT

Slide 34

Slide 34 text

JOEFYIUNM

Slide 35

Slide 35 text

%0$5:1&IUNM IUNM IFBE NFUBDIBSTFU65' NFUB OBNFWJFXQPSU DPOUFOUXJEUIEFWJDFXJEUI JOJUJBMTDBMF TISJOLUPpUOP UJUMF3FBDU4UBSUFSUJUMF IFBE CPEZ EJWJElSPPUEJW TDSJQUTSDCVOEMFKTTDSJQU CPEZ IUNM OPEF@NPEVMFT QVCMJD JOEFYIUNM TSD "QQUTY JOEFYUTY CBCFMSD HJUJHOPSF QBDLBHFMPDLKTPO QBDLBHFKTPO UTDPOpHKTPO XFCQBDLDPOpHKT

Slide 36

Slide 36 text

QBDLBHFKTPO

Slide 37

Slide 37 text

\ ʜ TDSJQUT\ TUBSUOQNSVOCVJMEEFWXFCQBDLEFWTFSWFSNPEFEFWFMPQNFOU CVJMEEFWOQYXFCQBDLNPEFEFWFMPQNFOUDQQVCMJDEJTU CVJMEOQYXFCQBDLDQQVCMJDEJTU ^ EFQFOEFODJFT\ ʜ ^ EFW%FQFOEFODJFT\ ʜ ^ ^ OPEF@NPEVMFT QVCMJD JOEFYIUNM TSD "QQUTY JOEFYUTY CBCFMSD HJUJHOPSF QBDLBHFMPDLKTPO QBDLBHFKTPO UTDPOpHKTPO XFCQBDLDPOpHKT

Slide 38

Slide 38 text

3VOUIFQSPKFDU OQNSVOTUBSU OPEF@NPEVMFT QVCMJD JOEFYIUNM TSD "QQUTY JOEFYUTY CBCFMSD HJUJHOPSF QBDLBHFMPDLKTPO QBDLBHFKTPO UTDPOpHKTPO XFCQBDLDPOpHKT

Slide 39

Slide 39 text

$POHSBUVMBUJPOʜ

Slide 40

Slide 40 text

΋͏͢͜͠ΞϓϦͬΆ͘

Slide 41

Slide 41 text

6TFBEFTJHOUFNQMBUF OQNJOTUBMMTBWF!NBUFSJBMVJDPSF UPVDITSD1JDUVSFUTY OPEF@NPEVMFT QVCMJD JOEFYIUNM TSD "QQUTY JOEFYUTY 1JDUVSFUTY CBCFMSD HJUJHOPSF QBDLBHFMPDLKTPO QBDLBHFKTPO UTDPOpHKTPO XFCQBDLDPOpHKT

Slide 42

Slide 42 text

JNQPSU\#VUUPO 5ZQPHSBQIZ^GSPN!NBUFSJBMVJDPSF JNQPSU3FBDUGSPNSFBDU JNQPSU1JDUVSFGSPN1JDUVSF DPOTU"QQ3FBDU'VODUJPO$PNQPOFOU \ SFUVSO 5ZQPHSBQIZWBSJBOUI1JDUVSF4IPXSPPN5ZQPHSBQIZ 1JDUVSF #VUUPOWBSJBOUDPOUBJOFEDPMPSQSJNBSZ 4IPX #VUUPO ^ FYQPSUEFGBVMU"QQ OPEF@NPEVMFT QVCMJD JOEFYIUNM TSD "QQUTY JOEFYUTY 1JDUVSFUTY CBCFMSD HJUJHOPSF QBDLBHFMPDLKTPO QBDLBHFKTPO UTDPOpHKTPO XFCQBDLDPOpHKT

Slide 43

Slide 43 text

JNQPSU3FBDUGSPNSFBDU DPOTU1JDUVSF3FBDU'VODUJPO$PNQPOFOU \ DPOTUVSMIUUQTTPVSDFVOTQMBTIDPNSBOEPNY SFUVSO EJW JNH TSD\VSM^ TUZMF\\ XJEUIWX IFJHIUWI ^^ EJW ^ FYQPSUEFGBVMU1JDUVSF OPEF@NPEVMFT QVCMJD JOEFYIUNM TSD "QQUTY JOEFYUTY 1JDUVSFUTY CBCFMSD HJUJHOPSF QBDLBHFMPDLKTPO QBDLBHFKTPO UTDPOpHKTPO XFCQBDLDPOpHKT

Slide 44

Slide 44 text

OPEF@NPEVMFT QVCMJD JOEFYIUNM TSD "QQUTY JOEFYUTY 1JDUVSFUTY CBCFMSD HJUJHOPSF QBDLBHFMPDLKTPO QBDLBHFKTPO UTDPOpHKTPO XFCQBDLDPOpHKT

Slide 45

Slide 45 text

JNQPSU\"QQ#BS #VUUPO 5PPMCBS 5ZQPHSBQIZ^GSPN!NBUFSJBMVJDPSF JNQPSU3FBDUGSPNSFBDU JNQPSU1JDUVSFGSPN1JDUVSF DPOTU"QQ3FBDU'VODUJPO$PNQPOFOU \ SFUVSO "QQ#BSQPTJUJPOTUBUJD 5PPMCBS 5ZQPHSBQIZWBSJBOUI1JDUVSF4IPXSPPN5ZQPHSBQIZ 5PPMCBS "QQ#BS ʜ OPEF@NPEVMFT QVCMJD JOEFYIUNM TSD "QQUTY JOEFYUTY 1JDUVSFUTY CBCFMSD HJUJHOPSF QBDLBHFMPDLKTPO QBDLBHFKTPO UTDPOpHKTPO XFCQBDLDPOpHKT

Slide 46

Slide 46 text

OPEF@NPEVMFT QVCMJD JOEFYIUNM TSD "QQUTY JOEFYUTY 1JDUVSFUTY CBCFMSD HJUJHOPSF QBDLBHFMPDLKTPO QBDLBHFKTPO UTDPOpHKTPO XFCQBDLDPOpHKT

Slide 47

Slide 47 text

ίϯϙʔωϯτԽ͢Δ

Slide 48

Slide 48 text

NLEJSTSDDPNQPOFOUT NPWFTSD1JDUVSFUTYTSDDPNQPOFOUT UPVDITSDDPNQPOFOUT)FBEFSUTY OPEF@NPEVMFT QVCMJD JOEFYIUNM TSD DPNQPOFOUT )FBEFSUTY 1JDUVSFUTY "QQUTY JOEFYUTY CBCFMSD HJUJHOPSF QBDLBHFMPDLKTPO QBDLBHFKTPO UTDPOpHKTPO XFCQBDLDPOpHKT

Slide 49

Slide 49 text

JNQPSU\"QQ#BS 5PPMCBS 5ZQPHSBQIZ^GSPN!NBUFSJBMVJDPSF JNQPSU3FBDUGSPNSFBDU DPOTU)FBEFS3FBDU'VODUJPO$PNQPOFOU \ SFUVSO "QQ#BSQPTJUJPOTUBUJD 5PPMCBS 5ZQPHSBQIZWBSJBOUI1JDUVSF4IPXSPPN5ZQPHSBQIZ 5PPMCBS "QQ#BS ^ FYQPSUEFGBVMU)FBEFS OPEF@NPEVMFT QVCMJD JOEFYIUNM TSD DPNQPOFOUT )FBEFSUTY 1JDUVSFUTY "QQUTY JOEFYUTY CBCFMSD HJUJHOPSF QBDLBHFMPDLKTPO QBDLBHFKTPO UTDPOpHKTPO XFCQBDLDPOpHKT

Slide 50

Slide 50 text

DPOTU1JDUVSF3FBDU'VODUJPO$PNQPOFOU \ ʜ SFUVSO (SJEDPOUBJOFSBMJHO*UFNTDFOUFSKVTUJGZDFOUFS (SJETUZMF\\QBEEJOH^^ JNH TSD\VSM^ TUZMF\\ XJEUIWX IFJHIUWX CPSEFSTPMJEWX⒎G CPY4IBEPXWXWX ^^ (SJE (SJE ^ OPEF@NPEVMFT QVCMJD JOEFYIUNM TSD DPNQPOFOUT )FBEFSUTY 1JDUVSFUTY "QQUTY JOEFYUTY CBCFMSD HJUJHOPSF QBDLBHFMPDLKTPO QBDLBHFKTPO UTDPOpHKTPO XFCQBDLDPOpHKT

Slide 51

Slide 51 text

CPEZ\ NBSHJO ^ OPEF@NPEVMFT QVCMJD JOEFYIUNM TSD DPNQPOFOUT )FBEFSUTY 1JDUVSFUTY "QQDTT "QQUTY JOEFYUTY CBCFMSD HJUJHOPSF QBDLBHFMPDLKTPO QBDLBHFKTPO UTDPOpHKTPO XFCQBDLDPOpHKT

Slide 52

Slide 52 text

ʜ DPOTU"QQ3FBDU'VODUJPO$PNQPOFOU \ SFUVSO )FBEFS 1JDUVSF (SJEDPOUBJOFSBMJHO*UFNTDFOUFSKVTUJGZDFOUFS #VUUPO WBSJBOUlDPOUBJOFE DPMPSlQSJNBSZz PO$MJDL\ MPDBUJPOSFMPBE ^ 4IPX #VUUPO (SJE ʜ OPEF@NPEVMFT QVCMJD JOEFYIUNM TSD DPNQPOFOUT )FBEFSUTY 1JDUVSFUTY "QQDTT "QQUTY JOEFYUTY CBCFMSD HJUJHOPSF QBDLBHFMPDLKTPO QBDLBHFKTPO UTDPOpHKTPO XFCQBDLDPOpHKT

Slide 53

Slide 53 text

OPEF@NPEVMFT QVCMJD JOEFYIUNM TSD DPNQPOFOUT )FBEFSUTY 1JDUVSFUTY "QQDTT "QQUTY JOEFYUTY CBCFMSD HJUJHOPSF QBDLBHFMPDLKTPO QBDLBHFKTPO UTDPOpHKTPO XFCQBDLDPOpHKT

Slide 54

Slide 54 text

͜ͷઌͷల๬ w 63-Ͱը໘ભҠɹˠSFBDUSPVUFSEPN w ঢ়ଶ؅ཧɹˠ)PPLT3FEVY w ίϯϙʔωϯτ؅ཧɹˠ"UPNJD%FTJHO w ϑΥʔϜ؅ཧɹˠ'PSNJLZVQ w -JOUFSͱ'PSNBUUFSɹˠFTMJOUQSFUUJFS w ςετ͍ͨ͠ɹˠ4UPSZCPPL+FTU

Slide 55

Slide 55 text

"QQFOEJY

Slide 56

Slide 56 text

։ൃΛࢧԉ͢Δπʔϧ

Slide 57

Slide 57 text

-JOUFSBOE'PSNBUUFS OQNJOTUBMMTBWFEFWFTMJOUQSFUUJFSFTMJOUDPOpHQSFUUJFSFTMJOUQMVHJO QSFUUJFSFTMJOUMPBEFS OQYFTMJOUJOJU UPVDIQSFUUJFSS OPEF@NPEVMFT QVCMJD JOEFYIUNM TSD DPNQPOFOUT )FBEFSUTY 1JDUVSFUTY "QQDTT "QQUTY JOEFYUTY CBCFMSD FTMJOUSDKT HJUJHOPSF QSFUUJFSSD QBDLBHFMPDLKTPO QBDLBHFKTPO UTDPOpHKTPO XFCQBDLDPOpHKT

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

\ TFNJUSVF TJOHMF2VPUFUSVF USBJMJOH$PNNBBMM BSSPX1BSFOTBMXBZT ^ OPEF@NPEVMFT QVCMJD JOEFYIUNM TSD DPNQPOFOUT )FBEFSUTY 1JDUVSFUTY "QQDTT "QQUTY JOEFYUTY CBCFMSD FTMJOUSDKT HJUJHOPSF QSFUUJFSSD QBDLBHFMPDLKTPO QBDLBHFKTPO UTDPOpHKTPO XFCQBDLDPOpHKT

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

\ FOW\ CSPXTFSUSVF FTUSVF OPEFUSVF ^ FYUFOET<QMVHJOSFBDUSFDPNNFOEFE HPPHMF QSFUUJFS> HMPCBMT\ "UPNJDTSFBEPOMZ 4IBSFE"SSBZ#V⒎FSSFBEPOMZ ^ QBSTFS!UZQFTDSJQUFTMJOUQBSTFS ʜ ^ OPEF@NPEVMFT QVCMJD JOEFYIUNM TSD DPNQPOFOUT )FBEFSUTY 1JDUVSFUTY "QQDTT "QQUTY JOEFYUTY CBCFMSD FTMJOUSDKT HJUJHOPSF QSFUUJFSSD QBDLBHFMPDLKTPO QBDLBHFKTPO UTDPOpHKTPO XFCQBDLDPOpHKT

Slide 62

Slide 62 text

\ ʜ QBSTFS0QUJPOT\ FDNB'FBUVSFT\ KTYUSVF ^ FDNB7FSTJPO TPVSDF5ZQFNPEVMF ^ QMVHJOT<SFBDU !UZQFTDSJQUFTMJOU QSFUUJFS> SVMFT\ QSFUUJFSQSFUUJFSFSSPS ^ ʜ ^ OPEF@NPEVMFT QVCMJD JOEFYIUNM TSD DPNQPOFOUT )FBEFSUTY 1JDUVSFUTY "QQDTT "QQUTY JOEFYUTY CBCFMSD FTMJOUSDKT HJUJHOPSF QSFUUJFSSD QBDLBHFMPDLKTPO QBDLBHFKTPO UTDPOpHKTPO XFCQBDLDPOpHKT

Slide 63

Slide 63 text

\ ʜ PWFSSJEFT< \ pMFT<UTY> SVMFT\ SFBDUQSPQUZQFTP⒎ ^ ^ > ^ OPEF@NPEVMFT QVCMJD JOEFYIUNM TSD DPNQPOFOUT )FBEFSUTY 1JDUVSFUTY "QQDTT "QQUTY JOEFYUTY CBCFMSD FTMJOUSDKT HJUJHOPSF QSFUUJFSSD QBDLBHFMPDLKTPO QBDLBHFKTPO UTDPOpHKTPO XFCQBDLDPOpHKT