Ada Capstone Week 1 Day 1: Let’s Do This!

Even getting started with React has been an adventure so far. I went to upload my basic files after creating the app with npx create-react-app and immediately got a message asking if I wanted to ignore node_modules. My immediate reaction was, why would I ignore what I just created? But some quick google-foo told me that node_module can be installed with npm install if anyone clones my repo. Whew.

Note: I WILL need to check in the modules when I want to deploy, but I’m not deploying through GitHub pages, so I’m set.

I started by making a break and work component, with each having a state where I can add and subtract by clicking a button.

Because the default time will be seconds, but I want to more easily format time/minute/seconds, I am using moment.js. I installed it with yarn add moment and then added it in the relevant files with the default format of:

import moment from 'moment';

moment().format();

But then when I wanted to add a countdown component, I realized I needed the state to be in the app.js file, so moved it in order to let countdown access it.

And in order to dispay the time in MM:SS format, I needed another moment.js addition: yarn add moment-duration-format

The really exciting thing about day 1 was that not only did I get a version with buttons and timers that actually WORK, but I also got it published live on S3!

Deploying a static React app to S3 was easy and only took me about 5 minutes. I do imagine it will be a bit more complicated when I want to set it up with a custom domain…

Published by TheNoraR

Lover of all things web and geeky. Social media? More! Web analytics? Uh huh! Games? Yes please. Any chance I have to relate those to non-profits makes me happy. I'm passionate about my local, online, and global community.

Leave a comment