React Basics Objectives

Understanding the Virtual DOM

Imagine you are working on a whiteboard with sticky notes. Instead of erasing and rewriting the entire board every time you make a change, you simply replace the sticky notes that need updating. This is how the Virtual DOM works.

React uses a tree-like data structure called the Virtual DOM to model changes in the UI. Instead of updating the entire real DOM whenever something changes, React first updates the Virtual DOM and then calculates the minimal number of updates needed to the actual DOM.

This makes React fast and efficient because updating the real DOM is expensive, much like rewriting an entire whiteboard instead of replacing just a few sticky notes.

Creating Virtual DOM Nodes with JSX

JSX (JavaScript XML) is a syntax extension for JavaScript that allows you to write HTML-like code within JavaScript. JSX is how React creates Virtual DOM nodes.

Instead of writing:

const heading = document.createElement("h1");
heading.innerText = "Welcome to React!";
document.body.appendChild(heading);
    

In React, you can write:

const heading = <h1>Welcome to React!</h1>;
    

This JSX code is then transformed into JavaScript that React understands, making it easier to create complex UI structures.

Transforming JSX into Actual DOM Nodes

Under the hood, JSX is converted into JavaScript functions that create React elements. Consider this JSX code:

const element = <h1>Hello, world!</h1>;

This gets converted into:

const element = React.createElement("h1", null, "Hello, world!");

React then takes this virtual representation and efficiently updates the real DOM.

Using the Render Method to Render Virtual DOM Nodes

To display JSX in the browser, React uses the render method from ReactDOM.

Consider this example:

import React from "react";
import ReactDOM from "react-dom";

const element = <h1>Welcome to React!</h1>;

ReactDOM.createRoot(document.getElementById("root")).render(element);
    

React takes element (a Virtual DOM node) and renders it inside the actual DOM node with the ID of root.

Attaching Event Listeners with Virtual Nodes

React makes it easy to attach event listeners using JSX.

Consider a button that logs a message when clicked:

const handleClick = () => {
  console.log("Button clicked!");
};

const button = <button onClick={handleClick}>Click Me</button>;

ReactDOM.createRoot(document.getElementById("root")).render(button);
    

This is much cleaner than manually selecting the element and attaching an event listener using vanilla JavaScript.

Setting Up a React Application with Vite

Vite is a modern build tool that allows you to quickly create and run React applications. Instead of waiting for traditional bundlers, Vite instantly compiles and serves your React code.

To create a new React project using Vite:

npm create vite@latest my-app --template react

Then, navigate to the project folder and install dependencies:

cd my-app
npm install
npm run dev
    

Once running, Vite will serve your React app instantly, allowing for fast development with real-time updates.

Creating a Custom Vite Template

To streamline project setup, you can create a custom Vite template that includes your preferred settings and dependencies.

Steps to create a custom template:

• Create a new Vite project using npm create vite@latest my-template --template react
• Install additional libraries you commonly use (e.g., React Router, Tailwind CSS)
• Modify index.html and src/main.jsx to include any boilerplate code
• Push the project to a GitHub repository

Now, whenever you start a new project, you can clone your custom template and get started quickly.

Why Learn React?

React is widely used in the industry, making it a valuable skill for web developers. It is known for its efficiency, reusability, and strong community support.

Real-world applications of React include:

• Building dynamic websites such as Facebook, Instagram, and Airbnb
• Creating interactive dashboards for data visualization
• Developing mobile apps using React Native
• Enhancing e-commerce platforms with fast and responsive UI components

Wrapping Up

In this tutorial, you learned:

• How React uses the Virtual DOM to optimize UI updates
• How JSX creates Virtual DOM nodes
• How JSX transforms into actual DOM nodes
• How to use the render method to mount React elements
• How to attach event listeners using JSX
• How to set up a new React project using Vite
• How to create a custom Vite template

React simplifies UI development by providing an efficient and declarative way to build web applications. By mastering these basics, you are well on your way to building dynamic, scalable applications with React!

Happy coding and welcome to the world of React!