React on Firebase!🔥: Part 1

When learning React for the first time, developers might have to convince themselves why they are learning another JavaScript library! Questions like the following may arise:

🙋 What can React do that native JavaScript cannot?

✅ React enhances JavaScript by using a virtual DOM for efficient UI updates, promoting a component-based architecture for modularity, and offering features like JSX, state management, and lifecycle methods. It simplifies development with hooks, routing, and a rich ecosystem, making it ideal for scalable and dynamic web applications.

🙋 How do you declare variables in React? What are the differences among props, static, local and Refs ?

✅ Props in React are immutable values passed from parent to child components for configuration. Static variables are class-level and shared among all instances, often for constants. Local variables are confined to their function or block, used for temporary data. Refs in React allows direct access to DOM elements or component instances, bypassing React’s data flow and providing mutable, direct interaction.

🙋 Why are props considered "variables" even though they are not mutable?

✅ A great point! 💭 😲 Props in React are often called "variables" because they act as data containers that influence a component's behaviour and rendering. Although props are immutable within the child component, they can change as they are updated by the parent component, affecting what is displayed. Props pass data and functions from parent to child components, similar to how variables share data in programming. Despite their immutability in the child component, props store and manage data crucial for rendering and logic, aligning with the broader concept of variables.

🙋 Isn't React similar to when developers used to write all HTML and JavaScript together on one page?

✅ Yes, React can be seen as a modern evolution of the practice where developers wrote HTML and JavaScript together on one page, but with some important improvements such as Component-Based Architecture*,* Declarative Syntax*,* JSX (JavaScript XML) and Virtual DOM

🙋 Why can't we just use native JavaScript createElement() etc methods to write a virtual DOM? Why to use React for this?

✅ While it's technically possible to implement a virtual DOM-like mechanism using native JavaScript, React's virtual DOM offers specific advantages and is optimised for performance in ways that might be complex to achieve with raw JavaScript.

🙋 Is the JavaScript virtual DOM slower than the React virtual DOM?

✅ The React virtual DOM is generally optimised for performance compared to a custom virtual DOM implementation written in vanilla JavaScript. React’s virtual DOM benefits from years of performance tuning, sophisticated diffing algorithms, and efficient reconciliation processes.

The ToDo app

This will be a simple ToDo app with the following features: addTask, toggleTaskDone (tasks will be sorted at the bottom), and deleteTask. The data will be stored in the Google Firebase Realtime database. We chose Firebase because it is always online, lightweight, and doesn't require setting up a local database server like MySQL with XAMPP etc. The final version will look like the images shown below:

The UI:

The Firabase Database:

Tools we need:

➡ VS code editor
➡ Live server extension for VS
➡ Node.js
➡ Vite - A frontend tooling for the development environment
➡ Related NPM modules such as Firebase etc
➡ Bootstrap 5 CSS framework for styling

In our next post (Part 2), we will explore how to set up a basic React app for our ToDo application. We will add functionality that allows users to add a new task to the list.

Regarding adding the Firebase database 🔥: We will not connect our app to the Google Firebase Realtime database at this stage but will include it in the final part. This way, anyone can also use the application without the database if they prefer.