Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Lessons:9Length:42 minutes

Next lesson playing in 5 seconds


Free Preview: How to Animate Your React App

What Are We Building?

  • Overview
  • Transcript

If you want to add some life and engagement to your React app, animation is a great way to do it.

In this course, you'll learn how to add some sparkle to your web app with simple animations. Follow along with Stuart Memo and you'll build a basic to-do app, and then enhance it with UI animation. To start, you'll learn how to use React's built-in animation hooks. After you've become proficient with that, you'll move on to react-motion, a very popular and powerful animation library.

We've built comprehensive guides to help you learn JavaScript and React, whether you're just getting started or you want to explore more advanced topics.

1. Introduction

1.1 What Are We Building?

Hello and welcome to How to Use Animation in React, a Tuts Plus course with me, Stewart Emmel. This course is aimed to those who would like to spruce their web up a little by adding some nice animations as the user interacts with the page. You don't have to be an expert in React or animation for that matter. It will certainly be useful if you have a basic knowledge of how React works, as we won't be covering that here. Over the duration of this course, we'll make a small to-do app upon which we'll add some subtle animations using React's own animation API. Once we master the basics, we'll move on to the popular React motion animation library which will allow us to create more complex animations. Hopefully by the end of the course you'll be able to confidently apply animation to your own sites to breathe life into them and delight your users. Let's get started.

2. Code the To-Do App

2.1 Set Up a React Project

So the quickest and easiest way to create a react app in my opinion is to use this tool here create react app. This will basically generate our app structure and ultimately create little hot loading dev server for us. All we have to do is go where we want our project to be in the command line and type NPM install create-react-app. And we'll add a -g here so we can run the command from anywhere in our system. Great, then all we need to do is write create-react-app and dot, because you want to create it in the current directory. Right, so you may see this error here, as you can see, the tool is telling us that we require a newer version of Node. To use a more up-to-date version of Node, I recommend using NVM, which allows us to switch between installed versions really easily. By typing NVM LS, I can see what I've already got installed, and I can just see NVM use 6.2.2. Great, if you don't have NVM already installed, you can use this simple script to get going quickly. Okay, now if I try and run create-react-app dot again, Here we go. Okay, this all looks good, now all we have to do is run npm start, and we're off! Perfect, our own little dev server okay, open this directory in your favorite code editor. What you see here is the basic skeleton of a working app. If we open the SRC folder we see both JS and CSS files, so let's open up index.js cuz that's a good place to start. This is as basic as it can be, all this is saying is, render the app component in the element with the ID of root. So let's look at that component, again it's just a basic component with a render function retarding some GSX. Let's get rid of everything we don't need Let's get rid of everything inside the component. We also don't need to know the component styles, as we'll [INAUDIBLE] everything in the index CSS file, and this logo and clip too. Go back to the browser, and you'll see it's already updated for us. Perfect, an empty React project ready for us to get to work. In the next lesson, we'll get started in that to do the app.