はじめに

• デコレーターはES6で提案された草案です。 モディファイアとも呼ばれるデコレーターは、クラス、プロパティ、メソッドなどの振る舞いを追加または変更するために使用される関数です。
• デコレータはES7でコーディングされた新しい構文で、いくつかのオブジェクトをデコレータでラップして、ラップされたオブジェクトを返すことができます。
• しかし、今のところ互換性の問題から、reactのプロジェクトでデコレータを使いたい場合は、実行環境の設定やサードパーティ製のプラグインをインストールしないと動作しません。

Create-react-app デコレーター ランタイム環境の設定手順

create-react-app scaffoldingデフォルト設定ファイルの嵐。

yarn eject 
 
npm run eject
/*  
	新しく作成したプロジェクトでcreate-react-appを使ってyarn ejectやnpm run ejectを実行すると、エラーが出ることがある。
	そのため、yarn ejectを実行するときは、まずgitを使ってコードをローカルリポジトリに追加しなければならない。
	この問題の主な原因は、create-react-app scaffoldingが自動的に.gitgnoreというファイルがあるが、これはgitのローカルリポジトリではないので、yarn ejectがエラーとして報告される。
	
つまり、イジェクトの順番は以下のようになる：
	create-react-app my-app
	cd my-app
	$ git init
	$ git add .
	$ git commit -m 'saving before ejecting init myapp'
	npm run eject
*/
 

、デコレーター依存プラグインのインストール

yarn add @babel/plugin-proposal-decorators -D
 
npm i @babel/plugin-proposal-decorators -D

、package.jsonファイルを修正し、babel設定項目を追加または検索し、次のように設定します：

"babel": {
 "plugins": [
 [
 "@babel/plugin-proposal-decorators",
 {
 "legacy": true
 }
 ]
 ],
 "presets": [
 "react-app"
 ]
 }

、上記の設定が完了すると、サービスを開始するOKです！

yarn start
 
npm start

そうすれば、あなたのプロジェクトで @decorator を使うことができます。