Slide 1

Slide 1 text

ා͘ͳ͍React @nokogiri ॳ৺ऀ޲͚React ϋϯζΦϯ

Slide 2

Slide 2 text

Nokogiri Job: SIer I — JS , Ruby ,Java and Design. ͸͡Ί·ͯ͠

Slide 3

Slide 3 text

Nokogiri Job: SIer I — JS , Ruby ,Java and Design. ͸͡Ί·ͯ͠ https://nokogiring.github.io/

Slide 4

Slide 4 text

ͱΓ͋͑ͣReactʹ৮ͬͯΈΔ ReactͷϝϦοτΛ஌Δ ≠DOMૢ࡞ͳJSΛ஌Δ ࠓ೔΍Γ͍ͨ͜ͱ

Slide 5

Slide 5 text

ͱΓ͋͑ͣReactʹ৮ͬͯΈΔ ReactͷϝϦοτΛ஌Δ ≠DOMૢ࡞ͳJSΛ஌Δ ࠓ೔΍Γ͍ͨ͜ͱ ͳΜ͔೉ͦ͠͏ͱࢥ͍ͬͯΔ React΁ͷڪාΛऔΓআ͘

Slide 6

Slide 6 text

ࠓ೔΍Βͳ͍͜ͱ ։ൃ؀ڥߏஙͷखॱ ES2015ͷઆ໌ ଞͷϥΠϒϥϦͱͷൺֱ jQueryσΟεΓ

Slide 7

Slide 7 text

What’s React ?

Slide 8

Slide 8 text

Facebook੡ͷJavascriptϥΠϒϥϦ એݴతɾίϯϙʔωϯτࢦ޲ɾҰ౓ֶͿͱͲ͜Ͱ΋ ͔͚Δ ʮԾ૷DOMʯʹΑΔߴ଎ͳϨϯμϦϯά What’s React ?

Slide 9

Slide 9 text

Facebook੡ͷJavascriptϥΠϒϥϦ એݴతɾίϯϙʔωϯτࢦ޲ɾҰ౓ֶͿͱͲ͜Ͱ΋ ͔͚Δ ʮԾ૷DOMʯʹΑΔߴ଎ͳϨϯμϦϯά ͱʹ͔͘ྲྀߦͬͯΔ What’s React ?

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

Hello World

Slide 12

Slide 12 text

// ೚ҙͷϑΥϧμʹҠಈ cd Desktop // Ϋϩʔϯ git clone https://github.com/nokogiring/ReactLogoGenerator.git // தʹҠಈ cd ReactLogoGenerator // ϞδϡʔϧͷΠϯετʔϧ npm i // Script࣮ߦ npm start Hello World https://github.com/nokogiring/ReactLogoGenerator

Slide 13

Slide 13 text

Hello World ϒϥ΢βͰ http://localhost:3000 ʹΞΫηε

Slide 14

Slide 14 text

ղઆ

Slide 15

Slide 15 text

~লུ~
~লུ~ Hello World index.html

Slide 16

Slide 16 text

// ΤϯτϦʔϙΠϯτʹͳΔjs // React + ReactDomΛར༻͢Δ import React from 'react'; import ReactDom from 'react-dom'; // HTMLͷdomʹ།ҰΞΫηε͢ΔՕॴ const el = document.getElementById('root') // htmlͷ#rootʹ࡞੒͞ΕͨDomΛඳը͍ͯ͠Δ ReactDom.render(
Hello React World
, el ) Hello World src/index.js

Slide 17

Slide 17 text

// ΤϯτϦʔϙΠϯτʹͳΔjs // React + ReactDomΛར༻͢Δ import React from 'react'; import ReactDom from 'react-dom'; // HTMLͷdomʹ།ҰΞΫηε͢ΔՕॴ const el = document.getElementById('root') // htmlͷ#rootʹ࡞੒͞ΕͨDomΛඳը͍ͯ͠Δ ReactDom.render(
Hello React World
, el ) Hello World src/index.js จࣈΛม͑ͨΓɺଞͷλάʹஔ͖׵͑ͨΓͯ͠Έ·͠ΐ͏ɻ EJWλάͷதʹɺλάΛೖΕͯΈ·͠ΐ͏

Slide 18

Slide 18 text

σΟϨΫτϦߏ੒ͱਐΊํ

Slide 19

Slide 19 text

σΟϨΫτϦߏ੒ͱਐΊํ

Slide 20

Slide 20 text

