Week 7! I feel like I say this all the time. Well, I at least think it all the time. I cannot believe how fast time is flying at this bootcamp. I am really trying to savour every moment as I am almost at half way!
Anyway, on to the week. This week was all about react! I had no prior knowledge of React and my first introduction came to me over the last weekend when I read some blogs and watched some videos on it to better prepare me for the week. I went into Monday excited to get my hands on it and to fully understand it. Getting used to it's syntax was what I was most apprehensive about. The combination of js and html was a revelation thats for sure.
It was fun getting used to basics of the syntax.
const greetingTitle = <h1>Hello World!</h1>
Being able to store html elements in variables was a new concept and it only got deeper when we began to separate our concerns and create components that took in props. Seeing functions like below:
const function PropsExample (props) {
return props.userName;
}
At first confused me. But after a great explanation at the School of Code I was able to comprehend its functionality and even change the parameters like below:
const function PropsExample ({ userName }) {
return {userName};
}
After understanding this I began learning how to create my own components. But we still hadn't utilised React's main feature; it's ability to react to changes.
This is when useState came in. Another interesting syntax with an array in place of a variable name;
const [text, setText] = useState("")
This allows React to track changes that occur on webpages and it does this through the use of a virtual DOM which is such a cool feature! It makes it much simpler to reload specific areas of the page when changes occur rather than reloading the whole thing.
The final thing we touched on were mutable and immutable changes. This was the final key in our knowledge that set us up for our hackathon. This week we had to use 'create react app' to make our own todo list app with immutable changes. Me and my partner did very well, we struggle for a while over the separation of our concerns and fully understanding the props. We didn't create the perfect app but the knowledge we developed over the day was great. It has helped me this weekend with the recap tasks the School of Code set us as I was able to better understand what I had to do and produce a working product in better time!
My main take away from each day in Week Seven.
Monday -
From Monday I will take away the basics of react! It was a good experience using this new tool in my code. It set me up for a good week.
Tuesday -
Tuesday was also another day of react. I understood why we touched on the complete basics of react on Monday. Being able to understand what is going on under the hood really helped me conceptualise the ‘create react app’ package.
Wednesday -
On Wednesday we spent time looking into React hooks. We specifically looked into the ‘useState’ hook and it just showcased how powerful react is even on its most basic levels.
Thursday -
We dived into the spread operator on Thursday and specifically focused on conceptualising, understanding and implementing mutable and immutable changes. It was a deep dive and the nuances of js never cease to amaze me.
Friday -
Friday was of course all about our hackathon and this week was great. I will take away the way me and my partner worked through challenged together iterating our app with small updates!
If you've got this far, thank you! Week Seven was a great introduction to React. If you want to follow along with my journey please do. If you want to contact me for any reason also the best place to connect with me is Twitter - @_pattisoj. You can also find my GitHub here. I hope you have a good week and, as always, happy coding!