Bootcamp Diaries - Week 9 - Frontend Part 1

Bootcamp Diaries - Week 9 - Frontend Part 1

2020, Oct 11    

Monday

Finally it’s time for…frontend! I’ve been looking forward to this block because I enjoy frontend design and I can’t wait to make things that I can style. That being said though, I know that we are going to be learning React this week and I’ve only done a small part of a React tutorial before, so I don’t really know how I’m going to get on with that.

Today’s lecture was all about the HTML DOM and how to manipulate it with functions and event listeners. After the lecture, we were given the task of building a simple TODO list, which included functionality to add, delete and tick off list items. We were working solo for this mini-sprint so we could have a chance to play around with it. You can see what I built here!. It doesn’t use any storage yet to save changes to the list (if you refresh the page, the list will go back to how it originally was), but I think we are going to look at that in later projects.

For me, today was quite a nice way to ease in to the week. During my time before bootcamp, I’d made a few mini projects to practice manipulating the DOM and using event listeners, which you can play with here:

Overall, today has been fun and I’m looking forward to making more mini apps!

Tuesday

Time for another day working on a mini sprint, but this time we would be working in pairs. The morning lecture introduced how forms work and how we can use them to validate information, such as checking that a password consists of certain characters.

After the lecture, we were put into pairs and got to work building our validation form. For the most part, it went pretty well. We weren’t concerning ourselves with styling the form, just ensuring that it did what it was supposed to! The tutors advised us all that we could split from our pairs at some point in the afternoon, if we felt comfortable to do so. However, we just ended up working together for the whole day as it took us a while to work out the best way to validate a date of birth!

Even though I’d built some forms before, I learnt a lot today in terms of using semantic elements to ensure that my form was as accessible as possible. I really want to go back and improve some of my older projects now!

Wednesday

Dun dun duuuuun! It’s finally time for React! I’m excited to learn it, but also kind of dreading it at the same time. In a naive way, I previously thought that frontend would be mostly about design, but now I’m learning that there is really a lot of complexity to frontend development.

React blue atom logo

This morning’s lecture was, of course, “Intro to React”. React is a JavaScript library for building user interfaces, and I learnt that we would be using it for the remainder of bootcamp.

Working solo, today’s task was to create a simple React app based on the lecture example; a list app that can hide or display pictures of puppies, with the ability to add your own pictures to the list. The concept of the app seems pretty simple if you were building it using HTML DOM, but React is a whole new ballgame!

This afternoon, we had another lecture about using function and class components in React. We learned how we could extract out components from the main React app, making them more manageable and reusable. In the example of our puppy app, we could make a “puppy adder” component which lives in it’s own file, but we can call on it in the main app when we want to add our own puppy to the list.

I was having a lot of fun making this puppy app, so I decided to work on it some more after 5pm. However, I decided to modify it into something I found more amusing, so I created a meme app. You can store and add your favourite meme dogs! I intend to add functionality to delete dogs, add a rating, and also have a separate list for cats!

animated gif of dog meme React app

Thursday

Over half way through the week already! I was feeling pretty tired from working on my app last night, but felt pleased that I’d managed to build something already after just day 1 of React!

So begins another pair-programming sprint. We had an inroductory lecture first about controlled components, then we got paired up.

As a pair, we could decide on a simple app to build, then we needed to work on our planning process and try to draw out the structure of our app. We decided to make a TODO list, since we’d recently practiced this with HTML DOM a few days ago, so we could imagine what we wanted to app to do. Trying to draw diagrams together remotely over Zoom was a bit tricky; especially as I didn’t have any of my drawing software on my Ubuntu laptop. We managed to do it by talking it through and drawing some physical diagrams, but this made me realise the importance of well-organised planning!

Friday

Last night was another late night, as I tried to add more functionality to the dog meme app I built on Wednesday. I really wanted to try and practice whilst certain concepts were still fresh in my mind. I am feeling shattered today but TGIF!

After a lecture about React states and lifecycle, we got back into our pair to finish working on our TODO list app. We hit a few snags along the way where we got a bit confused about how to get certain parts to work (we were stuck for a while on the functionality to delete a task from the list) but we got help from the tutors when we needed it.

By the end of the day, we’d added all the functionality that we felt comfortable with and we both agreed that our brains were pretty fried after this week! The whole cohort got together on Zoom for an end-of-the-week round up and a bit of a show and tell of the apps we’d made. I was really impressed by some of the ideas and I just really want to make more!

For now, I think I’m going to try and take an actual break this weekend, as I feel like I’ve worked myself pretty hard this week! I can’t give you a verdict yet about whether I love React or not, but hopefully things will become clearer!