Why this topic?
A beginner practicing and using Javascript in the world of coding may have heard of React. Before diving into React, it is important to have a basic understanding of what Javascript is. Javascript is a widely used programming language used to build out web applications and works well across all web browsers. As Javascript was being practiced and it's popularity increasing, the Javascript community recognized patterns of code that were being repeated to accomplish the same tasks.
A software engineer wants to uphold the principle of being DRY( Don't Repeat Yourself), and in the process of staying DRY, the development of Javascript libraries and frameworks came about from rewriting these repeated patterns of code. What Javascript libraries offered was that instead of writing these common patterns of code, code snippets were used to automate reoccuring animations and interactive forms that appeared on website applications. These prewritten code snippets were used and reused to perform common Javascript functions, and these Javascript librares were collections of said prewritten code snippets. Javascript librares were beneficial because it led to faster development of web applications that were less vulnerable to errors. React is one of these Javascript libraries and will be the focus of this discussion.
What is React?
As mentioned before, ReactJS is a Javascript library and it's speciality lies in helping developers build user interfaces (UI's for short). React is a popular, if not, THE most popular Javascript library being used by large and famous companies all around over the world such as Uber, Amazon, Instagram and much more. It's worldwide use has promoted lots of growth in the developing community, despite it only have being in 2011 by Facebook. React libraries help developers build rich, efficent front-end abstractions with less code and less time as well. To expand, ReactJS is a web-component based library and an open source Javascript framework that enables developers to manipulate each state of the Javascript application to have it appear simple in a visual manner. When there is a change in state or data of the Javascript application, React effeciently updates and renders the right components hence why these abstractions require less code and save more time. Javascript libraries can use and reuse the same lines of code and React is no different in where React would reuse and recycle different components across the web application. These components can be made up of navigation bars, headers, forms, buttons and the like.
Calling Components
To appreciate the value of using React, it is important to get comfortable with it's most important basic which is the Component. React can be described as a lump of components, and that lump can call on other smaller lumps of components. Since the components can call on each other, component abstraction can be used for any level of detail.
Let's look at an example of React at work
In this example, there is a button that has the name of "My Button". This particular button has an event handler that needs to be used multiple times. With the power of React and manipulating components, the MyButton component can be reused again throughout our main application.
As seen above, the main component has a name of "My Main". This particular main component is returning a main element, and within this main element are three paragraph elements that each contain the MyButton component. What this means is that the code for the MyButton component is being reused not once, not twice, but three times in each of our paragraph elements that are being contained within the Main component. To further provide example of being able to reuse components in React, the code for Main component will finally be then reused in the App component.
The App component from above is returning a div element that contains the reused code for the Main component. Through the power of components, using code and reusing code is more efficent and saves the trouble of having to rewrite code which can be prone to having errors and helps the developer in staying DRY.
Conclusion
A software engineer's common goal should be in always trying to improve their personal code writing skills. In order to do that, it is important to uphold the principle of keeping DRY. React does an effecient job in helping the developer in keeping DRY through the use and reuse of components. However, React is a beast of it's own and has it's own personal rules that it abides to. It is strongly encouraged to take a deep dive into React and understand the specifics as how components can transform web-based applications. Of course, a challenge that can always be recommended is to take on a project using said language or library. A particular strength of a software engineer lies in their code writing and as always, it is important to take your steps towards keeping DRY!
Resources
https://legacy.reactjs.org/docs/components-and-props.html
https://generalassemb.ly/blog/what-is-a-javascript-library/
https://www.knowledgehut.com/blog/web-development/reasons-to-learn-reactjs
Top comments (0)