React勉強会.pdf

Transcript

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

   View Slide

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

   View Slide

3. React
   のStyling
   は何使ってますか？
   3
   

   View Slide

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

   View Slide

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

   View Slide

6. CSS Modules
   sass
   とか書けたりはする。CSS
   とJS
   の間での定数の共有ができない。
   import styles from "./styles.css";
   export const StyledButton = () => (
   
   Styled!
   
   );
   6
   

   View Slide

7. Inline Styles
   ⼿軽なので好きだけど、hover
   とかできないことがある。
   css
   のサンプルのコピペとかし難い。
   const styles = {
   background: "#fff",
   padding: "20px",
   borderRadius: "5px",
   border: "none",
   };
   export const StyledButton = (props) => (
   
   Styled!
   
   );
   7
   

   View Slide

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
   

   View Slide

9. Styled-Components
   毎回Component
   作らされるの、⾯倒くさくないですか？
   import styled from "styled-components";
   const StyledTable = styled.table``;
   const StyledTh = styled.th``;
   const StykedTr = styled.tr``;
   export const Table = () => (
   
   
   カラム
   カラム
   
   値
   値
   
   );
   9
   

   View Slide

10. そこで
    10
    

    View Slide

11. emotion
    11
    

    View Slide

12. inline
    な感じで書ける
    /** @jsx jsx */
    import { jsx } from "@emotion/core";
    export const StyledComponent = (props) => {
    return ();
    };
    12
    

    View Slide

13. Styled-Components
    みたいなこともできる
    import styled from "@emotion/styled";
    export const StyledButton = styled.button`
    color: turquoise;
    `;
    13
    

    View Slide

14. AltCSS
    っぽいこともできる
    /** @jsx jsx */
    import { jsx, css } from "@emotion/core";
    const styled = css`
    color: blue;
    header & {
    color: green;
    }
    `;
    export const StyledComponent = () => (
    
    
    Green Text
    
    Blue Text
    
    ); 14
    

    View Slide

15. emotion(+typescript+parcel)
    の導⼊の
    仕⽅
    15
    

    View Slide

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
    

    View Slide

17. tsconfig.json
    (
    当然react
    なので)
    、jsx
    記法でReact.createElement
    になるように設定
    npx tsc --init
    //
    略
    "jsx": "react"
    //
    略
    17
    

    View Slide

18. 基本的なもの揃える
    ファイル構成はこんな感じ
    │
    ├ node_modules
    ├ src
    ├ index.html
    ├ App.tsx # ReactDOM.render
    とかする
    └ components
    └ SomeComponent.tsx # emotion
    で作る
    ├ package.json
    ├ yarn.lock
    └ tsconfig.json
    18
    

    View Slide

19. component
    を作る
    実は、emotion
    のcomponent
    だけはReact.createElement
    を使わず、
    JSX Pragma
    でempotion
    の関数を指定する。
    /** @jsx jsx */
    //
    ↑これをemotion
    使うcomponent
    のファイルに毎回書く
    import { jsx, css } from "@emotion/core";
    export const SomeComponent = () => (
    
    );
    19
    

    View Slide

20. 確認する
    typescript+parcel
    なら特に設定はいらない
    parcel src/index.html
    20
    

    View Slide

21. おわり
    21
    

    View Slide