Why React.js can better your website design than regular vanilla JavaScript as a developer

-


 Why React.js can better your website design than vanilla JavaScript as a developer

    Creating a single-page application is something that can be a nightmare to monitor when there are many moving pieces with lots of components. So, in this blog, I’m going to explain the general history of React, what React.js does, and show you some of the reasons why React.js can be better than vanilla JavaScript.



In this blog I am going to cover:

  • What is React.js?
    •  History and general info
  • What does React.js do?
    • The technical explanation
    • The short and simple explanation
  • How can React.js be better than vanilla JavaScript as a developer?
    • Promotes better file organization
    • Components in JavaScript
    •  Scalability 

 

What is React.js

History and general info 

    React.js is a web framework for the JavaScript library that is used for front-end development in 2011 and is currently open-sourced way back from May 2013. Its main goal was for it to be adaptively workable with developers for single-page applications, with it being very easy to understand, and is very scalable. Its popularity is certainly something to notice for it was the second most loved JavaScript front-end framework in 2020 by a Stack Overflow survey, and it is currently being used by a lot of tech giants. React.js was created by Facebook, specifically with a team along with a person named Jordan Walke.

Jordan is a software engineer that started the idea, creating an early prototype called “FaxJS,” which takes inspiration from XHP, a PHP extension that allowed XML code to be handled and worked with along with PHP. With React.js, it combines the use of multiple coding languages like HTML and JavaScript and makes them all work under JSX or JavaScript files. The reason for this design is that it can achieve multiple things, most notably being easier to read. 

What does React.js do?

The overall idea

    React is a program that is hard to nail down what it does for it has a lot of things it does being under the goal of being easy to read. To put simply React is declarative, it takes the overall goal of what you want to do and finds the best-optimized route to do it. Because of this, a lot of tasks that you would have to be planned out can be automated, making there be fewer lines of code you would have to write. Along with stuff like components, which can reuse HTML code for whatever need, and it becomes very easy to read.

React supports the server-side of a website, where the server just needs to return a ready to render HTML page with the React JavaScript to make the page workable. To put it simply, it makes the most of the interactions on the pages be on the client-side with the only exception being stuff like form data or having to get new content from the server. So, all the multiple documents of HTML with hundreds of lines of code be simplified and be done using React instead.  

There is just so much to talk about. There is easy app support for working on apps, easy testability for you to debug your work, this is all accomplished through react being declarative. The mash of HTML and JavaScript languages creates a way for developers who understand the basics of web design, to create effective and optimized code.  Optimization is key for how all this is effective, with the computer deciding what actions it will do with your ideas. It isn’t magic for how it all happens.  

The technical explanation for the optimization

    The way that a standard website works is that it has a programming interface for web documents called a Document Object Model or DOM for short. To put it simply DOM is a way for pages like HTML to talk to different documents like JavaScript or CSS. The way that it does that is it defines the documents and the object and nodes in the HTML for those other documents. This is great for the communication of different files like CSS, but the problems lie in it the HTML DOM being tree-structured. 

With the HTML DOM being tree-structured it allows it to be efficient to travel from node to node, and with stuff like CSS being parsed to then be applied to the HTML DOM tree, it makes it effective to do, but at a cost. If you were going to update the DOM tree using JavaScript, like changing the background color to be red for a div, with it encasing tons of elements (the div being a parent to tons of children and grandchildren.) The calculations and changes to the parent node would be fast, but the div and its descendants must be re-rendered, making it slow for programs having tons of child nodes that need to be calculated.

What React does is that It creates a virtual DOM or VDOM, that uses memory to simulate and work with the DOM by a library, which is called reconciliation. With the VDOM being in memory it becomes significantly faster to do calculations. That alone does not make it effective, what VDOM does is that it uses algorithms to find the best efficient operations for the changes for the DOM tree. It acts to plan out what changes they are doing for the DOM and its nodes. So that when its re-renders, all the changes are applied throughout the nodes. Avoiding the whole operation of having to recalculate the children of the parent.

How can React.js be better than vanilla JavaScript as a developer?




Promotes better file organization 

    React will always encourage you to organize and work with multiple files. The reason is that there will be a lot of things you will have to take track of. With multiple components, functions, rendering, and state it becomes a lot to handle if you were to fit it all on one page. However, React encourages file structures to make stuff a lot more readable and easy to get context for what each code snippet does.

Components in JavaScript

If you ever worked with JavaScript, you would know that creating HTML code inside of it can be very repetitive and off-putting, with reusability being good to strive for at times, but doing Vanilla JavaScript components can get complicated at times, and does not seem easy for people trying to understand what the component actually does at a glance. With React you can create easy-to-understand, easy-to-implement components for you to automate and reuse HTML code. If you have no prior experience with components, this type of coding can at least be familiar, with the code being a mix between HTML and JavaScript.





Scalability

    From the results of components, you can make it be very easy for it to be scalable. As automation can be achieved with data files like JSON for example. So you can do amazing stuff like automate creating multiple buttons with just one line of code like I did in my video.  There are also APIs that can go along with React making it even more scalable, and easy to read. Overall the scale of what you can do with react is just limited by just your own imagination. Which is something that is very good when making single page applications.

Conclusion

    React is very useful to easily create building blocks of what you would want to create for your scope. The amount of ease of automation, familiarity, file structuring that it promotes is great. It can turn the repetitive, confusing nature of what JavaScript does and flip it on its head to be developer-friendly and optimized. That is the reason why React.js is better than vanilla JavaScript.


References

"Stack OverFlow Developer Survey 2020" Stack OverFlow. https://insights.stackoverflow.com/survey/2020 (accessed Jan. 16, 2022).

Comments

Post a Comment

Popular posts from this blog

How to display filtered data for react.js

-
Image
 How to display filtered data for react.js   making tables and filtering data in react is something that doesn’t seem hard to understand. However, much like any coding language, how you implement your code can completely change how your code can be managed and how flexible your design is for your projects. In this blog, I will be talking about a way to write and display filtered tables.   Table of Contents Introduction Steps and Info Working with just React Creating radio buttons Creating a filtered table  Introduction  In college, there was this big final for Website Development Fundamentals which was a class teaching the basics of web design. For that class, there was a final project that lasted two weeks. In that project, there was a little assignment part called datasets where the point was to take 4 datasets. Being able to pick and choose which one to work with. Then have the data be filtered and displayed on the screen. I found that this part was a fu...
Read more