React Hands-on

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

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

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

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

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

'JSTUJTTVFPGTUBSUJOH3FBDU

ʮ؀ڥߏஙʯ

ͦΕɺղܾͰ͖·͢

$3"Ͱ͓खܰ؀ڥߏங

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

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

5IBU`TJU

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

ຊ౰ʹཧղͰ͖ͯΔʁ

εΫϥονͰ؀ڥߏங

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

%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

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

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

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

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

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

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

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

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

\ 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

࠶ͼXFCQBDLDPOGJHKT

ʜ 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

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

JOEFYIUNM

%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

QBDLBHFKTPO

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

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

$POHSBUVMBUJPOʜ

΋͏͢͜͠ΞϓϦͬΆ͘

6TFBEFTJHOUFNQMBUF OQNJOTUBMMTBWF!NBUFSJBMVJDPSF UPVDITSD1JDUVSFUTY OPEF@NPEVMFT QVCMJD JOEFYIUNM TSD "QQUTY JOEFYUTY 1JDUVSFUTY

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

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

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

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

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

ίϯϙʔωϯτԽ͢Δ

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

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

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

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

ʜ 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

OPEF@NPEVMFT QVCMJD JOEFYIUNM TSD DPNQPOFOUT )FBEFSUTY 1JDUVSFUTY "QQDTT "QQUTY JOEFYUTY

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

"QQFOEJY

։ൃΛࢧԉ͢Δπʔϧ

-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

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

\ 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

\ ʜ 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

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

React Hands-on

React Hands-on

More Decks by Yuta Okada

Other Decks in Programming

Featured

Transcript