Among the many differences between React.js and Vanilla JavaScript, one of the most important is the interplay between Props and Components in React. The beauty of React is that your code is kept organized by compiling each individual subsection of your web page modularly -- in its own receptacle of code -- that is then referenced in parent receptacles. The component/props dynamic makes it easy to pass data and page functionality between subsections of your page. The benefits of modular coding via components and props include keeping code clean and organized, easier debugging, easier navigation, and a more manageable variable scope.

Components

Functional Components can be equated to a vanilla JavaScript function that returns JSX. A component is essentially a modularized function that returns a subsection of your webpage-- including the data you wish to display-- written in HTML. Components can drafted in to individual .js files, which are imported into sibling or parent Component.js files for rendering. All lower-level components are then referenced by your granddaddy index.js file to tie the components of your page together.

For example, you may have a "Cats.js" component on which you render your cat webpage Home Page functionality. You would then import your Cats.js component to its parent component (usually an App.js file) so it can exist with the rest of the components of your webpage.

Props

Props can be equated to function arguments in Vanilla Javascript passed as HTML attributes. Props are essentially a representative bit of variable data that can be imported and passed into child components as parameters. Props can be any kind of variable data type, though any prop that is not a string (numbers, booleans, objects, etc...) should be referenced in components with {curly brackets}. Prop object key value pairs are referenced with dot notation. One can also assign a "default prop" in the event that you need a default value to display in the absence of any assigned values.

Prop Destructuring

Sometimes we will want to pass an object as a prop. React has a lovely way of "destructuring" the prop object in our component so we may more easily use the key values of the object! Destructuring works by passing the props object imported in to the parent component and assigning them to variables with the same names of the object keys in the argument of the child component. See here:

Prop Drilling
Sometimes we need to send props through multiple layers of nested components to reach a base child component that needs to use the prop. This is referred to as "prop drilling". Prop drilling has some benefits, but is by and large is frowned upon as a practice. The benefits mean that there is a way to statically review the flow of the code without having to render any extra functioning or potentially break your code with complicated modifications. The main reasons prop drilling is so frowned upon include:

• It often results in refactoring the shape of some data (ie, an Object: {catList: {name: 'Kitten Face'}} turns in to {Catlist: {firstName: 'Kitten', lastName: 'Face'}}) down the line.

• It can result in over-forwarding props, or passing more props than necessary.

• Conversely, it can result in under-forwarding props by way of abusing defaultProps-- Often times this results in not being made aware of missing props.

• Renaming props halfway through (ie renders ). This evolution can make keeping track of the same prop differently named in another component tricky.

Component Lifecycle

Initialization: Props and/or State are assigned (State is an entire can of worms too big for the scope of this blog post, but you can read more about from how it works my colleague, Hannah Glazier, here).

Mounting:Then the component is "mounted" (created and then inserted in) to the DOM.

Updating: The component then undergoes the updating phase as soon as and every time props or state change.

Unmounting: The component unmounts from the DOM at the end of the cycle.

Here is a diagram of some of the possible rendering calls that can be made during the component lifecycle depending on the objective of your components:

Conclusion

Components and props are integral elements to the functionality of a React web page, and to cover their different use cases would make this an endless blog post. The basic points are: Components make your code modular, so they are easier to read, easier to debug, and easier to pass through your web application. Props are a way to pass all types of data through the component hierarchy with agility and ease, especially through methods like destructuring. Some prop methods, like prop drilling, can be helpful in some situations and hurtful in others. Components and their props are integral to the outcome of the component lifecycle, and therefore the functionality of your web page! As a software developer, I find using the component/prop system quite elegant in practice hand fun to boot! Happy modularizing!

Resources

React Props

React Components

React's Use State Hook by Hannah Glazier

Component Lifecycle

How to understand a component’s lifecycle methods in ReactJS

Intro to JSX

HTML Attributes

Introduction to the DOM