Commit34 //JS React [Building Component Trees]
I am studying JavaScript React with @skillcrush, in this module we will cover building component trees
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. Woke up with a killer knot in my back today. Pain can make it so hard to focus sometimes.
Iâve been thinking about consistency a lot lately. When it comes to weight lifting, roller derby, learning how to code, and even sometimes just being a friend. Showing up consistently can be so powerful.
This journey has been at times incredibly challenging, and in the words of Margaret Atwoodâs novel The Handmaids TaleâŚ
Nolite Te Bastardes Carborundorum
Meaning, âDon't let the bastards grind you down.â
Of course, the âbastardsâ could be many things. It could be capitalism, people who never believed in you, or even your own negative thoughts.
And so I have to keep showing up for myself. I know how capable I am. I know how much I bring to the table. I know what I need, when I need it, and how to continue showing up for myself.
With that, letâs jump back into this JS React. Itâs time to keep going!
Component Trees
GREENFIELD PROJECT
A new project, where developers are free to build their code from scratch with no legacy code.
Two phases to starting a greenfield project:
Breaking your UI into components
Coding a static version of your UI
COMPONENT TREE
The hierarchy of all the react components working together to render a user interface
Laying out components based off the rough UI:
Identify presentational components
Name the presentational components
Identify container components
Name the container components
To create static UI layout:
Write JSX in a single React component to render the UI
Break the JSX down into separate components
Using Component Trees to Build Your UI
In this module we are building our way towards creating a sticky note app. We want to have components like creating a new note, editing notes, deleting notes, searching notes, and keeping it all organized.
Component Layout
Identify the Presentational Components
We need to begin by breaking down the UI components by identifying the presentational components. Presentational components focus on render logic, meaning how the UI looks.
Name the Presentational Components
Next we need to name the presentational components. We want to use names that make it easy to identify which component of UI we are referring to.
Identify Container Components
Then we will identify any container components. Container components are focused on business logic, meaning handling data. This could be all the data for the sticky notes could be a container component.
Name the Container Components
Last we will name the container components. Again we will want to use names that easily identify what the component managing the data is handling.
Create Static UI
Write One Big Component
Initially we will write all of our JSX into one large component. This allows us to focus on getting the static UI to look how we want it to without working about data management.
Break the JSX Down Into Separate Components
Once we have the static UI down, we can determine how to best break it down into separate components.
We will need to determine the different between our presentational and container components based off a screenshot or sketch of the UI.
Take the UI and Box It!
OK! Now time to breakdown the components we think that we will need for the sticky note app. Here is my rendition:
Mine ended up being pretty similar to the instructors, except instead of the NewNote section they did Header and it encompassed the title as well.
Build Your Big Component
Time to start building out sticky note app! We have a code along video for this, so Iâm going code and listen along.
What we did in this part of the challenge was add CSS properties to the JSX, so that our notes app could begin visually taking some shape.
const App = () => (
<div>
<header>
<h1 className="app-header__title">Super Sticky Notes</h1>
<aside className="app-header__controls">
<button className="add-new">+ New Note</button>
<input
className="search"
type="text"
placeholder="Type here to search..."
/>
</aside>
</header>
<ul className="notes-list">
<li className="note">
<input className="note__title" type="text" placeholder="Title" />
<textarea className="note__description" placeholder="Description..." />
<span className="note__delete">X</span>
</li>
<li className="note">
<input className="note__title" type="text" placeholder="Title" />
<textarea className="note__description" placeholder="Description..." />
<span className="note__delete">X</span>
</li>
<li className="note">
<input className="note__title" type="text" placeholder="Title" />
<textarea className="note__description" placeholder="Description..." />
<span className="note__delete">X</span>
</li>
</ul>
</div>
);
From the code you can see we added a bunch of className properties to the elements on this component.
Decompose Your Big Component
Next we need to break this large component into separate components. After this everything should look the same, but the behind the scenes build will be different.
We are given another code along video, so Iâm going to follow along with that.
As you can see we added several additional components and made them all have their specific code tied to it.
We even broke the NotesList down into having individual notes as well.
In another lesson I imagine we are going to find a way to write some script to iterate these notes instead of having them listed multiple times.
For now⌠you can check it out on My CodeSandbox.
Quiz: Building Component Trees
Time to see what I learned today!
100% correct! That sure feels nice after struggling through these React lessons. Iâd like to say Iâm âgetting itâ, but I know Iâm still missing a LOT in my understanding.
Thoughts on building component trees? Iâd like to hear about your experience! Please leave me a comment.