新規Railsアプリに小さく導入するReact

by Takaya Deguchi

Slide 1

Slide 1 text

倜鋉3BJMT،فٔח㼭ֻׁ㼪Ⰵׅ׷ EPUT3FBDU⹈䓼⠓ React !EFYU#JU+PVSOFZ *OD

Slide 2

Slide 2 text

כׄ׭ת׃ג ⳿〡顜⛲ UX Engineer / Product Manager 吳䒭⠓爡ؽحزآٍ٦ص٦ (@dex1t) 俱椚؝ىُصذ؍ 爡ⰻ䞔㜠Ⱏ剣خ٦ٕ,JCFMB _ _ فٗتؙزوطآًٝزװِ٦ؠ٦⡤꿀ך鏣鎘ָ⚺ז䕵ⶴկ ؎ٝؿַٓ׵ؿٗٝزؒٝسתד䗳銲ח䘔ׄג⡦ד׮װ׶תׅկ

Slide 3

Slide 3 text

荈爡؟٦ؽأ✲噟䪮遭곁㉏噟䪮遭׾欰ַ׃׋穈籼בֻ׶׾ 佄䴂׃גְתׅ  8FˏSFIJSJOH IUUQTCJUKPVSOFZDPN

Slide 4

Slide 4 text

荈爡؟٦ؽأ✲噟䪮遭곁㉏噟䪮遭׾欰ַ׃׋穈籼בֻ׶׾ 佄䴂׃גְתׅ  ⯋$爡䪮遭鿇ꞿ $爡倜⼼劍欰 ⯋$爡ꟼ鸬⠓爡 ⯋$爡Ꟛ涪㛇湍 ⯋$爡رؠ؎ش٦ 8FˏSFIJSJOH IUUQTCJUKPVSOFZDPN

Slide 5

Slide 5 text

⯓剢ذ؍ؠ٦؟؎ز׾ⰕꟚ׃ת׃׋ IUUQTLJCFMB

Slide 6

Slide 6 text

,JCFMBה3FBDU 'FFEװ5SFF6*ծ&EJUPSזו㼭⚥鋉垷ך3FBDU$PNQPOFOUך꧊さ⡤

Slide 7

Slide 7 text

,JCFMBך䪮遭أةحؙ ˖ 3BJMT3FBDUך䎃㢙ך㹀殢䠬֮׷圓䧭 ˖ &4 #BCFM 8FCQBDL OQN ˖ ꬊ41" 4JOHMF1BHF"QQMJDBUJPO ךסאֲך3BJMT،فٔ ˖ K2VFSZ׮欽岀欽ꆀ׾㸚׏ג⢘欽

Slide 8

Slide 8 text

ֿ׸ַ׵ֶ鑧ׅ׷ֿה ˖ 倜鋉فٗتؙزך甧׍♳־ה䎂遤׃גծ3FBDU׾ וך״ֲח㼪Ⰵ׃גְ׏׋ַ ˖ 剑ⴱַ׵㸣樴׾湡䭷ׁזְ ˖ 饥׶זָ׵䖚ղח葺ֻׅ׷

Slide 9

Slide 9 text

黈׷ֿה䎃㢙˘

Slide 10

Slide 10 text

䎃㢙 ˖ ,JCFMBךꟚ涪ָ劤呓⻉ ˖ 䔲儗ծؒٝآص،כせ荈ⴓה爡ꞿ ˖ 3BJMTךאְדח$PFF4DSJQU׾剅ֻ玎䏝ך穗꿀⦼ ؿٗٝزؒٝس✲䞔ח毙ַ׏׋ ˖ ؟٦ؽأ涸חؒر؍ةך⡲׶鴥׫כ䗳荚 ˖ 3FBDU㼪Ⰵך堣麊넝ת׷

Slide 11

Slide 11 text

3BJMT8BZWT.PEFSO+48BZ SBJMTBTTFUT 4QSPDLFUT SBLF (VMQ #PXFS XFCQBDL

Slide 12

Slide 12 text

鼅䫛肇֮׶ֺׅ鳞ְ㉏겗 SBJMTBTTFUT 4QSPDLFUT SBLF (VMQ #PXFS XFCQBDL

Slide 13

Slide 13 text

1IBTFת׆כ3FBDU׾⢪ְ㨣׭׷

Slide 14

Slide 14 text

1IBTFך湡涸 ˖ ⡦כה׮֮׸3FBDU׾⢪׏ג׫׷ ˖ ٌتٝ+4涸זكأزז圓䧭כ湡䭷ׁזְ ˖ ה׶ִ֮׆⢪ֲ׌ֽ

Slide 15

Slide 15 text

ֿֿדװ׏׋ֿה ˖ SFBDUSBJMT׾㼪Ⰵׅ׷ ˖ 3BJMT،فٔד3FBDU⢪ֲ׌ֽז׵馄ֶ䩛鯪 ˖ SFBDU@VKTָ㖑㄂ח⤑ⵃ ˖ &4כת׌⢪׻זְ׃ծٓ؎ـٓٔ盖椚׮#VOEMFS ˖ 3FBDUDSFBUF$MBTTךⵃ欽 3FBDU涸חכꬊ䱿㤺ך崧׸ var CommentBox = React.createClass({ render: function() { return (

Hello, world!

); } });

