animating stuff with react-transition-group

I’m going to share the things I wish I knew, wish I had done, or was glad I did when I made my first React app. It’s a Pomodoro Clock, or a productivity timer. I built it for a freeCodeCamp project and to practice the React I learned for a Chingu cohort.

You can check it out live here, and the code is here.

Hopefully I can help some React newbies.

Read the React docs

If you’re just starting to learn React, start with the official docs. As far as docs go, the React ones are easy to understand and provide lots of examples.

Don’t do what I did and start with a React tutorial. I started with egghead.io’s The Beginner’s Guide to React (“Beginner’s” is a misnomer in my opinion) and it was rough. To be fair, I’ve heard egghead.io is meant for more experienced developers looking to get up to speed with a new framework.

I definitely learned a lot, but there was a lot of pausing videos, going back 10 seconds to hear an explanation again and again, and just looking at code and feeling lost. Things eventually clicked, but I can’t help but think I would’ve been better off starting with the official docs then checking out a tutorial.

I’m sure you can find a more beginner-friendly tutorial. However, looking at official docs first is a good practice and I think you’ll be better off in the case of learning React.

Know JavaScript well, or be ready to learn

Look at this short code-snippet:

class Counter extends React.Component {

constructor(props) {

super(props)

this.state = {count: 0}

this.handleClick = this.handleClick.bind(this)

}

Above, we’ve got an ES6 class (which is just syntactic sugar for prototypal inheritance) declaration. What is prototypal inheritance? What are the constructor and super functions? Why are we hard binding handleClick to this ? Do you know anything about lex-time scope in JavaScript?

Now, you don’t have to know the answers to these questions to make something in React. You could just assume that you need this or that piece of code to make things work and leave it at that. However, I think it’s important to understand things at a deeper level.

This code pattern is the bread and butter of React. Don’t you want to know what’s going on?

This is just an example in React where you’ll need a decent knowledge of JavaScript.

Know it well, or be ready to learn.

Think in React

Design your app into a wireframe or mockup and break it down into components. This will make the coding process much smoother.

For example, I started with this mockup.

I changed some things in my final app, but looking at the mockup you can see:

the orange app encompassing everything

2. an information button at the top-left

3. a history button for completed tasks at the top-right

4. a message/input in the top-center

5. a radial timer, clock, and up and down buttons in the center

6. a play button in the bottom center

Then I separated my UI into components. Each piece should represent some function or data.