How To Use Decorators With Create Reacte App

ES7 Decorators: Be on a Roll, Use Decorators in React Now!

Short description of the article

Intro
If y'all take access to the babel configuration:

Enabling the Decorator's syntax using Babel half dozen
Enabling the Decorator's syntax using Babel 7

Enabling the Decorator'southward syntax using Create React App (v2):

Enabling the Decorator'southward syntax using Typescript
Enabling the Decorator's syntax using Fork
Enabling the Decorator'due south syntax using Eject
Enabling the Decorator's syntax using the "customize-cra" npm bundle

Determination

Intro

I have been working every bit an Angular developer for more than 3 years at present and have e'er been excited past the many out-of-the-box solutions that are offered by an Angular framework.

Today, I've decided to tell you about Decorators - one of the most fundamental parts in Angular. Precisely, the article volition elaborate on the little instructionto how incorporate this feature into React. Firstly, let me remind you what the decorators are and what new and useful options they offer.

In general, Decorators are just pure functions with arguments that can dynamically adhere to the object additional functionality prior to its usage. To be more precise, with their help you lot can:

check the status of the environment before the office execution;
carry out the postponed initialization;
exercise logging/tracing;
precisely extend the lawmaking written by someone else;
do many other things...

I savage in love with decorators functionality in 2016 when Athwart 2 had been released. And then, information technology has been already three years since so and nowadays however but a few people use decorators in React. How do you think what might exist the reasons for that?

The main reason is the attitude of the React core team - you lot can get a more precise answer in their official documentation. Therefore, there'south however a lack of the opportunities for using decorators out-of-the-box in React, despite the fact that there are many developers who are interested in such a characteristic. In this article, I'm going to explain how to use them.

1. If you lot have admission to the Boom-boom configuration

For enabling the decorator support you lot should run:

npm i --salvage-dev babel-plugin-transform-decorators-legacy

And make a change to a .babelrc file:

              {   "presets": ["es2015", "stage-1"],   "plugins": ["transform-decorators-legacy"] }

Enabling Decorator syntax using Babel 7:

For enabling the decorator support you should run:

npm i --save-dev @babel/plugin-proposal-class-backdrop
npm i [e-mail protected]/plugin-proposal-decorators

And make a change to a .babelrc file:

              {     "plugins": [         ["@babel/plugin-proposal-decorators", { "legacy": true}],         ["@babel/plugin-proposal-class-properties", { "loose": true}]     ] }

Using Typescript is the easiest style of enabling decorators in React because it doesn't require whatever tricks. You only accept to perform several steps:

Run in the terminal: ```npx create-react-app my-typescript-app --typescript```
Reload compilerOptions in the "tsconfig.json" file by adding emitDecoratorMetadata and experimentalDecorators:

              "compilerOptions": {   "target": "es5",   "allowJs": true,   "skipLibCheck": false,   "esModuleInterop": true,   "allowSyntheticDefaultImports": true,   "emitDecoratorMetadata": truthful,   "experimentalDecorators": truthful,   "strict": true,   "forceConsistentCasingInFileNames": true,   "module": "esnext",   "moduleResolution": "node",   "resolveJsonModule": truthful,   "isolatedModules": true,   "noEmit": true,   "jsx": "preserve"   },

Literally, I detect it one of the best options because I like Typescript. Using Typescript comes up with the benefit of linting your lawmaking, static-typing, and overall, improve code quality. You tin check out our team's repository at GitHub as an instance of using decorators with Typescript .

As for me, the Fork method is the best choice for the build customization. Besides, this option is supported past Dan Abramov - one of the influencers in the React team. The project fork of react-scripts is an alternative to Eject, other words to say, it doesn't contain the cons of Eject, but has its own different nuances.

Also, please have a adventure to read the article about Customizing CRA without Eject, where you tin find more detailed information on forking CRA repository and using it within your project.

For decorator enabling y'all should merely follow a few steps:

run in the control prompt:

npm run eject

install babel plugins by executing the following commands:

npm i -D @babel/plugin-proposal-decorators
@babel/plugin-proposal-class-backdrop

update Boom-boom in a packet.json file by adding plugins to it:

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

This command will remove the single build dependency from your project. Information technology will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) correct into your project so y'all'd have the full control over them. At our repository you tin can come across an case of enabling the Decorator's syntax using Squirt .

If you lot create the project by using the ```npx create-react-app my-app``` command, then y'all won't have a chance to use decorators out-of-the-box. And in order to practice it, you lot demand to install the "customize-cra" package as it was did past our team at GitHub's repository .

Then you should update devDependencies in the "packet.json" file by calculation to it ii packages - "customize-cra" and "react-app-rewired". A second package is necessary to enable the 1st package.

              "devDependencies": {   "customize-cra": "^0.two.8",   "react-app-rewired": "^1.6.ii" }

Afterward, you should update the scripts in the "bundle.json" file by replacing react-scripts with "react-app-rewired".

              "scripts": {   "beginning": "react-app-rewired offset",   "build": "react-app-rewired build",   "examination": "react-app-rewired test",   "eject": "react-scripts eject" },

Finally, add a "config-overrides.js" file to the root of the project that enables the Decorator's syntax. File contents:

              const {  override,  addDecoratorsLegacy } = crave("customize-cra");  module.exports = override(  addDecoratorsLegacy(), );

That is an piece of cake way of enabling the Decorator'southward syntax as it requires minimal changes in the project. However, such an approach has its own consequences: it might finish working within future versions of the "react-scripts". In case it volition happen,you'd have to utilize the "Eject" or "Fork" approaches described to a higher place.

Conclusion

All in all, every bit you know Decorators provide united states of america with many benefits and the possibility to derive a profit from their vast functionality is a great chance for any developer. In this article, I've revealed several approaches of enabling the Decorator's syntax in React application and considered the benefits and drawbacks they have. Information technology's totally up to you what approach to choose, my chief point is: be on a coil - implement, use and retrieve all benefits from decorators now.

In case, yous have any questions or a slice of communication for your new project, experience complimentary to contuct us!

What's adjacent?