Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React Hands-on

React Hands-on

社内若手向けの React のハンズオン資料

Yuta Okada

June 22, 2020
Tweet

More Decks by Yuta Okada

Other Decks in Programming

Transcript

  1. %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
  2. JNQPSU3FBDUGSPNSFBDU DPOTU"QQ3FBDU'VODUJPO$PNQPOFOU \ SFUVSO  EJW I)FMMP 8PSMEI EJW 

     ^ FYQPSUEFGBVMU"QQ OPEF@NPEVMFT QVCMJD JOEFYIUNM TSD "QQUTY JOEFYUTY HJUJHOPSF QBDLBHFMPDLKTPO QBDLBHFKTPO
  3. 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
  4. \ 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
  5. ʜ 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
  6. NPEVMFFYQPSUT\ ʜ EFW4FSWFS\ DPOUFOU#BTFQBUIKPJO @@EJSOBNF EJTU  QPSU  IPU0OMZUSVF

     ^  ʜ ^ OPEF@NPEVMFT QVCMJD JOEFYIUNM TSD "QQUTY JOEFYUTY CBCFMSD HJUJHOPSF QBDLBHFMPDLKTPO QBDLBHFKTPO UTDPOpHKTPO XFCQBDLDPOpHKT
  7. %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
  8. \ ʜ TDSJQUT\ TUBSUOQNSVOCVJMEEFWXFCQBDLEFWTFSWFSNPEFEFWFMPQNFOU  CVJMEEFWOQYXFCQBDLNPEFEFWFMPQNFOUDQQVCMJD EJTU  CVJMEOQYXFCQBDLDQQVCMJD EJTU

    ^  EFQFOEFODJFT\ ʜ  ^  EFW%FQFOEFODJFT\ ʜ  ^ ^ OPEF@NPEVMFT QVCMJD JOEFYIUNM TSD "QQUTY JOEFYUTY CBCFMSD HJUJHOPSF QBDLBHFMPDLKTPO QBDLBHFKTPO UTDPOpHKTPO XFCQBDLDPOpHKT
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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
  14. CPEZ\ NBSHJO ^ OPEF@NPEVMFT QVCMJD JOEFYIUNM TSD DPNQPOFOUT )FBEFSUTY 1JDUVSFUTY

    "QQDTT "QQUTY JOEFYUTY CBCFMSD HJUJHOPSF QBDLBHFMPDLKTPO QBDLBHFKTPO UTDPOpHKTPO XFCQBDLDPOpHKT
  15. ʜ 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
  16. OPEF@NPEVMFT QVCMJD JOEFYIUNM TSD DPNQPOFOUT )FBEFSUTY 1JDUVSFUTY "QQDTT "QQUTY JOEFYUTY

    CBCFMSD HJUJHOPSF QBDLBHFMPDLKTPO QBDLBHFKTPO UTDPOpHKTPO XFCQBDLDPOpHKT
  17. -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
  18. \ TFNJUSVF  TJOHMF2VPUFUSVF  USBJMJOH$PNNBBMM  BSSPX1BSFOTBMXBZT ^ OPEF@NPEVMFT

    QVCMJD JOEFYIUNM TSD DPNQPOFOUT )FBEFSUTY 1JDUVSFUTY "QQDTT "QQUTY JOEFYUTY CBCFMSD FTMJOUSDKT HJUJHOPSF QSFUUJFSSD QBDLBHFMPDLKTPO QBDLBHFKTPO UTDPOpHKTPO XFCQBDLDPOpHKT
  19. \ 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
  20. \ ʜ  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
  21. \ ʜ  PWFSSJEFT< \ pMFT<  UTY>  SVMFT\

    SFBDUQSPQUZQFTP⒎ ^ ^ > ^ OPEF@NPEVMFT QVCMJD JOEFYIUNM TSD DPNQPOFOUT )FBEFSUTY 1JDUVSFUTY "QQDTT "QQUTY JOEFYUTY CBCFMSD FTMJOUSDKT HJUJHOPSF QSFUUJFSSD QBDLBHFMPDLKTPO QBDLBHFKTPO UTDPOpHKTPO XFCQBDLDPOpHKT