Commit33 //JS React [Presentational & Container Components to the Rescue]
Commit33 //JS React [Presentational & Container Components to the Rescue]
I am studying JavaScript React with @skillcrush, in this module we will cover presentational and container components
I am learning with Skillcrush. Please check them out and consider signing up if you're looking to break into tech! Receive $250 off your course by using the link above. Use the coupon code: TWIXMIXY
NOTE: this discount is for Break Into Tech + Get Hired package exclusively. It's the same program I am participating in!
🌈 Greetings travelers! We are continuing our JS React course with Skillcrush. Sometimes I feel like coding can be like weight lifting. It’s about consistency and showing up for yourself in the moment.
And just like weight lifting, I am slowly and surely making gains in my coding skills. I feel re-energized to learn this material and to see what the future holds for me. Join me on this journey and go ahead and give me a follow here and on Twitter.
Presentational & Container Components
Why React Rocks:
Efficiency
Popularity
Power!
Presentational Components
Functional Components
Concerned with how UI looks & receiving data & callback functions via props
Uses that data to return JSX
RENDERING LOGIC
Any code that affects how the UI is rendered
Container Components
Stateful Components
Concerned with how UI functions
Provide the logic for updating data models
BUSINESS LOGIC
How the data is organized and used
SEPARATION OF CONCERNS (SOC)
The process of breaking down code into well-defined jobs, so each component & module has a clearly specified task
How to SOC:
Define separate presentational components
Import your presentational components
Render presentational components with props
How Presentational & Container Components Break it Down
OK, so the information above was from the intro video to this module. And now we basically do our reading review. Sometimes the information will differ a bit. In the video they showed an example of separating out the container components into their own JS files and then exporting and importing into the main file.
In the written lesson we reviewed the flipboard website where it broke down all the potential components that will go into a website.
I guess what I am more now seeing from React is that you are basically building out a vision board of what you want and need first, then you will build in the UI and the framework. If that makes sense. Previously I feel like it was always talked about like building the frame (HTML), then the UI (CSS), and then add on any fancy JS stuff to make it functional.
I could be way off base, but this is just what I feel I an perceiving. React then allows us to use some pre-existing components to utilize within our websites so we don’t have write as much code.
Since I’m still not fully understanding my earlier React lessons like about Props and Rending and all of that, this isn’t full lighting up in my brain yet, but we must continue! And I know there are a lot of free resources out there for me to practice this once I complete my Skillcrush course.
Decompose The color Palette App!
For this challenge we are to review a color palette app and determine the breakdown of components and markup a screenshot identifying them.
Here is how I broke it down from reviewing the DevTools:
It was fun to playin photoshop again, even if it was to do something super simple! I used to so much when I was a kid.
Employ Presentational Components
Now we have a coding challenge. There is a follow along video, so I’m going to go ahead and utilize that.
That was weird! The video didn’t really show how to do the work. It basically showed the break down of the components and discussed them. I was so distracted by there not being any directions that I just went and looked at the solution code to figure it out.
Quiz: Presentational & Container Components to the Rescue
Here we go!!
Two errors and I definitely didn’t feel as sure answering them.
Question #7: When organizing presentational components, you’ll put them in their own:
INCORRECT
Your Answer: Cozy component corner
Correct Answer: Modules
Question #8: Each presentational component should be responsible for ____ section(s) of the UI.
INCORRECT
Your Answer: All
Correct Answer: One
That was a bit of a rough module. I really hope and to some extent do think that it’s coming together. I know this is a long journey of learning.
ANYWAYS… time to go get ready to watch the Survivor finale with some friends. Hope you all are having a great week! <3
How did you learn JS React? Any courses or challenges you would recommend? Please leave me a comment!