So much has been said about the appropriate way to style modern web apps. There's the general and oldest method of styling at document level - creating a style.css file and linking to it in the HTML file and more recently the method of styling in JS. This is popularly known as CSS-in-JS. CSS-in-JS is a styling approach that abstracts the CSS…
React Hooks were introduced to React to make state and side-effects available in React Function Components. Before it was only possible to have these in React Class Components; but since React's way of implementing Components has changed over the years , we have the class component's features available with React Hooks in React Function Components…
The Map Function is one of the many Methods existing on the JavaScript Array prototype . If you want to do a deep dive on prototypical inheritance, here's a great read by Kyle Simpson on how prototypes work under the hood . For this article it will be sufficient to know that the methods on the Array prototype are available to every array that…
So far, it was fine to rely only on React's local state and React's Context API. This tutorial dives into using MobX on top of React and Firebase for the state management. We'll exchange React's local state (e.g. users on admin page, messages on home page) and React's context (e.g. session management for authenticated user) with MobX. It will how…
The previous tutorial series covered a lot of ground for Firebase in React. So far, it was fine to rely only on React's local state and React's Context API. This tutorial dives into using Redux on top of React and Firebase for state management. You will exchange React's local state (e.g. users on admin page, messages on home page) and React's…
There are various advanced concepts and patterns in React to master on becoming a React developer. In this tutorial, I want to go through React's Component Composition step by step by evolving one example around this React pattern. You can find more about the topic in the official React documentation as well. Composition in JavaScript Let's take…
Today, I am thrilled to announce The Road to Firebase , my book that started as a tutorial in 2017 and has evolved into course material. The tutorial has been one of the most-read and well-received articles on my website, and this gave me the idea to add enough content to make a complete volume. Perhaps the best thing about the book is that I…
Those who follow my content know that I always use the good old Firebase Realtime Database in React applications. I am saying good old here, because there is this new cool kid on the block: Firebase's Cloud Firestore . It can be used as alternative to Firebase's Realtime Database . According to Google's documentation, there are four major…
This is a tutorial for setting up MongoDB on Windows. You might be wondering why there's a need for another setup guide for MongoDB in the first place, since there are a few across the web. I found many tutorials and guides on how to set it up, but found most of them to be unclear and outdated, based on old MongoDB versions. The checklist is not…
After we built a full-fledged application in React, the final step is deployment, the tipping point of getting your ideas out into the world, from consuming tutorials to producing applications. We will use Firebase Hosting for the deployment. In this section, I want to guide you through deploying your React application to Firebase. It works for…
