VSCodeに最適なReact拡張機能

投稿日: 2022-04-20 2022-04-20

Reactを使用する場合、何度も何度も繰り返されるコードがたくさんあります。やがて、あなたは「もっと良い方法が必要だ」と考え始めます。心配しないでください、あります！

この記事では、 ES7 React / Redux / GraphQL/React-Nativeスニペット****拡張機能について説明します。はい、すべてを詳しく説明するのは一口ですが、Reactコードを作成するときに非常に貴重なスニペットの驚くべきセットを提供します。

ES7 React / Redux / GraphQL/React-ネイティブスニペット拡張機能

このスニペット拡張機能（名前全体を再度入力することはありません）は、200万回を超えるダウンロードで非常に人気があります。これをバックアップするために、私が聞いたすべての大物開発者は、ポッドキャストやYouTubeビデオなどでReactについて話します。この拡張機能を使用し、それを愛しています。

私はいつも、開発者は「意図的に怠け者」だと言ってきました。言い換えれば、私たちは自分たちでコードを書く回数を減らすことで、コードを正しく処理する速度を絶えず向上させる方法を見つけています。これらのスニペットにより、Reactの記述がはるかに高速になります。

JavaScriptのインポート

この記事はReactのスニペットに焦点を当てていますが、Reactコードは主に最新のJavaScriptで構成されています。このため、この拡張機能にはいくつかの便利なJavaScriptスニペットが含まれています。

最新のJavaScriptでは、コードはさまざまなモジュールに分割され、インポート構文を使用して他の領域で再利用されます。考慮すべきインポートスニペットをいくつか示します。

デフォルトのエクスポートをインポートします。

//imp
import moduleName from 'module'

名前付きエクスポートをインポートします。

//imd
import { destructuredModule } from 'module'

Reactをもう少し具体的にするために、Reactのインポートをいくつか示します。

Reactをインポートする

//imr
import React from 'react'

Reactとコンポーネントをインポートします。

//imrc
import React, { Component } from 'react'

JavaScriptの反復

アイテムのリストを繰り返すことは難しくありませんが、繰り返します（しゃれは意図されていません）。

反復ごとに

//fre
arrayName.forEach(element => { }

反復の場合

//fof
for(let itemName of objectName { }

反復の場合

//fin
for(let itemName in objectName { }

JavaScript関数

関数は明らかに私たちが毎日書いているものです。それらを生成するいくつかの異なる方法があります。

匿名関数

//anfn
(params) => { }

名前付き関数

//nfn
const functionName = (params) => { }

Reactライフサイクルメソッド

これで、React固有のものに飛び込むことができます。ライフサイクルメソッドから始めましょう。

ComponentDidMount

//cdm
componentDidMount = () => { }

ComponentDidUpdate

//cdup
componentDidUpdate = (prevProps, prevState) => { }

ComponentWillUnmount

//cwun
componentWillUnmount = () => { }

コンポーネントを反応させる

これまでに説明したスニペットを使用すると、Reactコンポーネントのほとんどを組み合わせてスニペット化することができますが、さらに良くなります。コンポーネント全体を生成するスニペットを次に示します。

Reactクラスコンポーネント

//rcc
import React, { Component } from 'react'

export default class FileName extends Component {
  render() {
    return <div>$2</div>
  }
}

クラスコンポーネントをプロップタイプと反応させる

//rcep
import React, { Component } from 'react'
import PropTypes from 'prop-types'

export class FileName extends Component {
  static propTypes = {}

  render() {
    return <div>$2</div>
  }
}

export default $1

React機能コンポーネント

//rfc
import React from 'react'

export default function $1() {
  return <div>$0</div>
}

その他のスニペット

この記事では多数のスニペットについて説明しましたが、さらにいくつかあります。ここに、より深く見る価値があるかもしれないいくつかのカテゴリーがあります！

リアクトネイティブ
小道具の種類
戻ってきた
テスト
コンソールへの書き込み

結論

必要のないコードは絶対に書かないでください。その声明に対する私の唯一の注意点は、あなたが学んでいる場合です。言語やフレームワークを初めて使用する場合は、学習中はスニペットを避けてください。経験のためにそれをすべて書き留めてください！その後、SNIPPETS AWAY！

getdocs

13036