DEV Community: Pramahadi Tama Putra

The Ultimate Guide to Versioning in package.json: What You Need to Know

Pramahadi Tama Putra — Mon, 29 Jul 2024 04:48:30 +0000

Hey React Devs! If you’re working on a Node.js or frontend project, you’re probably familiar with the package.json file. This file includes various symbols for managing dependency versions. Let’s break down these versioning symbols so you can understand and use them effectively!

1. Asterisk (*)
Example: "react": "*"
The asterisk (*) tells npm or yarn to install the latest version of the dependency, regardless of the specific version. This means you'll get the most recent release available. However, be cautious because this can lead to getting a version with bugs or major changes you didn’t expect.

2. Caret (^)
Example: "react": "^18.2.0"
The caret (^) allows npm or yarn to install the latest version within the major version specified. For instance, if you use ^18.2.0, npm or yarn will install the newest version in the 18.x.x range that is higher than 18.2.0, but still below 19.0.0. This is great for getting minor and patch updates without risking major version changes.

3. Tilde (~)
Example: "react": "~18.2.0"
The tilde (~) focuses on patch versions. If you write ~18.2.0, npm or yarn will install the latest version in the 18.2.x range but won’t move to 18.3.0 or higher. This helps ensure that updates stay within the same minor version.

4. Double Pipe (||)
Example: "react": "18.2.0 || 18.3.0"
The double pipe (||) is used to specify multiple acceptable versions. For example, "18.2.0 || 18.3.0" means npm or yarn can install either 18.2.0 or 18.3.0. This is useful if you know several versions are safe to use.

5. Version Range
Example: "react": "18.2.0 - 18.3.0"
With version ranges, you can specify an interval of acceptable versions. For instance, "18.2.0 - 18.3.0" means npm or yarn will install any version between 18.2.0 and 18.3.0, inclusive. This makes it easier to allow minor and patch updates within a defined range.

6. Exact Version
Example: "react": "18.2.0"
Specifying an exact version means npm or yarn will only install the version you specify. This ensures you always get the same version without unexpected changes.

7. Pre-release Version
Example: "react": "18.2.0-beta.3"
Pre-release versions like beta, alpha, or rc (release candidate) indicate that the version is still in testing or not fully stable. A version like 18.2.0-beta.3 signifies this is a pre-release of 18.2.0, and it might have bugs or unfinished features.

8. Latest Version (latest)
Example: "react": "latest"
Using "latest" requests npm or yarn to install the most recent version available of the package. It’s similar to using an asterisk (*) but more explicit about always getting the latest release.

Conclusion
I hope this explanation helps you understand how to use different versioning symbols in package.json. Choose the right versioning approach for your project needs to keep your dependencies stable and secure. If you have any questions or need further clarification, feel free to ask. Happy coding!

Unlocking New Features Without the Hassle: Firebase Remote Config for React Devs

Pramahadi Tama Putra — Sun, 28 Jul 2024 15:40:32 +0000

Hey React devs! Ever wanted to roll out new features to your app without the usual hassle of updating and redeploying? Don’t worry, I’ve got you covered. In this guide, we’re diving into how to easily manage feature flags using Firebase Remote Config. Let’s get started!

What’s a Feature Flag?
Think of a feature flag as a handy switch in your app. It lets you turn features on or off without needing to update the app. For example, if you have a new feature you want to test on a small group of users first, feature flags make this super easy!

Why Firebase Remote Config?
Firebase Remote Config works like a remote control for your app. It allows you to change app settings or enable features from anywhere, without having to push updates to your app. With Remote Config, you can activate new features for some users before rolling them out to everyone. How cool is that?

Here’s how to set up feature flags in your React app using Firebase Remote Config.

1. Set Up Your React Project with Vite
To get started quickly with a modern and fast development environment, we’ll use Vite. Create a new React TypeScript project with:

npm create vite@latest my-app -- --template react-ts
cd my-app
npm install

2. Install Firebase
Add Firebase to your project with:

npm install firebase

3. Configure Firebase
Create a file named firebase-config.ts in the src folder and add your Firebase configuration:

import { initializeApp } from "firebase/app";
import { getRemoteConfig } from "firebase/remote-config";

