React vs JavaScript - Reusable Components and JSX
This lesson provides a quick revision on some of the main topics behind developing UI applications with React.
React#
π This lesson's quiz can be found - here.
ποΈ Solutions for this lesson's quiz can be found - here.
π This lesson's lecture slides can be found - here.
Though this course assumes some experience with the use of React, we're going to cover some of the core concepts of React in this lesson to bring everyone up to speed.
Traditional JavaScript#
In traditional HTML and JavaScript applications, JavaScript is used to directly manipulate the DOM (i.e. the Document Object Model). To make changes in our UI, we'd have to make references to the DOM and imperatively declare the changes we'd want.
For example, assume we had a simple <h2> element that said Hello World! and a button with an onclick listener that calls a changeGreeting() method when triggered.
<html>
<body>
<div id="app">
<h2>Hello World!</h2>
<button onclick="changeGreeting()">
Change Greeting
</button>
</div>
<script src="./main.js"></script>
</body>
</html>
Let's say we're interested in toggling the text content of the <h2> element when the button is clicked. To do so in native JavaScript, we have to get the reference to the DOM node in question and only then will we be able to change the text content of the DOM node.
Here's an example of toggling between the Hello World! and What is up! text when the Change Greeting button element is clicked.
let greetingTag = document.getElementsByTagName("h2")[0];
changeGreeting = () => {
if (greetingTag.textContent === "Hello World!") {
greetingTag.textContent = "What is up!";
} else {greetingTag.textContent = "Hello World!";
}
};
This works fine but the problem a lot of engineers noticed with large-scale applications is things get difficult to track very quickly. Certain libraries came to the scene to help structure things better with the Model-View-Controller pattern or even the Model-View-Presenter pattern. React came into the scene with a pretty unique way of solving this.
React#
React changed the paradigm of how we make changes to our UI with the help of something known as the virtual DOM. The virtual DOM is a cool term for essentially just JavaScript objects that represent the structure of the DOM.
When we make changes in React, we don't make changes directly to the actual DOM - we make changes to the virtual DOM. Why? Because it's a lot less expensive too. React then has the responsibility to compare the difference between the changes to the virtual DOM and the actual DOM, then patch the changes made to the actual DOM.
This has introduced a different way of building UI with React.
JSX#
React gives us the ability to use JSX, a non-standard syntax which helps us create markup in JavaScript.
Here's an example of using the ReactDOM.render() function to render an element on a particular DOM node.
ReactDOM.render(<h2>Hello World!</h2>, document.getElementById("app"));
ReactDOM.render() is often the starting point of React Applications. The <h2>Hello World!</h2> element passed in the first argument of the ReactDOM.render() is JSX - XML-like syntax in JavaScript.
This page is a preview of TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL