React Lesson 4: Homework. Decorators and Mixins

As we saw in the previous article, decorators are just the Higher-Order components that add extra functionality to the passed component and return a new enhanced component. Before we get to our homework, let’s dive deep and understand how decorators and mixins work.

What are decorators?

Decorators provide a way of calling Higher-Order functions. What are the Higher-Order functions? They simply take a function, modify it and return a new function with added functionality. The key here is that they don’t modify the original function, they simply add some extra functionality which means they can be reused at multiple places. This special feature makes decorators so powerful.

Note: As decorators are not currently part of JavaScript, the below code snippets cannot be executed in the browser. You can use JSFiddle to execute and understand the below code snippets. In JSFiddle, you have to select the language as Babel + JSX as shown below: https://jsfiddle.net/iamshadmirza/62wgxcdz/1/

Let’s understand decorators with the help of an example:

Homework

Now we can continue with the homework and create a decorator that adds functionality to open one article and close the rest. Let’s create a new file src/decorators/oneOpen.js

As we discussed earlier in the decorator example, we wrap can any component and decorate it with new functionality which allows us to reuse our code. For example, toggleOpen functionality can be used with comments, authors and other places too. Let’s add this decorator to the ArticleList component.

Using Decorators

Decorators use a special syntax in JavaScript. They are placed immediately before the code being decorated and prefixed with an @ symbol.

Note: at the time of writing, the decorators are currently in the “Stage 2 Draft” form, meaning that they are mostly finished but still subject to changes.

Let’s use the decorator in the ArticleList component.

1. First, install babel-plugin-transform-decorators-legacy:

This is important to use the latest syntax for decorators.

2. Modify ArticleList:

Alternate way:

If you want to go with the traditional decorator pattern as function wrapper, you can simply do:

Remove @oneOpen above class and wrap class with the decorator. That’s it.

Mixins

Mixins are another way of sharing code between multiple components. The commons functionalities like openItem, toggleOpenItem, etc can be extracted to mixins and reused at different places.

Create a file src/mixins/oneOpen.js

Mixins are only compatible with React.createClass and not with the new ES6 class constructor. React.createClass has been moved to a separate module so let’s quickly install that:

Let’s update the ArticleListOld  with the mixin we just created:

Note: Mixins are deprecated and replaced with better and more powerful Higher-Order components which are basically decorators. React community encourages that you use HOC instead of mixins at all time. https://reactjs.org/blog/2015/01/27/react-v0.13.0-beta-1.html#mixins

This was to illustrate the use of mixins. We will only use decorators in the future.

Conclusion

Higher-Order Component and decorator patterns are powerful methods to reuse code at different places. Currently, they are widely used and are a replacement for old mixin syntax. You can still create your mechanism for dealing with mixing functionality between components.

You can check out the live playground of today’s lesson in the codesandbox below.

Edit React_lesson_lesson4

Reference:

Please compare our code with yours, and we will go further. Please check this repository for the right commits.

Previous lessons can be viewed here: https://blog.soshace.com/category/javascript/react/react-lessons/

435258_8a75_3

 

About the author

Stay Informed

It's important to keep up
with industry - subscribe!

Stay Informed

Looks good!
Please enter the correct name.
Please enter the correct email.
Looks good!

Related articles

React Lesson 15: Checking Homework progress from Lesson 14

Today, we are going to cover homework from Lesson 14 and add comment API to load comments. ...

React Lesson 14: Redux Thunk Deep Dive

In this lesson, we will understand the internals of Redux Thunk and the use cases where we should use ...

React Lesson 13 Part 2: Asynchronous actions

In the previous article, we used Redux Thunk and learned how to structure actions for asynchronous calls. Now we will update reducer to handle them ...

2 comments

Nikita Bragin December 19, 2019 at 3:52 pm
0

Hello, where can I find previous lessons? Could you add links to the article, please?

Sign in

Forgot password?

Or use a social network account

 

By Signing In \ Signing Up, you agree to our privacy policy

Password recovery

You can also try to

Or use a social network account

 

By Signing In \ Signing Up, you agree to our privacy policy