g_rmz g_rmz - 1 year ago 66
React JSX Question

Is this a good React practice?

I have recently started playing around with React. In order to animate my components (using CSS

), I have put this block of code in my

// some code here

window.onload = () => {
let myComponents = document.getElementsByClassName('componentThatHaveToBeAnimated')

for (let c of myComponents) {
// add dinamically the CSS class containing the animation

//some code here

I do this in order to be shure that all the animations will start only when the page is properly loaded.
My question is: is this correct? And, if it is not, there is a better way to achieve the same effect?

Answer Source

React is great, but when having used Javascript (as it seems you have), it can be a bit tricky to understand and difficult to adjust (from experience). There is a great youtube tutorial on React by learncodeacademy, which really helps you understand react. You may also want to look at create react app for an easy way to set up a React project.

Now to your question :) This is not a good practice. React has its own "window.onload" called componentDidMount

Also you should not be using getElementBy unless absolutely necessary.

The beautiful thing about react is using states.

You css value should be a state.

An example of this would be:

import React, { Component } from 'react'
import MyComponent from './MyComponent'

class Animation extends Component {
  constructor() {
    super() //this always has to be called first in a constructor
    this.state = {
      animationCSS: '',
    this.changeAnimationCSS = this.changeAnimationCSS.bind(this)

  componentDidMount() {
    const getAnimationCSSFromDB = db.get(animationCSS) //This obviously does not work, but an example
      animationCSS: getAnimationCSSFromDB

  changeAnimationCSS() {
      animationCSS: //Whatever new css you may want

  render() {
    return (
      <MyComponent propertyForStylingAnimation={this.state.animationCSS} />
      <button onClick={this.changeAnimationCSS} label="Button" />
export default Animation

MyComponent might in this case look something like this

import React from 'react'

const MyComponent = props =>
  <div style={{ animate: props.propertyForStylingAnimation }}> // This does not work for animating since animate is not a css property.
    // Stuff
export default MyComponent

Understanding props can be a bit tricky, but if you follow the youtube tutorial by learncodeacademy, you will get it.

Notice that the second bit of code is much shorter.

This is because it is stateless. What this means is simply that there are no states.

This means I do not need to define the class that extends component, I can just use a constant. I also do not need to define render or return, since there is only one element (the div) that is being returned, no brackets are needed. This is not something you need to worry about initially when learning React but it is good practice.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download