As a programming newbie there have been a few times I wish I could find the super simple overview of topic to get my feet wet. This post is a puddle to try out as an intro to the modularity and information flow of React.
I have learned a lot about what I don't know, I think part of the challenge in learning something new is that you have to figure out how to learn in a way that make sense to you. Any new topic is daunting but learning to be a software engineer can be downright scary. Lucky for us, some humans that came before us realized that things are a lot more manageable when we break them into smaller bits. So thats probably why we apply modularity to everything from cars and computers to furniture and grocery shopping; but why is it important for us to write code in a modular fashion?
The idea of modularity really started making sense to me when I started to learn React. React's components were therapeutic to my brain after trying to figure out scope or how and why a callback function works the way they do in vanilla JavaScript.
React Components are defined as independent, reusable bits of code, generally separated into different files. Nice little boxes with instructions and expectations (in other words modular, declarative programming)
heres an example of some of the components I worked on from a recent project; theres a folder to keep all of the different components in, and each file in that folder contains the code necessary to work on that specific feature.
ok, great- we have boxes, its tidy, but how do we get the contents of those boxes to work together and make the thing? We pass information between them with "props" and callback functions. Think of a tree, but also a waterfall- you know what- heres a visual-
We use props to pass information from a parent component to a child component or grandchild, for example- I had to take data received from a fetch request I made from the App component, and get it to both the Home component then the SongCard component as well as the Search component. All components needed the same information to either render the details about a specific song or to search, sift, and filter through those details to provide search results received from details about user actions.
In this example I'm using {songs} as a destructured prop to get my fetched data to the following components
<Home />
<Form />
<Search />
ok, fine- we can get information and let it move down the waterfall, by using props; but how do we let the parent know about something thats happening with the child (things like onClick events). Thats a job for a callback function! The argument to a callback function can be used like a...I totally don't have a good analogy here, so let's pretend a kayak is an efficient way to get back up a waterfall, the kayak carries the argument to a callback function back up the parent component. (don't worry, the kayaker has super human strength and can conquer any waterfall.)
This is how easy it is to get information about events like onClick and onMouseEnter to the parent that is doing the rendering via callback functions, onMouseEnter happens and then the {handleLyrics} function is called.
So, how do your feet feel after this overview of why Reacts modularity and information flow is easier to wrap your head around than you might think?
sources:
W3schools
react docs
sonia dumitru's blog
Top comments (0)