When first learning React, a key concept you’ll encounter are components. These are essentially building blocks for your app. They help to make your code “dry”, dynamic and are an essential part of what developers like to call SOC, or separation of concern. To truly understand how powerful components are, it’s important to know why we use them.
What is Dry Code?
The term “Dry” code refers to the principle that it is both a bad practice and a waste of time to repeat yourself in coding. The excess amount of code we get when we overwrite can lead to a major decrease in readability and more room for bugs. Instead we prefer to keep out code D.R.Y, and one way we can do that is with react components. With these components, we can create reusable functions that can be referenced and passed down to cut out extra wording. This helps to make our code dynamic, which by definition is “characterized by constant change, activity, or progress”. In development, this just means, “can your code adapt to change?”. With components and props, this is very possible, especially with the help of dry code.
What is SoC?
In Development, this is the principle of separating your program into different sections based on what they accomplish. In theory, it’s possible to have everything in one place, but that would probably be chaotic. The readability of that app would be exhausting and it would be so hard to debug. Instead, we use components to separate our concerns and focus solely on them. This is very important here, because we wouldn’t want to code our filter feature in the same place we’re adding a form/add/delete feature. This lest us organize in a way that is beneficial for us and whoever else will read our code. After we’ve accomplished what we want, we can simply call this component in our parent app to render it correctly. Separation of concerns is such an easy way to avoid confusion and make an app more organized.
What advise do you wish you knew when starting with react? Open to feedback.
check out my github to see some of my react apps:
https://github.com/robinlashae1
Top comments (0)