// Your Firebase configuration
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_PROJECT_ID.appspot.com",
  messagingSenderId: "YOUR_SENDER_ID",
  appId: "YOUR_APP_ID",
  measurementId: "YOUR_MEASUREMENT_ID",
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

// Get Remote Config
const remoteConfig = getRemoteConfig(app);

remoteConfig.settings = {
  minimumFetchIntervalMillis: 5000, // 5 seconds for testing only
  fetchTimeoutMillis: 5000, // 5 seconds for testing only
};

export { remoteConfig };

Replace firebaseConfig with the credentials you get from the Firebase Console.

4. Create a Custom Hook
To make things easier, create a custom hook in hooks/useRemoteConfig.ts :

import { useEffect, useState } from "react";
import { remoteConfig } from "../firebase-config";
import { fetchAndActivate, getValue } from "firebase/remote-config";

const useRemoteConfig = (key: string) => {
  const [value, setValue] = useState<boolean | undefined>();

  useEffect(() => {
    const fetchConfig = async () => {
      try {
        await fetchAndActivate(remoteConfig);
        const fetchedValue = getValue(remoteConfig, key).asBoolean();
        setValue(fetchedValue);
      } catch (error) {
        console.error("Failed to fetch Remote Config", error);
      }
    };

    fetchConfig();
  }, [key]);

  return value;
};

export default useRemoteConfig;

5. Use the Hook in Your Component
Now, integrate this hook into your component, for example, in App.tsx :

import React from "react";
import useRemoteConfig from "./hooks/useRemoteConfig";

const App: React.FC = () => {
  // Get the feature flag value for 'new_feature'
  const newFeatureEnabled = useRemoteConfig("new_feature");
  console.log(newFeatureEnabled);
  return (
    <div>
      <h1>Welcome to Our App!</h1>
      {newFeatureEnabled ? (
        <p>New Feature is Live! 🚀</p>
      ) : (
        <p>New Feature is Not Available Yet. 🙁</p>
      )}
    </div>
  );
};

export default App;

Here, we’re checking the value of the 'new_feature' key. If it’s 'true', the new feature will be visible in your app.

6. Set Up Feature Flags in Firebase Console
Finally, configure your feature flags in the Firebase Console:

Open Firebase Console: Go to Firebase Console.
Select Your Project: Choose your project from the list.
Go to Remote Config: Click on Remote Config in the left menu.
Add Parameter: Click “Add Parameter” and enter the key 'new_feature' with the value 'true' or 'false', depending on what you need.
Publish: Make sure to click “Publish Changes” to save your settings.

Conclusion
That’s it! With Firebase Remote Config, you can manage and roll out new features without the usual deployment headaches. This tool makes your app development process more flexible and efficient.

If you’ve got any questions or need more details, feel free to drop a comment below. Happy coding and enjoy unlocking new features with ease! 🚀💻

Simplify Data Handling in React with TanStack Query and TypeScript!

Pramahadi Tama Putra — Sat, 27 Jul 2024 05:54:53 +0000

If you're dealing with asynchronous data in React and TypeScript, you know how complicated managing fetching, caching, and all the other details can be. Luckily, there's a cool tool that can make your life easier: TanStack Query (formerly known as React Query). This article will show you how TanStack Query can make data management super simple and fun, complete with an example using TypeScript!

What Is TanStack Query?

TanStack Query is like a superhero for managing asynchronous data in JavaScript apps, especially React. With TanStack Query, you can handle async data in a much simpler way, letting you focus on your app’s logic instead of writing boilerplate code that can get pretty tedious.

Why Should You Try TanStack Query?

1. Easy Data Fetching
TanStack Query makes data fetching from APIs or other sources a breeze. Just use hooks like useQuery and useMutation, and it takes care of all the fetching, error handling, and loading states for you.

2. Automatic Caching That Saves Time
One of the coolest features of TanStack Query is automatic caching. It stores the data you fetch locally, so you don’t have to keep hitting the server. This makes your app faster and more responsive.

3. Hassle-Free Status Management
Forget about dealing with loading, error, or success states manually. TanStack Query handles all of this in a super straightforward way. You just focus on your business logic, and let TanStack Query take care of the rest.

4. Pagination and Infinite Query? Easy Peasy!
If your app needs to handle a lot of data, TanStack Query has built-in support for pagination and infinite queries. This means you can fetch data in chunks or endlessly with ease.

5. Optimistic Updates: Makes Your UI Snappy
TanStack Query also offers optimistic updates. This means your UI can update before the server has fully processed changes, making your app feel faster and more interactive.

Simple Example

Let’s dive into how to use TanStack Query in a React app with TypeScript. We’ll fetch user data from an API and display it in a component.

Step 1: Installation
First, install TanStack Query:

npm install @tanstack/react-query

yarn add @tanstack/react-query

Step 2: Setup Provider
Add QueryClient and QueryClientProvider at the top level of your app:

// index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import App from './App';

// Create a QueryClient instance
const queryClient = new QueryClient();

ReactDOM.render(
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>,
  document.getElementById('root')
);

Step 3: Using useQuery in a Component
Here’s a component that fetches and displays user data:

// App.tsx
import React from 'react';
import { useQuery } from '@tanstack/react-query';

// Define the interfaces for the API response
interface Address {
  street: string;
  suite: string;
  city: string;
  zipcode: string;
  geo: {
    lat: string;
    lng: string;
  };
}

interface Company {
  name: string;
  catchPhrase: string;
  bs: string;
}

interface ApiResponse {
  id: number;
  name: string;
  username: string;
  email: string;
  address: Address;
  phone: string;
  website: string;
  company: Company;
}

// Define the user data type we want in our application
interface User {
  id: number;
  name: string;
  email: string;
  phone: string;
}

// Function to map the API response to our User interface
const mapApiResponseToUser = (apiResponse: ApiResponse): User => {
  return {
    id: apiResponse.id,
    name: apiResponse.name,
    email: apiResponse.email,
    phone: apiResponse.phone,
  };
};

// Function to fetch user data and map it to the User interface
const fetchUser = async (): Promise<User> => {
  const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  const apiResponse: ApiResponse = await response.json();
  return mapApiResponseToUser(apiResponse);
};

const App: React.FC = () => {
  // Use useQuery to fetch data
  const { data, error, isLoading } = useQuery<User, Error>(['user'], fetchUser);

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Oops, there was a problem: {error.message}</div>;

  return (
    <div>
      <h1>User Info</h1>
      <p><strong>Name:</strong> {data?.name}</p>
      <p><strong>Email:</strong> {data?.email}</p>
      <p><strong>Phone:</strong> {data?.phone}</p>
    </div>
  );
};

export default App;

Conclusion

TanStack Query is an awesome tool for managing asynchronous data in React apps. With features like caching, easy status management, and support for pagination, TanStack Query makes data handling simpler and faster. Plus, if you use TypeScript, you get the added benefit of type safety and maintainable code. So, if you haven’t tried it yet, now’s the perfect time to upgrade your data management game with TanStack Query!

Bikin Data Handling di React Jadi Gampang dengan TanStack Query dan TypeScript!

Pramahadi Tama Putra — Sat, 27 Jul 2024 05:36:56 +0000

Kalau kamu sering berurusan dengan data asinkron di React dan TypeScript, pasti tahu betapa ribetnya ngatur fetching, caching, dan semua drama lainnya. Nah, ada alat keren yang bisa bikin hidupmu lebih mudah: TanStack Query (dulu dikenal sebagai React Query). Artikel ini bakal ngebahas gimana caranya TanStack Query bisa bikin pengelolaan data jadi super gampang dan menyenangkan, lengkap dengan contoh menggunakan TypeScript!

Apa Itu TanStack Query?

TanStack Query itu kayak superhero untuk manajemen data asinkron di aplikasi JavaScript, terutama React. Dengan TanStack Query, kamu bisa ngelola data asinkron dengan cara yang lebih simpel dan bikin kamu fokus ke bagian logika aplikasi, bukan nulis kode boilerplate yang bikin pusing.

Kenapa Harus Coba TanStack Query?

1. Pengambilan Data Jadi Lebih Mudah
Dengan TanStack Query, ambil data dari API atau sumber lain jadi gampang banget. Cukup pakai hooks seperti useQuery dan useMutation, dan semua proses fetching data, handling error, dan status loading udah diurusin buat kamu.

2. Caching Otomatis yang Bikin Hemat
Salah satu fitur yang paling keren dari TanStack Query adalah caching otomatis. Data yang kamu ambil disimpan di cache lokal, jadi kamu nggak perlu bolak-balik nanya ke server. Ini bikin aplikasi kamu lebih cepat dan responsif.

3. Manajemen Status Tanpa Repot
Kamu nggak perlu khawatir lagi tentang status loading, error, atau data berhasil diambil. TanStack Query udah siap ngurusin semua itu dengan cara yang super simpel. Kamu cuma fokus ke logika bisnis, sisanya biar TanStack Query yang urusin.

4. Pagination dan Infinite Query? Gampang Banget!
Kalau aplikasi kamu butuh ngambil data dalam jumlah banyak, TanStack Query punya dukungan buat pagination dan infinite query. Jadi, kamu bisa ambil data secara bertahap atau tanpa batas dengan gampang.

5. Optimistic Updates: UI Jadi Lebih Responsif
TanStack Query juga ngasih fitur optimistik update. Ini bikin aplikasi kamu terasa lebih cepat dan interaktif, karena UI bisa update duluan sebelum server benar-benar memproses perubahan. Mantap, kan?

Contoh Implementasi Sederhana

Yuk, kita lihat gimana cara pakai TanStack Query di aplikasi React dengan TypeScript. Kita bakal ambil data pengguna dari API dan nampilin di komponen.

Langkah 1: Instalasi
Pertama, kamu perlu install TanStack Query:

npm install @tanstack/react-query

atau

yarn add @tanstack/react-query

Langkah 2: Setup Provider
Tambahin QueryClient dan QueryClientProvider di level atas aplikasi kamu:

// index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import App from './App';

// Membuat instance QueryClient
const queryClient = new QueryClient();

ReactDOM.render(
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>,
  document.getElementById('root')
);

Langkah 3: Menggunakan useQuery dalam Komponen
Berikut contoh komponen yang ambil dan tampilkan data pengguna:

// App.tsx
import React from 'react';
import { useQuery } from '@tanstack/react-query';

// Definisikan antarmuka untuk respons API
interface Address {
  street: string;
  suite: string;
  city: string;
  zipcode: string;
  geo: {
    lat: string;
    lng: string;
  };
}

interface Company {
  name: string;
  catchPhrase: string;
  bs: string;
}

interface ApiResponse {
  id: number;
  name: string;
  username: string;
  email: string;
  address: Address;
  phone: string;
  website: string;
  company: Company;
}

// Definisikan tipe data pengguna yang diinginkan dalam aplikasi
interface User {
  id: number;
  name: string;
  email: string;
  phone: string;
}

// Fungsi untuk memetakan respons API ke antarmuka User
const mapApiResponseToUser = (apiResponse: ApiResponse): User => {
  return {
    id: apiResponse.id,
    name: apiResponse.name,
    email: apiResponse.email,
    phone: apiResponse.phone,
  };
};

// Fungsi untuk mengambil data pengguna dan memetakannya ke antarmuka User
const fetchUser = async (): Promise<User> => {
  const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
  if (!response.ok) {
    throw new Error('Respons jaringan tidak oke');
  }
  const apiResponse: ApiResponse = await response.json();
  return mapApiResponseToUser(apiResponse);
};

const App: React.FC = () => {
  // Gunakan useQuery untuk mengambil data
  const { data, error, isLoading } = useQuery<User, Error>(['user'], fetchUser);

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Ups, terjadi masalah: {error.message}</div>;

  return (
    <div>
      <h1>Info Pengguna</h1>
      <p><strong>Nama:</strong> {data?.name}</p>
      <p><strong>Email:</strong> {data?.email}</p>
      <p><strong>Telepon:</strong> {data?.phone}</p>
    </div>
  );
};

export default App;

Kesimpulan

TanStack Query itu alat yang kece buat ngelola data asinkron di aplikasi React. Dengan fitur caching, manajemen status yang gampang, dan dukungan pagination, TanStack Query bikin pengelolaan data jadi lebih simpel dan cepat. Apalagi kalau kamu pakai TypeScript, kamu bisa bikin kode kamu lebih tipe-safed dan maintainable. Jadi, kalau kamu belum coba, sekarang saatnya untuk upgrade cara kamu ngelola data dengan TanStack Query!