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 […]
04/29/2019 12:49:21 AM
Simply learning on how to use the React Transition Group “Transition” component to make websites look awesome!
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.
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.
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.
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.
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.
A script that allows you to generate colours randomly. Find out more about this module here .
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 .
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
Based on my understanding, when using this method, by adding a context ( object which becomes “this”) as its first argument and an array as its second, the elements within the array are treated as individual variables, which can then be used by the function or method which called it.
However Es6 gives us a shorter and more playful alternative
Option 3: spreading
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.
Another cool feature that saves you from unnecessary repetitions. Remember the D.R.Y principle.
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.
<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
Solution
Using the style prop:
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 )
I recommend you read the documentation:D.
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.
