g_rmz g_rmz - 1 month ago 8
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

animation
), I have put this block of code in my
index.js
:

// 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
    this.setState({
      animationCSS: getAnimationCSSFromDB
    })
  }

  changeAnimationCSS() {
    this.setState({
      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
  </div>
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.