React Transitions for Dummies | Part 1 : Transition, Styled Components and RandomColor

04/29/2019 12:49:21 AM

Overview

Simply learning on how to use the React Transition Group “Transition” component to make websites look awesome!

Who is this for?

This should be useful for those who are confused as I was and (to some extent) still am about component and page transitions especially in React.

Why I wanted to learn this

As a “self-taught” frontend web developer, I am always curious about improving on my skills in frontend. Prior to learning about page transitions, I really loved those websites on awwwards.com, where the page views are switched almost “musically”. No page reload just slide ups or fade ins etc. I tried using my basic React js skills (lacking precise understanding of transitions between views) and CSS but ended up having very choppy transitions. They were choppy and so bad that a simple page reload with GSAP transitions of the components on mount would have been significantly better. So yea, this is why I am devoting the month of May and June to mastering transitions using React.js by creating tasks with incrementing levels of difficulty. Since this is the first part of the series, the task here will be very basic. You know, in order for one to be a master, one should master the basics first :D. Hope that made sense, sawwy.

Note: I will be breaking down certain sections of the code not only for you to understand but for myself. This way, I can confirm the extent of my comprehension on this subject.

Task Overview

The goal here is to simply fade In a header, synchronously fade in and transform letters of a sentence one after the other when triggered to show by toggling a boolean variable . The opposite is carried out when the boolean variable is set to false.

Things to understand

React Components

Stateless

These components are usually termed functional or purely presentation due to the fact that they neither have nor manage any state (Disregard the react hook useState here). These are recommended to be used more often since they are less “manipulative” than those that change the state.

An Example

Stateful / Class (before Hooks)

Not all class components manage a state but they can. To setup the state in a class component, you will need to do this within the constructor method which is called upon creation of an object modelled after a given class.

An Example

Random Color

A script that allows you to generate colours randomly. Find out more about this module here .

ES6

New features added to Javascript to make our lives more complicat… I mean easier. Kidding :D. I really like the shorthand syntax because they reduce the source code size. You can delve more into this topic here .

Spread Operator

Let say you have a function called add that takes a number of arguments of type integer or float and the function returns the sum of the numbers.

What if you have an array with numbers as its elements, whose first three elements you want to sum using the add function. How would you achieve this without ES6 ?

Option 1: by indexing

Option 2: By using Function.prototype.apply

Template literals : string interpolation

I really love this feature. Prior to ES6, whenever I needed to add a variable into a string, I would need to use the + operator. But with template literals, I can actually ADD it to the string;well along with other symbols.

Object Property Shorthand

Another cool feature that saves you from unnecessary repetitions. Remember the D.R.Y principle.

Destructuring array and object items into variables

A very useful feature when it comes to transforming array elements (or even object properties) into actual variables.

I recommend you practice using these new features as they really make the coding process very enjoyable and the code readable.

React Transition Group : <Transition/>

<Transition> is a react component that allows you to determine a component’s behaviour from one state to another. These states are : “entering, entered, exiting and exited”. Simply put, you could use this to fade in a blog article after the user clicks on an “open article” button and also use it to slide out the blog article when the user clicks on the “close” button. The props needed are: in and timeout. When the in prop is set to true, the transition begins its “ENTER” states (entering and entered ) else it begins its “EXIT” states (exiting and exited). On the other hand, the timeout prop defines how long the component remains in a state e.g. exiting. The <Transition> component takes in a function as a direct child which provides the STATE of the transition as a argument of the function. This function then returns the element you wish to transform. I know, you are confused. I was in the same confused STATE *winks awkwardly*.

How do actually use this transition to fade in on ENTER and fade out on EXIT ?

Mini Task

1. 1. 1. Fade in a span element on button click and fade out on second click

Solution

Using the style prop:

- - - - Set the opacity of the span element to 0 on “entering”
        
        Set the opacity of the span element to 1 on “entered”
        
        Do the opposite on exiting → exited

NOTE : Since a change in state triggers “redrawing” of the components, it is necessary to have the show / in variable in a state object. Hope you understood that… (I have a feeling you didn’t: Sorry in Advance )

Styled Components

I recommend you read the documentation:D.

Task’s Solution

Question

Ich bin nicht sicher ob deutsche Leser gibt, aber falls Sie lieber den Beitrag auf Deutsch lesen würden, dann sagen Sie bitte Bescheid im Kommentarbereich.