React Lessons. Lesson 6.

logo_og-4-1024x538

Let us continue our conversation about React infrastructure. But first, let us change our structure a little bit and move our Article component to a separate directory Article. So, let us create it. Change our component’s name to Index.js and add the following code:

Next we will add a bit of CSS to our project, so let us add the class to our component:

Next creat a style.css file in the same directory and write there:

Do not forget to change “import” in ArticleList:

and ArticleListOld:

Next we will talk about animation in React. How is it used? Respective “addons” exist for that purpose, which are included into separate ‘react-addons-css-transition-group’ libraries that we need to install:

npm install react-addons-css-transition-group –s

So, how does it work? ‘react-addons-css-transition-group’ controls everything that changes inside it. That’s why everything we want to animate should be covered into this react-css-transition-group. For example, our articles, and “body” in them. Let us import:

And add tags to “return” this way:

As we’ve said, CSSTransitionGroup watches changes of its child elements, when they appear or vanish. So, it can animate their appearance or vanishing. It animates by adding respective classes into DOM, according to some agreement. We’ve got “transitionName”, so let us give it an “article” value.

Now, every time when “body” appears, it will be given an “article enter” and “article enter active” class, which will enable you to do css animation. Add the following styles to our CSS file:

Moreover, let us specify “timeouts” for our animation. Information is also available in documentation. By adding these parameters to our “index” it will look this way:

Done! We’ve added some simple CSS animation.

And now let us turn back to more complex things. Let us remember shouldComponentUpdate – a method that gets requested after updating your component, when it changes “state” or “props.” Looking at its name we understand what it is responsible for: whether our component needs to be updated. Remember React working principles: we’ve got our virtual tree. For example, our open article has changed. What is happening at this moment? You are right – React updates the whole Virtual DOM. If an app is complicated, it can lead to “performance issue”.  And that is when our “shouldComponentUpdate” method is going help us. We describe it as our usual LifeCycleHook. Enter our CommentList and add:

So, once this moment has been reached, React will know whether the component has to be updated by rebuilding a virtual tree. This will happen depending on what this method will return. You can forbid any updates by returning False. Apps are generally written without this method being used. As for checks, if we want to do a check smarter, we will write something like this:

We cannot do it anymore, as we receive the same Array for access. A link to nextProps.comments and to this.props.comments is always the same, i.e. we cannot compare them by this simple ways. That’s why mutable data types are not too much welcomed in React. However, there is a solution of this problem – immutable data.

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. In fact, React is frequently associated with functional programming. So, what ideas does functional programming use? Let us list them:

  1. JavaScrypt specifics. 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.

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.

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

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

Make your remote work more effective – Hire your first remote professional today!

Please enter correct name
Looks good!
Please enter correct email
Looks good!
Please confirm that you agree

Related articles

12.04.2019

Top 15 Node.js Interview Questions | Theory and Practice for 2019

Node.js, a JavaScript run-time environment used by countless remote professionals today, is a hot topic in the web development sphere. To ace your>>>

Human Resources

Security, Back-End & Front-End Frameworks, Mobile Dev, Python, WordPress Podcasts — Part 3

Part 3 of podcast series on hot topics in web development; security, back- and front-end frameworks, mobile dev, WordPress, and>>>

Podcasts

JavaScript and React Podcasts: The Ultimate Guide to Web Development Podcasts — Part 1

This is the first blog post on React and JavaScript in a number of blog posts covering podcasts on web dev and engineering>>>

Podcasts
Never miss a story from Soshace
Looks good!
Please enter correct name
Please enter correct email
Looks good!
Please confirm to subscribe!