σΟϨΫτϦߏ੒ͱਐΊํ ׬੒඼ϑΥϧμ ࡞ۀ༻ϑΥϧμ ى఺ͱͳΔ+4 Θ͔Βͳ͚Ε͹ɺ׬੒඼Λݟ͍ͯͩ͘͞ɻ

Slide 21

Slide 21 text

Hello World 2

Slide 22

Slide 22 text

ίϯϙʔωϯτࢦ޲

Slide 23

Slide 23 text

// ΤϯτϦʔϙΠϯτʹͳΔjs // React + ReactDomΛར༻͢Δ import React from 'react'; import ReactDom from 'react-dom'; // Hello WorldΛΠϯϙʔτ import HelloWorld from './HelloWorld/index'; // HTMLͷdomʹ།ҰΞΫηε͢ΔՕॴ const el = document.getElementById('root') // htmlͷ#rootʹ࡞੒͞ΕͨDomΛඳը͍ͯ͠Δ ReactDom.render( , el ) Hello World 2 src/index.js )FMMP8PSMEϞδϡʔϧͷ Πϯϙʔτ ඳը͢Δର৅Λ )FMMP8PSMEʹมߋ

Slide 24

Slide 24 text

// ToDo // divλάʹ main ͱ͍͏ΫϥεΛ௥Ճ͠·͠ΐ͏ // h1ʹΠϯϥΠϯελΠϧͰ color : tomato Λࢦఆ͠·͠ΐ͏ // JSX͸ಛผͳϧʔϧ͕͋Δɻ // class => className // for => htmlFor // ΠϯϥΠϯελΠϧ͸ style={{ xxxx: 'yyyyy' }} Ͱදݱ͠·͢ɻ

Hello World2

Hello World 2 src/HelloWorld/index.js

Slide 25

Slide 25 text

Hello World 2 ϒϥ΢β͸JSΛߋ৽͢ΔͱࣗಈϦϩʔυ͠·͢ɻ ҎԼͷҎԼͷը໘͕ग़Ε͹OKͰ͢ɻ

Slide 26

Slide 26 text

ιʔεΛ࢖ͬͯղઆ͠·͢ Hello World 2 src/HelloWorld/index.js

Slide 27

Slide 27 text

Page

Slide 28

Slide 28 text

// ΤϯτϦʔϙΠϯτʹͳΔjs // React + ReactDomΛར༻͢Δ import React from 'react'; import ReactDom from 'react-dom'; // PageΛΠϯϙʔτ import Page from './Page/index'; // HTMLͷdomʹ།ҰΞΫηε͢ΔՕॴ const el = document.getElementById('root') // htmlͷ#rootʹ࡞੒͞ΕͨDomΛඳը͍ͯ͠Δ ReactDom.render( , el ) Page src/index.js 1BHFϞδϡʔϧͷ Πϯϙʔτ ඳը͢Δର৅Λ 1BHFʹมߋ

Slide 29

Slide 29 text

Page ׬੒൛͸͜Μͳײ͡

Slide 30

Slide 30 text

Page src/Page/index.js import React, { Component } from 'react'; // Todo1 // Header,Sidebar,Main,footerͷindex.jsΛΠϯϙʔτ͍ͯͩ͘͠͞ɻ

Slide 31

Slide 31 text

Page src/Page/index.js // Todo2 // Header,Sidebar,Main,footerͷॱʹҎԼͷdivͷதʹίϯϙʔωϯτΛॻ͍͍ͯͩ͘͞ɻ // SidebarͱMainΛ"contents"ͱ͍͏ΫϥεͷdivλάͰғ͍ͬͯͩ͘͞ɻ

Slide 32

Slide 32 text

Page src/Sidebar/Page/index.js const contentsList = ["News", "Blog", "SNS", "Recruit", "aaa", "bbb"]; let viewList = []; // Todo // contentsListͷཁૉ਺෼ viewListʹ Λ֨ೲ͍ͯͩ͘͠͞ɻ // ͜ͷͱ͖ // ͱ͍͏ܗͰɺtitleͱkeyʹcontentsListͷཁૉΛࢦఆ͍ͯͩ͘͠͞ɻ // ͜Ε͕Կ͔͸࣍ͷষͰઆ໌͠·͢ɻ return (
{viewList}
);

Slide 33

Slide 33 text

