What is React?
React is a front end library built on JavaScript that allows developers to use pre-defined features to create applications. These features provide developers with a way to create reusable and easily maintainable code, called components. Each of the components corresponds to what could be considered a "building block" of what will become an entire application.
So what's the difference?
While JavaScript is the language React is built on, there is a different approach when writing React code vs. vanilla JavaScript. Javascript is an imperative language, meaning that each step is specifically written out and must be followed for that application to work correctly. React, on the other hand, is a declarative language, which describes what you want to happen.
It's always better to have a visual aid to go along with the explanation. Take, for instance, a button written in JavaScript :
const button = document.getElementById('myButton')
let buttonText = 'Click me'
button.addEventListener('click', function() {
if (buttonText === 'Click me') {
button.textContent = 'Clicked!'
} else {
button.textContent = 'Click me'
}
})
In the above example, each step must be written out to explicitly:
create a button variable
create a button text variable
attach an event listener to the button with conditional rendering
within conditional rendering, select content that will be displayed
Each of the steps in JavaScript is explicitly written out, step-by-step, to toggle what text will be displayed in the button.
Let's see the same thing, done in React:
import React, { useState } from 'react';
function App() {
const [buttonText, setButtonText] = useState('Click me');
const handleClick = () => {
setButtonText((prevText) => (prevText === 'Click me' ? 'Clicked!' : 'Click me'));
};
return (
<div>
<button onClick={handleClick}>{buttonText}</button>
</div>
);
}
export default App;
In the above example, we have created a component (App), and we use a Hook called "useState" to monitor the changes to our component. The 'buttonText' state is initialized with the string "Click me". When we want to change the state of 'buttonText', we most often use a 'state setter' which is a function provided by React, and is shown as 'setButtonText'. So, when we want to change the text from "Click me", we'll use the 'setButtonText' function and provide the conditional rendering within that function.
Our handleClick variable is typically used as an event handler for such functions as 'onClick' for buttons, as we are using here. So, when our button is clicked, 'handleClick' is called, and our state setter 'setButtonText' function is called. The provided logic in 'setButtonText' changes the state of the 'buttonText' based on its current state, and the component is re-rendered with the new text in the button.
Yeah, React is awesome...
In this example, React takes care of rendering the App based on the state and does so more efficiently by only re-rendering the portions of the application where state changes. As we love to do as developers, React provides a way to abstract away much of the mundane, or low-level DOM manipulation. React also makes it easier to maintain and reuse code when you don't have to worry about explicitly stating what happens at each step along the way, which is the case with an imperative language like JavaScript.
If you feel like you have a firm grasp on the core concepts of JavaScript, I would definitely consider looking at a framework (Vue is also great), and see if it makes sense for any of your projects( hint: the answer is yes. Yes it does make sense.)
Let me know what your thoughts on are React, Vue, or any other framework or library that you're interested in! And of course, feedback is always welcome!