Javascript on David Lang

Store additional user information in firebase using react and javascript

Sun, 28 May 2023 00:00:00 +0000

To store additional information for a user in Firebase using React and JavaScript, you typically use Firestore or the Realtime Database, as Firebase Authentication does not allow for arbitrary additional data to be stored directly in user profiles. Here’s a step-by-step guide on how to achieve this using Firestore.

Step 1: Set Up Firebase in Your React App

First, ensure that you have Firebase set up in your React application. You need to install Firebase and initialize it in your project.

Simple Notes app using React, TypeScript, Node.js, GraphQL and MongoDB

Mon, 17 Apr 2023 00:00:00 +0000

In the series of the blog post, I am going to walk through step by step process of building a Simple Notes App using React, TypeScript, Node.js, GraphQL , and MongoDB. During the process of our development, we are going to use some useful npm packages like Express, Apollo-Server, Typegoose, Mongoose, TypeGraphQL , and Bootstrap.

Here is the Github Source Code to run the application.

Table of Content

Dev Environment Setup

We are going to set up our initial codebase and folder structure to get started. In this tutorial, I am going to use the Windows environment. The command structure is mostly the same and can be easily replicated to macOS.

Differences between getServerSideProps and getStaticProps in Next.js

Tue, 11 Oct 2022 00:00:00 +0000

Introduction:

Next.js is a popular React framework that enables developers to create server-side rendered applications with ease. Two essential functions in Next.js are getServerSideProps and getStaticProps, which help developers pre-render pages and optimize performance. Although they share similarities, they have significant differences in terms of functionality and usage. In this blog, we will explore the differences between getServerSideProps and getStaticProps and provide real-world examples to help you understand their use cases.

Simplifying State Management with React's useContext Feature

Tue, 19 Jul 2022 00:00:00 +0000

Introduction:

React, being a popular JavaScript library for building user interfaces, provides various tools and features to handle state management. One such feature is useContext, which allows developers to share state across different components without prop drilling. In this blog post, we will explore the useContext feature in React and demonstrate its usage with a TypeScript example.

Understanding useContext:

The useContext hook is part of the React library and allows components to consume values from a provided context. It provides a simple and efficient way to share state between multiple components in a React application. By utilizing useContext, we can avoid passing props through intermediate components, thereby reducing the complexity of the codebase.

Using React Hooks - useState and useEffect

Tue, 15 Mar 2022 00:00:00 +0000

With the release of Hooks in React 16.8, it is now possible to store state in a function. We can add react features like useState and useEffect into the function directly without needing to create class.

useState

The useState hook adds state to the functional components. useState hook allows you to declare one state variable at a time.

import React, { useState } from 'react';

function Counter() {
  //Declare the "counter" state variable
  const [counter, setCounter] = useState(0);

  return (
      <div>
        <p>Clicked {counter} times</p>

        //increment the counter by 1 on every click
        <button onClick={() => setCounter(counter + 1)}>Click here</button>
      </div>
  );
}

useEffect

The useEffect allows to manage side effects in a functional component. Some of the examples are fetching external data using api, manipulating DOM in react. It is similar to componentDidMount and componentDidUpdate from class component.

Modern JavaScript ES2020: Top Features You Should Know

Sat, 28 Nov 2020 00:00:00 +0000

ECMAScript 2020 added practical features that reduce boilerplate and improve null-safety. If you are still avoiding optional chaining, now is the time to adopt it.

Optional Chaining and Nullish Coalescing

const city = user?.address?.city ?? 'Unknown';

?. short-circuits on null or undefined. ?? returns the right side only when the left is null or undefined-unlike ||, it preserves 0 and ''.

BigInt and globalThis

BigInt handles integers beyond Number.MAX_SAFE_INTEGER. globalThis provides a standard way to access the global object in browsers and Node.

TypeScript for JavaScript Developers: Getting Started

Sat, 18 Apr 2020 00:00:00 +0000

TypeScript adds static types to JavaScript, catching bugs at compile time and improving editor autocomplete. For full stack developers moving between frontend and backend, it is one of the highest-leverage skills to adopt.

Installing and Configuring

npm install -D typescript @types/node
npx tsc --init

A sensible tsconfig.json for Node or React projects enables strict, esModuleInterop, and skipLibCheck.

Core Concepts

Interfaces describe object shapes. Generics make reusable components type-safe. Union types (string | number) model values that can be one of several types.

Getting Started with React Hooks: A Complete Guide

Sat, 15 Feb 2020 00:00:00 +0000

React Hooks arrived in React 16.8 and changed how we write components. Instead of class components for state and lifecycle logic, you can use functions with useState, useEffect, and more.

Why Hooks Matter

Hooks let you reuse stateful logic without higher-order components or render props. They keep related logic together-fetching data, subscribing to events, and updating the DOM live in one place instead of spread across lifecycle methods.

useState and useEffect

useState declares local state in a function component. useEffect runs side effects after render-API calls, subscriptions, or DOM updates.