What is React Why to use ?
React JS is a JavaScript library for single page applications. React also allows us to create reusable components. React allows developers to create large web applications that can change data, without reloading the page. The main purpose of React is to be fast, scalable, and simple. It works only on user interfaces in the application. This corresponds to the view in the MVC template
ReactJS is just simpler to grasp right away. The component-based approach, well-defined lifecycle, and use of just plain JavaScript make React very simple to learn, build a professional web (and mobile applications), and support it. React uses a special syntax called JSX which allows you to mix HTML with JavaScript. This is not a requirement; Developer can still write in plain JavaScript but JSX is much easier to use.
What is Vanilla JavaScript why to use ?
JavaScript is a text-based programming language used both on the client-side and server-side that allows you to make web pages interactive. Where HTML and CSS are languages that give structure and style to web pages, JavaScript gives web pages interactive elements that engage a user. Common examples of JavaScript that you might use every day include adding interactive behavior to web pages, Creating web and mobile apps, Building web servers and developing server applications. one more thing, when we say Vanilla JS which means plain JS.
What are the main differences between Vanilla JS and React JS:
1-) Vanilla JS requires a lot of typing
JS requires a lot of codes so would be little messy and that make it less efficient than React.
as you can above code, if we want to add click event to a piece of data. We have to find element as I did on the first line of code with on line 56, const utility and find it first li, on line 64, and do some conditional with the li’s inner HTML, so basically there more steps to do with JS than React JS.
2–) Vanilla JS is fragile
Vanilla JS is quite fragile as we use same example with the above, when you look at the const li, on line 64, I’m trying to find first li with typing [0] to end. So that makes this code fragile that after a little more time later, by mistakenly if I add one more li above to this li, our event listener won’t work because we have made first li different one anymore.
3-) React JS is for code organization
ReactJs is great for organizing the code. as you can see all the above code is on one page, script.js. on the other hand when you look at the below files ReactJs files, components and containers, So we have many files and folders with ReactJS to organize our code, each file has unque task. It is better that typing everything in one file as we did in JS.
4-) React JS files are reusable
If I’m making a Twitter clone, I want “like” buttons everywhere. Each tweet should have one. And they are all going to do the same exact thing, just with different data. With React, I just need to make one “LikeButton” component and drop it in wherever I want it (from, https://www.reddit.com/user/MetaSemaphore/)
There are more than four differences between Vanilla JS and React JS, but I found that those are main differences.
References
