Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Working with React: Question on deconstructing components

So, I’m going through some React studying and I’m current just doing small code. I was writing two files. The first is where my data is in my variable. I’m using a basic map method to loop through my array of objects and displaying the information as is. Extremely simple and makes perfect sense. screenshot of my code from my gitHub repository.

However, after that I wanted to try practicing with props and deconstructing my array of objects. So, i created a new file component labeled as Movie and passed it through to my Movies map method. Using props, I pass through the movie name and release year through to render. I understand that using this method turns each list item into it’s own component, but I’m not understanding exactly why this can be useful? Can someone give me some examples of this being used in a practical situation or point me to some repository’s where it’s being used better so I can better understand this use of deconstructing an array of objects? Thank you!

I think the most confusing part for me is I’m still calling Movies in my App.jsx to render the data, so it feels like I could just not have the Movie component at all and have kept them within the one component.

Movie File
Movies file after using props to pass information along to the Movie file.

Code works as intended. Just curious on the logic behind why it works.

Tags:

2

Answers


  1. 0

    So, it might not seem very useful for now, but let’s say Movie Component has a button. On button click, there is some action that is happening inside Movie component only. So you would not want your whole app to re-render. That’s why you create a <Movie/> component.

    Another major use case is when <Movie/> component has some styles that needs to be reused. Now you can create common CSS class, but what if you need some functionality in it too. You can think it like all the Modals of any application are one component. That’s why you need components in a react app.

    For your case, maybe, directly using the <li> is more sensible, but it won’t be once your requirements gets complex.

    Login or Signup to reply.
  2. 0

    We can see things in the real world as either monolithic (“a single large block”) or things composed of components. For example, how do we see a car ? Do we see it as a single large object ? Or as an object composed of many components, being a little more specific, an object composed of components which in turn is composed of components nested within. I stop here since my answer turns out to be an opinion based one which is not the purpose of this forum. As we know, Stack-overflow is a question and answer forum. However, if you yourself apply some thoughts on the questions and the points we started with, you yourself will find good reasons to think in terms of composition. You will soon find monoliths are like a black box or mysterious in nature.

    Now functional programming (fp) is the paradigm in which React library has been built-into. In functional programming, functions are the programming constructs. Therefore deconstructing of functions is its foundational requirement. Although fp lends itself to lengthy discussions and study, the React team has done an excellent job for all of us. The official documentation has the following four sections. It is quite sufficient for everyone, including programming novices, to understand the design principles and the library in detail.

    1. Describing the UI
    2. Adding Interactivity
    3. Managing State
    4. Escape Hatches

    The starting section Thinking in React will answer your question directly with all reasoning and examples. Therefore I request, you may please take a look. If you find any difficulty there, then step back, and start from Quick start and then progress in a linear way. Wishing all the best.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search