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

Reactで学ぶUIコンポーネントデザイン / UI Component Design wit...

Reactで学ぶUIコンポーネントデザイン / UI Component Design with React

mikesorae

July 12, 2017
Tweet

More Decks by mikesorae

Other Decks in Technology

Transcript

  1. ϩάΠϯϑΥʔϜͷ৔߹ • ID/Passwordೖྗ͕Ͱ͖Δ • ID/ύεϫʔυ͕8จࣈҎ಺ͷ৔߹͸Τ ϥʔΛදࣔ͢Δ • ೖྗΤϥʔ͕͋Δͱ͖͸ϩάΠϯϘλ ϯΛΫϦοΫͰ͖ͳ͍ •

    ϩάΠϯϘλϯΛΫϦοΫ͢Δͱid/ passwordΛฦ͢ id hogehoge password ******* id must be at least 8 characters Login
  2. ৼΔ෣͍Λݟ͚ͭΔ id hogehoge password ********* Login ϩάΠϯϑΥʔϜ - ϢʔβID -

    ύεϫʔυ - ID௕ΛνΣοΫ͢Δ - ύεϫʔυ௕ΛνΣοΫ͢Δ - ϩάΠϯϘλϯΛ༗ޮʹ͢Δ - ϩάΠϯϘλϯΛແޮʹ͢Δ
  3. ࣮૷ʹམͱ͠ࠐΉ LoginForm - userId: string - password: string - onSubmit:

    function - validateUserId(userId): bool - validatePassword(userId): bool - canSubmit: bool - handleSubmit(userId, password) <LoginForm userId={this.props.userId} password={this.props.password} onSubmit={this.handleSubmit} />
  4. ίϯϙʔωϯτΛ෼ׂ͢Δ LoginForm - userId: string - password: string - userIdValidator:

    function - passwordValidator: function - onSubmit: function - handleSubmit(userId, password) Input - value: string - type: string - onChange: function - handleChange(value) SubmitButton - value: string - disable: bool - onClick: function - handleClick() ೖྗ஋ͱݕূؔ਺ʹΑͬͯ Ұҙʹݟͨ໨͕ܾ·ΔUIίϯϙʔωϯτ͕Ͱ͖Δ