Understanding Components and Props in React.

Shadow — Mon, 28 Jul 2025 20:45:00 +0000

Introduction

My quest into React began with these two very special words: components and props. If you went to ask any expert in the field of software development, they would probably give you some scientific meaning of the two words that they learned, maybe from their university or an online lesson on a platform like YouTube. On the other hand, I decided to provide a straightforward explanation of these two terms. These are the definitions that I learned from my instructors at Moringa School

Components
They are building blocks that make up a React app.
They are useful as :

They help developers split their apps into separate files.
They help keep the code clean and easily maintainable.
Enable one to build apps from scratch.
You can be able to reuse parts of the app in different places.

You can have components such as ;

1.<Header/>
2. <Instruction/>
3.<Movie/>
and so much more.

Props.
They are a short form of 'Properties'. These are messages that you pass into components. They enable one to customize the output. You can write one component, but you can use it in many different ways using props. An example is as such;

1.<Movie name='The Sandman'/>
2<Header Title='Learnig React/>

To simplify them even further, think of components as an ice cream truck, while props are a different flavour of ice cream.

What I learned
I realized that when you make a component, you have to use knowledge based on JavaScript, and that you have to render it for it to function. For now, that is a different topic from the one that I am talking about, but to explain it briefly, rendering is showing something on the screen.

🐾BUILDING A DOG APP: A BEGINNER'S JOURNEY INTO JAVASCRIPT AND REAL-API'S🐾

Shadow — Sun, 29 Jun 2025 03:33:32 +0000

My journey all starts right after I finished high school. I've been drawn to how applications and websites are created, and it has piqued my interest. I therefore decided to join Moringa School in the Software Development course. At the end of Phase 1, we were instructed to create a project that aligns with what we had learned in that phase. I decided to create a web application that enables users to view, search for, and adopt dogs available for adoption. This project has taught me to work with APIs, manipulate the DOM, and so much more.

🐕🐕🐕What The App Does🐕🐕🐕
The Dog Adoption App allows users to :

View a list of available dogs(with images and breed info).
Search for dogs by breed.
Submit a form to add a new adoptable dog.

I went and used HTML, CSS, and JavaScript, and then connected a local JSON server that mimics an actual API.

Key Concepts that I learned

Using JavaScript event listeners that trigger actions like searching for a breed and adding a new dog. An example is click events.
fetch("http://localhost:3000/dogs") By using this I understood how one gets to POST and GET data
I also learned that it's necessary to organize your functions in JavaScript and IDs in HTML, as they are crucial if you want to reflect live data
Coding comes with frustration. There are times I felt that I could smash my Laptop or grind it up when you worked on a code all day and night then it still doesn't work. Luckily, I didn't give in to that; instead, I asked around for some help from some friends and classmates. You can be surprised by the amount of knowledge each has to contribute and understand that working together is key.
I've gained a massive respect towards people who do this and a great understanding that coding is not just wearing a hoodie in your parents' basement and then coding as if you are a pro, and later get rich. No, it's about understanding how each line of code contributes to an app and how each and every code is reliant on another.

I am looking forward to this journey and am really eager to learn new concepts that seem Greek to others and to better understand it. Happy Coding ❤️❤️❤️❤️

DEV Community: Shadow

Understanding Components and Props in React.

🐾**BUILDING A DOG APP: A BEGINNER'S JOURNEY INTO JAVASCRIPT AND REAL-API'S**🐾

🐾BUILDING A DOG APP: A BEGINNER'S JOURNEY INTO JAVASCRIPT AND REAL-API'S🐾