React Lesson 6: CSS and Animation

Today we are going to add some styling and animation in our React app. We will also talk about the performance aspect of our app and how we can control re-rendering with the shouldComponentUpdate lifecycle method. Let’s start.

Adding CSS

We are going to add CSS to Article.js file but before that let’s create a separate directory that will contain both Article.js and it’s style.css.

  1. Create an Article directory and move Article.js inside it.
  2. Rename Article.js to index.js.
  3. Create a stylesheet style.css inside Article directory
  4. Update imports

Now we will add a className property to the div we want to style


Let’s add some CSS in the stylesheet for the article className we just added.


We can also add sometimes styling to the links and make it more like a button


Our app is starting to look better now:

Let’s understand the animation now:

CSS Animation

There are some addons/libraries which makes our job easier. One such library is the react-transition-group. It manages our component state over time and controls the animation after we define how we want it to be.

Install the module

You can use npm or yarn upon your choice.

Import the module in Article.js and wrap the component which we want to animate

The library provides CSSTransition which accepts some props and takes care of the animation.

  • in prop of CSSTransition expects a boolean value that marks the enter and exit of animation.
  • We provide a classNames prop as CSSTransition applies a pair of class names during the appear, enter, and exit states of the transition.
  • Child component receives a set of classes upon the value of in prop. Let’s add these class and animation inside style.css


These classes watch for the child element when they appear or vanish i.e. enter or exit. The CSS properties defined inside these classes will animate the child element accordingly.

Visit this link to learn more about the properties available.

And we are done with our simple CSS animation. Now let’s move on to enhance the performance of our app.

Performance

Let us recall how React works. It watches for state changes and updates Virtual DOM. In our case whenever we open or close any article, we are changing the app state triggering a re-render. This can lead to performance issues. Luckily, React gives us a method that can specify when we want to update our app.

shouldComponentUpdate


The default behavior of any React component is to re-render whenever the state changes. We can use shouldComponentUpdate() to let React know if a component’s output is not affected by the current change in state or props.
Render triggers the value we return from this method (default is true). shouldComponentUpdate() is invoked before rendering when new props or states are being received. This method is not called for the initial render or when forceUpdate() is used.

Let’s add this method in our CommentList component.


When this method is invoked, React will know whether there is any change or not and it will re-render accordingly.
You might be wondering if we do the same with comments:


This will not work as we are receiving the same array so nextProps.comments and this.props.comments are always the same. That’s why React favors Immutable data. It simply means the data never changes or cannot be modified.

Immutable data

Immutable data cannot be changed once created, leading to much simpler application development. React can watch for state changes much effectively eliminating performance issues.

Let us look at Immutable.js for instance. Using this type of data is pretty handy, looking from the very React programming paradigm point of view. React is frequently associated with functional programming. So, what ideas does functional programming use? Let us list them:

  1. Functions should be objects of the first order, i.e. you can use their variables, return them as another function’s results, transmit a function as arguments.
  2. Pure functions are those working only with internal functions. Stable functions can be used anywhere and are liked by many.
  3. Immutable data never change. These are data that were initially created and get no change. It means, to change data in a new object, a new object with changes will be created, but an old one will be accessible, too.
  4. In our case, you will always be able to write this kind of shouldComponentUpdate, where you will have an opportunity to compare old and new comments, and it will speed up your work on developing the app.

In your home task, you will need to read documents on Immutable.js. Next time we will talk about Redux.
We will also need to integrate a third-party component day-picker. It will be added to our Select and present a selected range of dates by the “ArticleList for” and date. It is a calendar, where you can select a needed date and use it for filtration.

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

Edit React_lesson_lesson6

The lesson code together with previous lesson materials can be found here.

We are looking forward to meeting you on our website soshace.com

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 Lessons. Lesson 14.

Hey all! So, we continue working on our app. We already know how to make simple calls to the server and for 80% of possible cases this knowledge will ...

React Lessons. Lesson 13 Part 2.

"Dear readers! Do not forget about the first part of this article, beginners should start from Lesson 1." So, let us call these elements inside ...

React Lessons. Lesson 13. Part 1.

Our topic for today deals with asynchronous actions. We will start to take our articles from API. As you have already noticed, we have a simple API ...

No comments yet

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