Slide 16

Slide 16 text

1IBTFך穠卓 ˖ 3FBDUװ׏גְֽ׉ֲז孡ָׅ׷ ˖ 爡ⰻד㉔褏׃׋׶ծⰅꟌ3FBDU׾铣׿׌׶ ˖ 如ך妜実ָ欰ת׸׷ ˖ չSBJMTBTTFUT䰍ג׋ְպչ&4אְַ׋ְպ

Slide 17

Slide 17 text

1IBTF.PEFSO+4PO3BJMT

Slide 18

Slide 18 text

1IBTFך湡涸 ˖ 3BJMT8BZ ⚺ח4QSPDLFUT ח⛦׏׋תתٌتٝ+4圓䧭ח 鵚בֽ׷ ˖ OQNח״׷ٓ؎ـٓٔ盖椚 ˖ &4ךⵃ欽 ˖ &4.PEVMFT JNQPSUFYQPSU ח״׷⣛㶷鍑寸

Slide 19

Slide 19 text

ֿֿדװ׏׋ֿה ˖ CSPXTFSJGZSBJMT׾㼪Ⰵ ˖ TQSPDLFUTךفؚٓ؎ٝזךד㼪Ⰵָ䩛鯪 ˖ SBJMTTFSWFS⟃㢩ךفٗإأ饯⹛ָ♶銲 ˖ ؽٕسח儗꟦ַַָ׷رًٔحزכ鏩㺁 ˖ #BCFM #BCFMJGZ ך㼪Ⰵ ˖ ؿٗٝزؒٝسךٓ؎ـٓٔ盖椚כCVOEMFSַ׵ OQNח㸣Ⰻ獳遤

Slide 20

Slide 20 text

1IBTFך穠卓 ˖ 3FBDUؒ؝ءأذيך䛷䜋ָ「ֽ׵׸׷ ˖ 傀㶷ך3FBDU$PNQPOFOU׾崞欽׃גفٗتؙز Ꟛ涪ךأؾ٦س،حف ˖ .PEBM 5PPMUJQ 5PBTU 1BHJOBUJPOזו״ֻ֮׷ 6*ػة٦ٝכ$PNQPOFOUָⰕꟚׁ׸גְ׷ ˖ IUUQTKTDPBDISFBDU

Slide 21

Slide 21 text

1IBTF駈㜥׾㔿׭׷

Slide 22

Slide 22 text

1IBTFך湡涸 ˖ ث٦يח3FBDUָ嵴鷲׃גֹ׋ךד駈⚛׫׾䲧ִ׷ ˖ ֿךة؎ىؚٝדث٦يًٝغ٦׮㟓ִ㨣׭׋

Slide 23

Slide 23 text

ֿֿדװ׏׋ֿה ˖ &4-JOU׾㼪Ⰵ ˖ أة؎ٕ窟♧הְֲ״׶&4ך嵴鷲湡涸 ˖ FTMJOUQMVHJOSFBDU ˖ 1SPQ5ZQFTך鎸鶢׾䗳갭ח ˖ 㹀劍涸ז荈⹛OQNVQEBUF ˖ 剑鵚ך3FBDUכ 鹈꟦ח♧䏝و؎ش٦ٔٔ٦أ

Slide 24

Slide 24 text

<⡭锑>CJUKPVSOFZDJOQNVQEBUF ˖ !HGY⡲ ˖ 荈⹛דOQNVQEBUF׃גفؙٕٔؒأز׾鷏׷ ˖ OQNTISJOLXSBQ㼎䘔 ˖ DSPOד$JSDMF$*ך/JHIUMZ#VJMET׾㹀劍㹋遤 ˖ ➭ך$*؟٦ؽأד׮㼎䘔〳腉

Slide 25

Slide 25 text

