$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

    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