Learning to JavaScript (JS) couple months ago, for me, it is a little overwhelming. I came from a background that I didn’t need to learn much of the computer language, so learning how to write and communicate in software language is pretty different from what I used to.
After switching from JS to React.js, it is like the sport car version of the plain old (vanilla) JS. Although you can use either one to get to the result that you would like at the end. However, it might take longer for vanilla JS to accomplish such task. React.js technically is a library that was built from JS dependencies. It provides tools for the developers to better organize and structure the web application. What is special about React compare to JS is the ability to organize and compartmentalize different sections of code statements into different React components. Instead of having the whole code blocks into one long chunky JS file, the ability to separate and organize different functions of the code into their relative component files not only it is cleaner to look at, but also easier for the developers to debug or further editing their application if needed.
There are three main key features of React (From the React docs (Links to an external site.)):
- Declarative programming: With React.js, we no longer needed to write codes in imperative programming (that means we need to write explicitly, step-to-step, on how the program goes from point A to B to C and to the end point). In declarative programming, we only need to let the program knows what the end result should be and leaves the intermediate steps and determination to the program itself.
- Component-based: As mentioned above, the ability of having a clean, less chunky, and organized codes are what React.js is about. When there is a bug within your code, you can easily track where the source of error might be located by tracking down the error message, the error should be contained within the React component file. If it’s written in vanilla JS, we might need to spend more time on locating the particular error within the long, chunky block of codes. Lots of scrolling to find those bugs….
- Learn Once. Write Anywhere: This is a concept where the developer can find it easier to learn other tools like React native, Next.js, and Gatsby as they share similarity across different tools and platforms.
One of the main features of React.js are hooks. Hooks are like the side features for writing your program. If you need to write a certain function, the chances are someone else has previously written and tested it already. These hooks allow developers to clone and use these hooks in their application. This way, not only you are not introducing potential bugs that you accidentally code into your application, but you also spend less time on writing such code. There are different type of hooks available in React.js, making it a library instead of a framework.
Building an application with React.js was not as hard as building one from vanilla JS. As a novice, when I built both projects, I faced with different kinds of bugs and syntax errors. However, when building this application with React.js, I found it much easier to pinpoint the different source of errors and bugs within the compartmentalized React files. All files are directly linked to another. They are connected via “props”, information pass down from the top to bottom files, parental and child/ren files, making it relatively easy to identify component files that contain errors. In general, I spend more time on debugging other than writing my codes. This feature helped me to better organized and troubleshoot when I encounter errors in my application.
