Babysteps in React
It’s been 84 years… of HTML, CSS and Vanilla JS until we got introduced to React. Just kidding. These past 10 weeks has flown by quicker than I could ever imagine, and just as the arrow function and if-statements were starting to feel like home we’re heading into new territory.
To start with, you need to grasp that you’ll suddenly build stuff using code blocks that is very similar to Lego-blocks, instead of trying to mold one big piece of plastic. In that way it’s easier to set different settings for each block and create diversity between the blocks.
We’re also introduced to the lovely world of JSX. (What? You can actually combine JavaScript and HTML? YES! 🤩)
My top valuable Q&A of the week
So naturally, a few (kidding, I mean 3 billion!!) questions came up along the way. Some on JSX/React, some on CSS. Here are a few of them:
- “How do I loop over an array in React/using JSX?”
Starting to realize that the map-method, along with the filter-method, is one of the most valuable and powerful methods when working with a lot of data. One should just learn it. 🙌💁♀️
https://www.youtube.com/watch?v=JDuYnDHWLD8&ab_channel=DigitalOcean - “How do I change the appearance of a placeholder text?”
A simple google search gave me this:
To change the appearance of a placeholder, simply put ::placeholder in the css-file, or add it to your selector of choice. 👌
https://www.w3schools.com/howto/howto_css_placeholder.asp - “How do I make a background gradient animation?”
I really love this effect. In a couple of easy steps you make the webpage come to life, and saving the user a whole bunch of data and bandwidth by not using a video. And it’s so easy! 👀🤫
https://www.youtube.com/watch?v=NnrBempao2M&t=166s&ab_channel=DarkCode - “How do I write a ternary if-statement?”
Question of my life (this week). 😅 Just had to *bonk* it into my head. This video helped.
https://www.youtube.com/watch?v=s4sB1hm73tw&ab_channel=freeCodeCamp.org - “How do I add gutter/spacing between elements in Flexbox?”
You set the width to be the desired width minus the margins, by using calc() as a value in your CSS. (🤯, right?)
For example: For each album in our “Spotify”-project below, we assigned the wrapper to have: width: calc(25% — 10px), by doing so, we get 4 albums on each row, and we’re assigning 5 pixels of margin on each side, given that you’ve set the justify-content to space between, and align-items to center.
https://developer.mozilla.org/en-US/docs/Web/CSS/calc
Bonus: Demo-Time!
So, what projects came out of this struggle you ask?
A “Spotify”-wannabe site, built in React using the Spotify API
The first, swaying baby steps were taken while creating this Spotify-knockoff together with my classmate Emma. For this project we really got the chance to challenge ourselves with getting to know the React-concept and how to use JS in a JSX way. Super-fun! 🎊
A survey using forms and validation in React
Personally I’ve been struggling a bit getting a grip on Forms. How to connect the buttons, input and submit-function. Now it finally feels like I got it. 🤓 The biggest challenge (but also the most valuable) was to implement custom validation — to not let the user click ‘Next question’ before answering and not checking more than 3 checkboxes.
And finally, another bonus:
“How do you cut through a sponge for a birthday cake without ruining the whole thing?”
Use dental floss. 👌
https://www.youtube.com/watch?v=AZwhUCAJBz4
