React(ing) to Components & Props

cover image from,840x830-pad,1000x1000,f8f8f8.u1.jpg

After a brief hiatus from the Flatirons program I’m back in it and learning as much as I can! During this second phase we learn React an incredibly powerful JavaScript library that allows you to create applications that are composed of building blocks which are known as Components. I’ll be discussing the use of Components, and their closely related sibling the Prop, and how they can make web development both faster and more organized in a couple of different ways.

What is a Component?

A React component is a javascript file that contains a function that is capitalized and returns JSX, which is html-like code that also contains javascript elements in it, which helps create HTML elements in your application. These components also accept props that allow you to manipulate what information is shown in each component, which I will go into detail below.

Why do we use these Components?

Components are the fundamental building blocks of a React app that allow you to build a dynamic or static site while simplifying the architecture from the developers perspective. Any sort of element that is used numerous times in a page is an excellent candidate to be a component and altering the input, or props, will allow you flexibility in changing what information is displayed in the same component throughout your application. The best example is having a page full of tiles that have different information on each of them but are styled in the same way.

What are Props?

A prop in React is information that is passed as a parameter to the component itself to be used within it. Props can range from variables, callback functions, or even stateful variables and are what allow you to render components that are stylistically identical but vary in their information that they display!

Why do we use Props?

Although the very basic premise of props is rather simple, they are an incredibly powerful aspect of React because they allow you to incorporate interactivity in one Component that actually affects other components either through a callback function that is passed or with the use of State.

What next?

I will cover State in my next blog and how it can be used and how it relates to Props, Components and React as a whole! Thank you for stopping by!

Resources used for my blog

Other than my usual resources that I have through Flatiron, I also used a mixture of React’s own documents, Youtube



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store