JSϑΝΠϧΛ෼ׂ͢Δ͜ͱͰɺඞཁͳػೳຖʹϑΝ ΠϧΛ෼ׂͰ͖ΔΠϝʔδ͕Ͱ͖ͨ͸ͣ ֎ଆ͔Βύϥϝʔλͱͯ͠౉͢͜ͱ͕Ͱ͖Δ HTMLͱJS͕ີ݁߹ Page

Slide 34

Slide 34 text

Props & State

Slide 35

Slide 35 text

Props & State ࣮ԋ

Slide 36

Slide 36 text

// ΤϯτϦʔϙΠϯτʹͳΔjs // React + ReactDomΛར༻͢Δ import React from 'react'; import ReactDom from 'react-dom'; // PropsStateΛΠϯϙʔτ import PropsState from './PropsState/index'; // HTMLͷdomʹ།ҰΞΫηε͢ΔՕॴ const el = document.getElementById('root') // htmlͷ#rootʹ࡞੒͞ΕͨDomΛඳը͍ͯ͠Δ ReactDom.render( , el ) Props & State src/index.js 1SPQT4UBUFϞδϡʔϧͷ Πϯϙʔτ ඳը͢Δର৅Λ 1SPQT4UBUFʹมߋ EFGBVMU7BMVFΛઃఆ

Slide 37

Slide 37 text

Props & State src/PropsState/index.js // Todo1 // textarea ͷ style ʹ textAreaStyle ΛదԠ͍ͤͯͩ͘͞͞ɻ // textarea ͷ value ʹ this.state.text ΛదԠ͍ͤͯͩ͘͞͞ɻ // textarea ͷ onChange ʹ this._setValue ΛదԠ͍ͤͯͩ͘͞͞ɻ // Todo2 // "จࣈ਺ɿ" ͷޙΖʹ this.state.count Λग़ྗ͍ͯͩ͘͠͞ɻ // "resultɿ" ͷޙΖʹ this.state.text Λग़ྗ͍ͯͩ͘͠͞ɻ return (

Props State Counter

จࣈ਺ :

result:

);

Slide 38

Slide 38 text

