This week we practiced React state and controlled forms by making a Typeform like product.
I started the project by going through the material and videos. I decided pretty fast that I wanted to a survey/booking site about something that is close to me: baking. I love to bake. 🍪
What I learned:
-
This week we continued with React. The main topic this was state. useState is a Hook that lets you add React state to function components, really interesting and usefull function. And I continued to learn and use props, components, npm:s and how to combine everything together. 👩💻
-
I did one component for every question, one for every button, one for the summary, one for header and a “parent-component” named form. In form I added all the functions, props and states. I also created three components for styling. 1 for main CSS (fonts, font size, heading), 1 for header styling and 1 for the form styling.
-
When I deployed my site and looked on it on my mobile phone (Apple) and the fonts on my header image wasn’t aligned at all. Everything looked good in Chrome and in DevTools so it was a issue with Safari. so I spent a few hours adapting the CSS so it would look good on the phone.
And I also discovered that links on buttons in ios15 on mobile turns blue. So I googled that and it seems that it’s a new and common problem. So I had to add color black on my buttons to make it work. https://developer.apple.com/forums/thread/690529
When a problem arose, I either googled, used dev-tools or asked my fellow team mates or class mates for help! 🙌🏻
My own reflection about React I struggled a lot with JavaScript. But for me React is more logical, I think it’s because of the structure. Maybe it’s more close to graphic design? Each component is like a layer in Photoshop or InDesign?
Link to Netlify; https://rosanna-bake-me-up.netlify.app/