リアルタイムにコンポーネントをプレビューできるReact Preview (beta) を試してみた

#React

dyoshikawa

2021.06.29

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

吉川@広島です。

Are you a React dev? Do you use Visual Studio Code?

I just released the beta of React Preview for VS Code ?https://t.co/HnFpTpO9op pic.twitter.com/qU4sxTo30g

— François Wouts (@fwouts) June 25, 2021

「お前らReactとVSCode使ってる？ React Preview for VS Codeのベータ版を出したぜ」

こちらのツイートが目に入り、「え、これすごくない？」ということで試してみました。

本記事ではReactアプリケーションの初期構築手順は割愛します。

環境

react 17.0.2
typescript 4.3.2
styled-components 5.3.0
VSCode 1.57.1
React Preview 0.2.3

シンプルなコンポーネント

まずは「Hello React Preview!」とだけ表示するシンプルなコンポーネントで試してみます。

import React from 'react'

export const Example = () => {
  return <div>Hello React Preview!</div>
}

VSCodeにReact Previewを入れていると export const Example = () => { のすぐ上あたりに Open {コンポーネント名} React Preview というボタンが出てきます。これをクリックするとプレビューされます。

うーん、良いですね。

styled-components入りのコンポーネント

styled-componentsは認識してくれるのでしょうか。

import React from 'react'
import styled from 'styled-components'

const Container = styled.div`
  color: blue;
  font-weight: bold;
  background-color: yellow;
  padding: 100px;
`

export const Example = () => {
  return <Container>Hello React Preview!</Container>
}

このようにstyled-componentsで適当なスタイルを当ててみました。

これをプレビューすると、

ちゃんと認識して描画してくれるようです。

ちなみに、styled-components単体のコンポーネント（本記事のコードでいう const Container = styled.div ）もプレビューできるようです。

子要素が入る箇所に Children と出してくれてますね。

console.log も確認できる

プレビュータブ内の下の方を見てみるとConsoleというタブがありますね。ここでコンソール出力も確認できるようです。

import React from 'react'

export const Example = () => {
  React.useEffect(() => {
    console.log('Effect!')
  })

  return <div>Hello React Preview!</div>
}

このように Effect! をコンソールに出力するコードでプレビューすると、

しっかり Effect! の出力が確認できました。

SVGコンポーネント

SVGもプレビューできました。

素材は下記の「Search」をダウンロードして利用しました。

Icons - Google Fonts

import React from 'react'

export const SearchIcon = () => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      height="24px"
      viewBox="0 0 24 24"
      width="24px"
      fill="#000000"
    >
      <path d="M0 0h24v24H0V0z" fill="none" />
      <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" />
    </svg>
  )
}

プレビューすると、