Props & State src/PropsState/index.js constructor(props) { super(props); this.state = { // Todo3 // textͷ஋Λ "" => this.props.defaultValue ʹมߋ͍ͯͩ͘͠͞ɻ // countͷ஋Λ 0 =>ɹthis.props.defaultValue.length ʹมߋ͍ͯͩ͘͠͞ɻ text: "", count: 0, } this._setValue = this._setValue.bind(this); }

Slide 39

Slide 39 text

Props & State src/PropsState/index.js // Πϕϯτϋϯυϥʔ // ೖྗϑΟʔϧυͷ஋Λstateʹઃఆ͢Δ _setValue(e) { // Todo4 // text, countʹ textarea ͷೖྗจࣈྻͱ count ͷೖྗจࣈྻ਺ΛೖΕ͍ͯͩ͘͞ɻ // textareaͷೖྗจࣈྻ͸ e.target.value // textareaͷೖྗจࣈྻ਺͸ e.target.value.length // ͰऔಘͰ͖·͢ɻ this.setState({ text: "", count: 0, }) }

Slide 40

Slide 40 text

ιʔεΛ࢖ͬͯղઆ͠·͢ Props & State src/PropsState/index.js

Slide 41

Slide 41 text

Props => ֎෦͔Β౉͞ΕΔ஋
 Πϛϡʔλϒϧ(ޙͰมߋෆՄೳ) State => ίϯϙʔωϯτ಺෦Ͱ؅ཧ͢Δ஋
 ϛϡʔλϒϧ(ޙͰมߋՄೳ) Props & State

Slide 42

Slide 42 text

PropsΛΠϯϙʔτ࣌ʹ౉͢͜ͱͰίϯϙʔωϯτ ͷதͰར༻Ͱ͖·͢ɻ React͕Stateͷ஋ͷมߋʹै͍ɺมߋલޙͷࠩ෼ ͚ͩΛ࠶ඳը͍ͯ͠·͢ɻ Props & State

Slide 43

Slide 43 text

ReactDom.render(
, ,
, el ) Props & State src/index.js EJWͰғͬͯɺ 1SPQT4UBUFΛ̎ͭ࢖͏ EFGBVMU7BMVFΛมߋͯ͠ΈΔ

Slide 44

Slide 44 text

LogoGenerator

Slide 45

Slide 45 text

ίϯϙʔωϯτΛ·͕ͨͬͯ εςʔτΛड͚౉͢

Slide 46

Slide 46 text

LogoGenerator ࣮ԋ

Slide 47

Slide 47 text

// ΤϯτϦʔϙΠϯτʹͳΔjs // React + ReactDomΛར༻͢Δ import React from 'react'; import ReactDom from 'react-dom'; // ίϯϙʔωϯτΛΠϯϙʔτ import LogoGenerator from './LogoGenerator/index' // HTMLͷdomʹ།ҰΞΫηε͢ΔՕॴ const el = document.getElementById('root') // htmlͷ#rootʹ࡞੒͞ΕͨDomΛඳը͍ͯ͠Δ ReactDom.render(
, el ) LogoGenerator src/index.js 1SPQT4UBUFϞδϡʔϧͷ Πϯϙʔτ ඳը͢Δର৅Λ -PHP(FOFSBUPSʹมߋ

Slide 48

Slide 48 text

LogoGenerator src/LogoGenerator/index.js // Todo1 // logo ͷதͷ ίϯϙʔωϯτʹҎԼͷϓϩύςΟʹ؅ཧ͍ͯ͠Δ // ಉ໊ͷStateΛηοτ͍ͯͩ͘͠͞ɻ(ώϯτ hogehoge={this.state.hogehoge}) // backgroundColor // fontSize // fontfamily // textColor // Todo2 // ίϯϙʔωϯτͷࢠͲ΋ͱͯ͠ // StateͰ؅ཧ͍ͯ͠Δ textValue ΛೖΕ͍ͯͩ͘͞ɻ // ࢠͲ΋(fugafuga)ʹड͚౉͢ํ๏͸{this.state.fugafuga} // hogehogeΫϥε͸ this.props.children ͰfugafugaΛड͚औΓ·͢ɻ // ϩΰ const logo = ( )

Slide 49

Slide 49 text

LogoGenerator src/LogoGenerator/index.js Todo3 ίϯϙʔωϯτΛ࢖ͬͯɺϩΰΛ૷০͢ΔϘλϯΛ࡞੒͍ͯͩ͘͠͞ɻ {/*Todo3ɹPlease fill me !*/} ͱ͍͏ՕॴΛ͏Ί͍ͯͩ͘͞ɻ ίϯϙʔωϯτʹ͸ɺname, selectedName, handleClickΛϓϩύςΟͱͯ͠౉͍ͯͩ͘͠͞ɻ FontFamilyϘλϯͷ name ͸ names_FontFamily ͔Βऔಘ໊ͨ͠લΛઃఆ͍ͯͩ͘͠͞ɻ FontFamilyϘλϯͷ selectedName ͸ stateͷ fontfamily Λઃఆ͍ͯͩ͘͠͞ɻ FontFamilyϘλϯͷ handleClick ͸ this._selectFontFamily ͔Βऔಘ͍ͯͩ͘͠͞ɻ TextColorϘλϯͷ name ͸ names_textColor ͔Βऔಘ໊ͨ͠લΛઃఆ͍ͯͩ͘͠͞ɻ TextColorϘλϯͷ selectedName ͸ stateͷtextColor Λઃఆ͍ͯͩ͘͠͞ɻ TextColorϘλϯͷ handleClick ͸ this._selectTextColor ͔Βऔಘ͍ͯͩ͘͠͞ɻ BackGroundColorϘλϯͷ name ͸ names_FontFamily ͔Βऔಘ໊ͨ͠લΛઃఆ͍ͯͩ͘͠͞ɻ BackGroundColorϘλϯͷ selectedName ͸ stateͷ fontfamily Λઃఆ͍ͯͩ͘͠͞ɻ BackGroundColorϘλϯͷ handleClick ͸ this._selectBackGroundColor ͔Βऔಘ͍ͯͩ͘͠͞ɻ

Slide 50

Slide 50 text

ιʔεΛ࢖ͬͯղઆ͠·͢ Props & State src/PropsState/index.js

Slide 51

Slide 51 text

ؔ਺Λίϯϙʔωϯτʹpropsͱͯ͠౉͢͜ͱ͕Ͱ ͖·͢ɻstateͷ؅ཧ͸਌͕͍࣋ͬͯΔͷͰɺ਌ͷ stateΛߋ৽͢Δؔ਺ΛࢠͲ΋ʹ౉͢͜ͱͰɺ͜Ͳ ΋͕਌ͷstateΛߋ৽Ͱ͖·͢ɻ LogoGenerator

Slide 52

Slide 52 text

͝੩ௌ͋Γ͕ͱ͏ ͍͟͝·͍ͨ͠