DEV Community

Cover image for Vanilla JavaScript vs React (JSX)
Marcos Freitas
Marcos Freitas

Posted on

Vanilla JavaScript vs React (JSX)

As a software engineer student, learning "Vanilla" JavaScript was more challenging to me than learning React (JSX). Through Vanilla JS, it was harder to build proper architecture, so code would not quickly break; and to deal with DOM updates, and searches. The reason why is because "vanilla" JavaScript does not have third-party libraries like (React) full of tools to make our lives easier, as the general structure is dictated by framework and developer just have to follow good practice.

The UI (User interface) needs to be updated frequently and manually with Vanilla JS. React JS offers a fantastic feature as it has a virtual DOM, unlike Vanilla which breaks down the UI into smaller and reusable components. React (JSX) outperforms Vanilla JS regarding UI/UX (User interface/ User experience) performance because developers don't need to enter the DOM. It happens automatically.

Due to applications getting more complex and dynamic, Facebook created React library to assist speeding the development process up. "It was first deployed on Facebook's News Feed in 2011 and later on Instagram in 2012. It was open-sourced at JSConf US in May 2013. React Native, which enables native Android, iOS, and UWP development with React, was announced at Facebook's React Conf in February 2015 and open-sourced in March 2015". Which means that, the code is designed to be publicly accessible to anyone so they can see, modify, and distribute the code as they see fit. Open source software is developed in a decentralized and collaborative way, relying on peer review and community production.

React, also referred as (JSX - JavaScript XML); is an extension to the JavaScript language syntax. The combination of HTML and JS, allows us to write HTML-like code in our JS files.

See below an example of the difference between "vanilla" JS and React JSX syntax.

Vanilla JS being imperative which describes the actions a program should take, each step of the way and how a program should go about doing those actions

React JSX being declarative which describes what a program should accomplish or its end result, and leaves the determination of how to get to the end result up to the program

Vanilla JS vs React JSX

Vanilla JS vs React JSX

Here are some examples of the most influential software engineer languages and what they are being used for:
( https://bootcamp.berkeley.edu/blog/most-in-demand-programming-languages/ )

In conclusion, React JSX was particularly easier to learn in comparison to Vanilla JS due to its powerful library tools. However, every new language takes time and consistency to be mastered and that is the final goal.

Resources: https://en.wikipedia.org/wiki/React_(JavaScript_library)#:~:text=It%20was%20first%20deployed%20on,open%2Dsourced%20in%20March%202015.

https://bootcamp.berkeley.edu/blog/most-in-demand-programming-languages/

Top comments (0)