1IBTFך穠卓 ˖ ث٦يⰋ㆞ָ3FBDU׾剅ֹכׄ׭׋ ˖ رؠ؎ش٦׮3FBDU׾剅ֻ ˖ فٗتؙزꟚ涪ָ鹌׬חא׸ծכׄ׭כ㼭ַׁ׏׋ 3FBDU$PNQPOFOUָ肪׏גֻ׷ ˖ غ؛خٖٔ٦ח气׸כׄ׭׷

Slide 26

Slide 26 text

غ؛خٖٔ٦气׸ ˖ 4UBUFכ鋵ָ♧⯋盖椚ׅ׷ךָ⾱⵱ ˖ 4UBUFָ$PNQPOFOUⰻח㸣Ⰻחꟗׄ׷㜥さכ㶨ָ䭯א ֿה׮ ⢽%SPQEPXO6*ךꟚꟗ ˖ 鋵כ4UBUFה)BOEMFS׾1SPQTה׃ג㶨ח床׃ծ㶨כ׉׸ ׾⢪ֲ ˖ $PNQPOFOUָ㣐ֹֻז׷ה׉ך「ֽ床׃ָ醱꧟⻉鋵㶨㷝 props props event handlerͰevent఻೻͠stateΛߋ৽ state

Slide 27

Slide 27 text

1IBTF㼭ֻׁ'MVY׃ג׫׷

Slide 28

Slide 28 text

1IBTFך湡涸 ˖ غ؛خٖٔ٦气׸׾鯪幾ׅ׷ ˖ SFEVYכ⢪׻זְ ˖ ꬊ41"חכװ׶麓ֺז䠬ׄ ˖ $PNQPOFOUָ״׶㣐ֹֻז׏גֹ׋׵ת׋ 罋ִ׷

Slide 29

Slide 29 text

ֿֿדװ׏׋ֿה ˖ IPLBDDIBSFBDUNJDSPDPOUBJOFSך㼪Ⰵ ˖ DPOUBJOFS 鋵 ח醱꧟ׁ׾㺔ׇ׷ ˖ 㶨כEJTQBUDI׾鸐׃גFWFOU⠗乄 ˖ IUUQRJJUBDPNIPLBDDIBJUFNT FD 鋵㶨㷝 props props event dispatch state

Slide 30

Slide 30 text

1IBTFך穠卓 ˖ 醱꧟⻉׃גְ׋♧鿇$PNQPFOUך㹋鄲ַָז׶أح ؗٔ׃׋ ˖ ➙䏝כؽٕس儗꟦ָ孡חז׶כׄ׭׷ ˖ Ꟛ涪橆㞮ד#SPXTFSJGZךٍؗحءָُ⸬ַזְ朐䡾׌ה_猱ך䖉׍ָ涪欰׃גְ׋

Slide 31

Slide 31 text

1IBTFؽٕس儗꟦ך瀉簭

Slide 32

Slide 32 text

1IBTFך湡涸 ˖ Ꟛ涪橆㞮דךؽٕس儗꟦׾瀉簭ׅ׷ ˖ 3BJMT8BZ׾㢩׸׷ֿהכ鏩㺁ׅ׷ ˖ 4QSPDLFUTח劍䖉׃אא

Slide 33

Slide 33 text

ֿֿדװ׏׋ֿה ˖ CSPXTFSJGZSBJMTַ׵XFCQBDLSBJMTח獳遤 ˖ KTך؝٦س׾BQQBTTFUTKBWBTDSJQUַ׵ DMJFOUח獳⹛׃TQSPDLFUT׾鸐ׁזְ ˖ EFWFMPQNFOUדכXFCQBDLEFWTFSWFS׾饯⹛ ˖ QSPEVDUJPOדכؽٕس䖓חEJHFTU➰♷

Slide 34

Slide 34 text

1IBTFך穠卓 ˖ Ꟛ涪橆㞮דךؽٕسָ旗鸞ח ˖ ؽٕس䖉׍ך꟦ח5XJUUFS׾鋅זֻג幥׬ ˖ 如ך铬겗 ˖ 6OJU5FTU橆㞮 ˖ KTךؿ؋؎ٕ؟؎ؤ肍㣐⻉

Slide 35

Slide 35 text

תה׭

Slide 36

Slide 36 text

תה׭ ˖ 1IBTF_1IBTFתד׌ְ׋ְ٠剢玎䏝 ˖ أة٦ز،حفכفٗتؙزꟚ涪ָ⮚⯓חז׶ָ׍ ˖ 㼭ֻׁכׄ׭גծ饥׶זָ׵كأزח鵚בֽ׷ 8FˏSFIJSJOH IUUQTCJUKPVSOFZDPN