title: How do I split up a large react component?
body: <p>I'm learning react by programming the cardgame Solitaire. My main component, where I render the game board and the cards, has become very large (700 lines and growing). </p>
  
  <p>The big bulk of that is all animation related and I would like to throw all the animation related methods into different files. </p>
  
  <p>I'm not sure how to go about that in React. If I was doing this in Ruby, I would simply create a helper module, import the module and call the functions on the module. Creating a helper file and putting the functions in there doesn't seem to work in React, because I don't have access to "this" in those functions.</p>
  
  <p>How would you deal with this situation in react? What patterns do people usually use when they want to separate out the logic in React components?</p>
  
  <p><strong>Edit 1 (added example component):</strong></p>
  
  <p>I've already read the React docs and I am already using Redux. My issue is that i have a lot of animations and UI moving around using JavaScript. Here's a link to the component I'm talking about: </p>
  
  <p><a href="https://gist.github.com/holgersindbaek/b8f134306148d12995dadf5e28d2d5b7" rel="nofollow noreferrer">https://gist.github.com/holgersindbaek/b8f134306148d12995dadf5e28d2d5b7</a></p>
  
  <p>I'm keeping the current state of the game in the components "state". Once the Redux state changes, the props update and an animation is set off (move a card from old position "state" to new position "props". Once the animation is complete, the state of the component is updated so it's the same as the props.</p>
  
  <p>My issue is that there's a lot of non-essential code in that component that's essentially just moving things around on the screen (initializeNewGame, initializeInteract, positionCardsOnBoard). How would you deal with such methods?</p>
  
  <p><strong>Edit 2 (I think I figured it out):</strong></p>
  
  <p>I've decided to place some of the animation functions in a helper file (animationHelper.js) and then import it in the React component and bind it to the component, so I can reference "this" in the animation function. I've updated the example to reflect the new changes:</p>
  
  <p><a href="https://gist.github.com/holgersindbaek/b8f134306148d12995dadf5e28d2d5b7" rel="nofollow noreferrer">https://gist.github.com/holgersindbaek/b8f134306148d12995dadf5e28d2d5b7</a></p>
  
  <p>That seems like a good solution to me. Am I breaking any best practices by doing this?</p>