$30 off During Our Annual Pro Sale. View Details »

React勉強会.pdf

kaminchu
August 07, 2019

 React勉強会.pdf

kaminchu

August 07, 2019
Tweet

More Decks by kaminchu

Other Decks in Programming

Transcript

  1. これからにStyling はemotion でキマリ☆ 2019/08/07 React 勉強会 #1 1

  2. ⾃⼰紹介 Twitter @kam1nchu 職種 インフラエンジニア フロントエンドエンジニア 歴 Javascript 歴 3

    年 React 歴 3 年 AWS 歴 半年 2
  3. React のStyling は何使ってますか? 3

  4. emotion が盛り上がってきています 4

  5. 他のに⽐べて何がいいのか 5

  6. CSS Modules sass とか書けたりはする。CSS とJS の間での定数の共有ができない。 import styles from "./styles.css";

    export const StyledButton = () => ( <button className={styles.button}> Styled! </button> ); 6
  7. Inline Styles ⼿軽なので好きだけど、hover とかできないことがある。 css のサンプルのコピペとかし難い。 const styles = {

    background: "#fff", padding: "20px", borderRadius: "5px", border: "none", }; export const StyledButton = (props) => ( <button style={props.selected ? styles : {...styles, background: "#ed3330"}}> Styled! </button> ); 7
  8. Styled-Components ⼀⾒便利そうだけど... import styled from "styled-components"; export const StyledButton =

    styled.button` background: ${props => props.selected ? "#fff" : "#ed3330"}; padding: 20px; border-radius: 5px; border: none; `; 8
  9. Styled-Components 毎回Component 作らされるの、⾯倒くさくないですか? import styled from "styled-components"; const StyledTable =

    styled.table``; const StyledTh = styled.th``; const StykedTr = styled.tr``; export const Table = () => ( <StyledTable> <StyledTh><td> カラム</td><td> カラム</td></StyledTh> <StykedTr><td> 値</td><td> 値</td></StykedTr> </StyledTable> ); 9
  10. そこで 10

  11. emotion 11

  12. inline な感じで書ける /** @jsx jsx */ import { jsx }

    from "@emotion/core"; export const StyledComponent = (props) => { return (<div css={{ color: "hotpink" }} {...props}></div>); }; 12
  13. Styled-Components みたいなこともできる import styled from "@emotion/styled"; export const StyledButton =

    styled.button` color: turquoise; `; 13
  14. AltCSS っぽいこともできる /** @jsx jsx */ import { jsx, css

    } from "@emotion/core"; const styled = css` color: blue; header & { color: green; } `; export const StyledComponent = () => ( <div> <header> <p css={styled}>Green Text</p> </header> <p css={styled}>Blue Text</p> </div> ); 14
  15. emotion(+typescript+parcel) の導⼊の 仕⽅ 15

  16. ⾊々⼊れる # ビルド yarn add -D typescript parcel-bundler # react

    yarn add -D @types/react @types/react-dom yarn add react react-dom # emotion yarn add @emotion/core @emotion/styled 16
  17. tsconfig.json ( 当然react なので) 、jsx 記法でReact.createElement になるように設定 npx tsc --init

    // 略 "jsx": "react" // 略 17
  18. 基本的なもの揃える ファイル構成はこんな感じ │ ├ node_modules ├ src ├ index.html ├

    App.tsx # ReactDOM.render とかする └ components └ SomeComponent.tsx # emotion で作る ├ package.json ├ yarn.lock └ tsconfig.json 18
  19. component を作る 実は、emotion のcomponent だけはReact.createElement を使わず、 JSX Pragma でempotion の関数を指定する。

    /** @jsx jsx */ // ↑これをemotion 使うcomponent のファイルに毎回書く import { jsx, css } from "@emotion/core"; export const SomeComponent = () => ( <div css={css`color: blue;`}></div> ); 19
  20. 確認する typescript+parcel なら特に設定はいらない parcel src/index.html 20

  21. おわり 21