DEV Community: Himanshu Aggarwal

Make your React Native App Production Ready!

Himanshu Aggarwal — Sat, 12 Jul 2025 15:41:32 +0000

React Native has made app development for mobile easier by enabling the developer to code once and deploy on both Android and iOS. However, coding an MVP that is basic is merely the beginning. A production-grade app requires robust infrastructure: monitoring, analytics, crash reporting, performance tracking, CI/CD, and user engagement.

The following are 10 foundational integrations that all production-grade React Native apps require.

Sentry – Error Monitoring and Crash Reporting

Why it matters: Bugs in production impact user experience and retention. Sentry provides real-time error tracking with rich context so developers can identify and fix issues quickly.

Key Features:

Real-time crash reporting for JavaScript and native code
Breadcrumbs to trace what led to an issue
Release tracking and user details
Works flawlessly with React Native

React Native Setup:
Install @sentry/react-native and run the Sentry wizard to configure it for both iOS and Android.

Use Case:
A good fit for monitoring silent or native errors, especially in heavy apps or those with native integrations.

Firebase – The Swiss Army Knife of Mobile Backend

Why it matters:
Firebase offers a full suite of backend services like authentication, databases, messaging, crash reporting, and event tracking. Both scalable apps and MVPs will find it appropriate.

Modules to use:

Firebase Authentication: Safe login via email, phone, Google, or Apple
Firestore or Realtime Database: Highly scalable, real-time database solutions
Crashlytics: Lightweight and effective crash reporting
Cloud Messaging: Push notification delivery
Firebase Analytics: Log custom user events

React Native Integration:
Import the react-native-firebase library for granular control over Firebase modules.

Best Practice:
Use Firebase Auth and Firestore in early development cycles; scale out as needed with other services.

Amplitude – Product and Behavioral Analytics

Why it matters:
Understanding how your users are engaging with your product is essential to making data-driven, informed decisions. Amplitude goes beyond basic analytics with user journey data, funnel breakdown, and retention measurement.

Advantages:

Visualize user flows and conversion funnels
Segment users into behavioral cohorts
Measure product features usage and drop-off

Installation:
Install the Amplitude React Native SDK with @amplitude/analytics-react-native.

Best Use Case:
Allow your growth and product teams to see feature performance and user behavior in depth.

AppsFlyer – Mobile Attribution and Deep Linking

Why it matters:
If you're running marketing campaigns, you need to know which channels are driving high-value users. AppsFlyer allows attribution tracking and deep linking to know and improve your ROI.

What it offers:

Attribution for app re-engagement and installs
Smart deep links with OneLink
Introduces fraud protection and privacy compliance
Compliant with popular ad networks

React Native SDK:
Include react-native-appsflyer to incorporate attribution tracking.

Tip:
Connect AppsFlyer with analytics providers like Amplitude or Firebase to visualize the end-to-end user flow.

CodePush (through Microsoft App Center) – Over-The-Air Updates

Why it matters:
Waiting for app store approval to deploy bug fixes can hold you up. CodePush allows developers to push JavaScript updates to users directly.

Advantages:

Avoid app store delays on small updates
Hotfix bugs quickly
Deploy updates incrementally to targeted audiences

Installation:
Use the react-native-code-push package and link it to your App Center account.

Warning:
OTA updates are only applicable to JavaScript and assets. Native code changes still require app store updates.

RevenueCat – In-App Purchases and Subscriptions Management

Why it matters:
Managing in-app purchases and subscriptions across platforms can be tricky. RevenueCat simplifies things with a unified solution for both Android and iOS.

Features:

Abstract away StoreKit and Google Billing
Real-time customer entitlement management
Easy integration with analytics platforms
Supports promotional offers and grace periods for billing

Setup:
Utilize the react-native-purchases package.

When to use:
Greatest for apps that have premium subscriptions, one-time purchases, or freemium.

Push Notifications – OneSignal or Expo Notifications

Why it matters:
Notifications engage and retain users. Whether a reminder or an update, push messages are the key to enhancing app activity.

Two Options:

OneSignal:

Advanced segmentation
In-app messaging and automation
High delivery rates and tracking

Expo Notifications:

Best if you’re using the Expo ecosystem
Handles both local and remote notifications
Supports background handlers and notification channels

Install:

Use react-native-onesignal or expo-notifications depending on your setup.

Tip:

Use personalization and behavior triggers to avoid spamming users.

CI/CD Tools – Fastlane, EAS, Bitrise, GitHub Actions

Why it matters:
Continuous integration and delivery reduce human errors and speed up release time. Pipeline automation ensures code is deployed, built, and tested frequently.

Tools to Try:

Fastlane: Publishes, screenshots, codesigning, and builds
EAS Build: Simple CI/CD for Expo apps
Bitrise or GitHub Actions: Builds and tests into your dev workflow
App Center: Publish beta builds and insert CodePush updates

Pro Tip:
Test, lint, and upload crash analytics automatically along the CI pipeline for best-in-class efficiency.

Performance Monitoring – Firebase Performance, Instabug, Datadog

Why it matters:
App performance and responsiveness matter. Slow performance leads to uninstalls. Performance monitoring tools give you insight into app launch time, API latency, and rendering issues.

Options:

Firebase Performance Monitoring: Tight integration with other Firebase products
Instabug: Bug reporting, crash reporting, and performance monitoring in one integration
Datadog RUM: Enterprise-level frontend performance observability

Use Case:
Necessary for media-playing apps, real-time apps, or slow-loading apps.

Localization and Environment Management

Supported Tools:

i18next or react-native-localize: Handle multiple languages and regional formatting
react-native-config or dotenv: Support API keys, tokens, and environment-based settings

Why it matters:
An international audience necessitates localization and secure config management. These tools facilitate supporting multiple environments and multilingual support.

Building a well-structured React Native app is all about more than just coding. Adding integrations like Sentry for crash reporting, Firebase for backend, Amplitude for analytics, and CodePush for on-demand updates makes your app stable, scalable, and user-friendly.

Don't try to integrate all of these things at once. Start with absolutes like Firebase, Sentry, and navigation, and then branch out based on app size, user base, and monetization strategy.

React Native - 15 Core Components

Himanshu Aggarwal — Mon, 03 Jun 2024 13:50:21 +0000

React Native is a powerful and popular framework developed by Facebook that allows developers to build mobile applications using JavaScript and React.

One of the key advantages of React Native is its ability to create truly native applications for both iOS and Android using a single codebase. This is achieved through a set of core components provided by the framework, which bridge the gap between web development and native app development. These core components are designed to be flexible and efficient, enabling developers to create a wide variety of mobile applications with a native look and feel.

In this detailed overview, we will explore 15 of the most important core components in React Native, highlighting their functionalities, use cases, and examples to master mobile app development with React Native.

1. View

The View component in React Native is a fundamental container component that supports various layout styles. It is the equivalent of a div element in HTML and can be used to create and style containers for various elements.

Here’s an example of how to use the View component:

import React from 'react';
import { StyleSheet, View, Text } from 'react-native';

function App() {
  return (
    <View style={styles.container}>
      <Text>Hello, World!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fffff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default App;

2. Text Component

The Text component is a basic element in React Native used to display text content on the screen. While it has some basic styling properties, you usually nest it inside other components (e.g., View) to create more complex UIs.

import React from 'react';
import { Text, StyleSheet } from 'react-native';

const SimpleText = () => {
  return (
    <Text style={styles.text} numberOfLines={2} onPress={() => alert('Hello')}>
      This is an example of a Text component in React Native. Tap on me!
    </Text>
  );
};

const styles = StyleSheet.create({
  text: {
    fontSize: 16,
    color: 'blue',
    textAlign: 'center',
    margin: 10,
    fontFamily: 'Arial',
  },
});

export default SimpleText;

3. Text Input

TextInput is a core component in React Native that allows the user to enter text. It is commonly used to collect user data, like emails or passwords. You can customize the appearance of TextInput by using various props such as placeholder, multiline, maxLength, and more.

Here’s a basic example of using TextInput:

import React, { useState } from 'react';
import { TextInput, View, Button } from 'react-native';

const App = () => {
  const [text, setText] = useState('');

  const handleSubmit = () => {
    alert('You entered: ' + text);
  };

  return (
    <View>
      <TextInput
        style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
        onChangeText={text => setText(text)}
        value={text}
        placeholder="Enter text here"
      />
      <Button
        onPress={handleSubmit}
        title="Submit"
      />
    </View>
  );
};

4. Button

A Button is a built-in React Native component used to create clickable buttons. It is a simple, customizable and easy-to-use component that captures touches and triggers an onPress event when pressed.

Here’s a simple example of how to create a Button in React Native:

import React from 'react';
import { Button } from 'react-native';

const MyButton = () => {
  const onPressHandler = () => {
    alert('Button Pressed');
  };

  return (
    <Button
      title="Click me"
      color="#841584"
      onPress={onPressHandler}
    />
  );
};

export default MyButton;

5. Image

The Image component is used to display images in a React Native application. It allows you to load and display local as well as remote images, providing essential props and methods for better image handling and customization.

To use the Image component, you need to import it from ‘react-native’:

import { Image } from 'react-native';

To display a local image in the application, you have to require it in the source prop of the Image component. Place the image file in your project directory and use the following syntax:

<Image source={require('./path/to/your/image.png')} />

To display a remote image from a URL, you need to set the source prop with a uri object:

<Image source={{ uri: 'https://path/to/your/remote/image.png' }} />

Keep in mind that you need to define the dimensions (width and height) when using remote images:

<Image source={{ uri: 'https://path/to/remote/image.png' }} style={{ width: 200, height: 200 }} />

6. SafeAreaView

SafeAreaView is a React Native core component that helps to adjust your app’s UI elements and layout to accommodate the notches, curved edges, or home indicator on iOS devices. It ensures that content is rendered within the visible portion of the screen.

Here is an example of using SafeAreaView in the code:

import React from 'react';
import { SafeAreaView, StyleSheet, Text } from 'react-native';

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <Text>Hello World!</Text>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

export default App;

7. Scroll View

In React Native, the ScrollView is a generic scrolling container used to provide a scrollable view to its child components. It is useful when you need to display scrollable content larger than the screen, such as lists, images, or text. A ScrollView must have a bounded height in order to properly work.

Here’s a simple example of how to use the ScrollView component in your React Native app:

import React from 'react';
import { ScrollView, Text } from 'react-native';

const MyScrollView = () => {
  return (
    <ScrollView>
      <Text>Item 1</Text>
      <Text>Item 2</Text>
      <Text>Item 3</Text>
      <Text>Item 4</Text>
      <Text>Item 5</Text>
      <Text>Item 6</Text>
    </ScrollView>
  );
}

export default MyScrollView;

8. FlatList

FlatList is a React Native core component that displays a scrolling list of changing, but similarly structured, data. It is an efficient list component that makes use of a limited scrolling renderWindow, reducing the memory footprint and creating smooth scrolling. Additionally, FlatList supports-Headers, Footers, Pull-to-refresh, and Horizontal scrolling, among other things.

Here is a basic example demonstrating how to use the FlatList component:

import React from 'react';
import { FlatList, View, Text } from 'react-native';

const data = [
  { id: '1', content: 'Item 1' },
  { id: '2', content: 'Item 2' },
  { id: '3', content: 'Item 3' },
  // ...
];

const renderItem = ({ item }) => (
  <View>
    <Text>{item.content}</Text>
  </View>
);

const MyFlatList = () => (
  <FlatList
    data={data}
    renderItem={renderItem}
    keyExtractor={item => item.id}
  />
);

export default MyFlatList;

9. Switch

A Switch is a core component in React Native used to implement a “toggle” or “on-off” input. It provides a UI for the user to switch between two different states, typically true or false. The primary use case is to enable or disable a feature or setting within an application.

Switch component has a boolean value prop (true for on, false for off) and an onValueChange event handler, which is triggered whenever the user toggles the switch.

Here’s an example of how to use Switch in a React Native application:

import React, {useState} from 'react';
import {View, Switch, Text} from 'react-native';

const App = () => {
  const [isEnabled, setIsEnabled] = useState(false);

  const toggleSwitch = () => setIsEnabled(previousState => !previousState);

  return (
    <View>
      <Text>Enable Feature:</Text>
      <Switch
     trackColor={{ false: "#767577", true: "#81b0ff" }}
     thumbColor={isEnabled ? "#f5dd4b" : "#f4f3f4"}
      onValueChange={toggleSwitch}
      value={isEnabled}
      />
    </View>
  );
};

export default App;

10. Modal

A Modal is a component that displays content on top of the current view, creating an overlay that can be used for various purposes, such as displaying additional information, confirmation messages, or a selection menu.

import React, {useState} from 'react';
import {Modal, Text, TouchableHighlight, View, Alert} from 'react-native';

const App = () => {
  const [modalVisible, setModalVisible] = useState(false);

  return (
    <View>
      <Modal
        animationType="slide"
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => {
          Alert.alert('Modal has been closed.');
          setModalVisible(!modalVisible);
        }}>
        <View>
          <View>
            <Text>Hello, I am a Modal!</Text>

            <TouchableHighlight
              onPress={() => {
                setModalVisible(!modalVisible);
              }}>
              <Text>Hide Modal</Text>
            </TouchableHighlight>
          </View>
        </View>
      </Modal>

      <TouchableHighlight
        onPress={() => {
          setModalVisible(true);
        }}>
        <Text>Show Modal</Text>
      </TouchableHighlight>
    </View>
  );
};

export default App;

11. Pressable

Pressable is a core component in React Native that makes any view respond properly to touch or press events. It provides a wide range of event handlers for managing user interactions, such as onPress, onPressIn, onPressOut, and onLongPress. With Pressable, you can create custom buttons, cards, or any touchable elements within your app.

import React from 'react';
import { Pressable, Text, StyleSheet } from 'react-native';

export default function CustomButton() {
  return (
    <Pressable
      onPress={() => console.log('Pressed!')}
      style={({ pressed }) => [
        styles.button,
        pressed ? styles.pressedButton : styles.normalButton,
      ]}
    >
      <Text style={styles.buttonText}>Press me</Text>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  button: {
    padding: 10,
    borderRadius: 5,
  },
  normalButton: {
    backgroundColor: 'blue',
  },
  pressedButton: {
    backgroundColor: 'darkblue',
  },
  buttonText: {
    color: 'white',
    textAlign: 'center',
  },
});

12. TouchableOpacity

In React Native, Touchable components are used to handle user interactions like taps, long presses, and double-taps on the appropriate elements.
TouchableOpacity is The opacity of the wrapped view is decreased when it’s active.

import { TouchableOpacity } from 'react-native';

<TouchableOpacity
  onPress={() => {
    alert('Tapped!');
  }}
>
  <Text>Tap me</Text>
</TouchableOpacity>

13. Activity Indicator

The ActivityIndicator is a core component in React Native that provides a simple visual indication of some ongoing activity or loading state within your application. It shows a spinning animation, which gives the user feedback that something is happening in the background. This component is particularly useful when fetching data from an external source, like a server, or while performing time-consuming operations.

To use the ActivityIndicator component, simply import it from ‘react-native’, and add it to your component tree. You can customize the appearance and behavior of the ActivityIndicator by providing various optional props, such as animating, color, and size.

Below is an example of how to use the ActivityIndicator component within a functional React component:

import React from 'react';
import { ActivityIndicator, View, Text } from 'react-native';

const LoadingScreen = () => (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <Text>Loading, please wait...</Text>
    <ActivityIndicator size="large" color="#0000ff" />
  </View>
);

export default LoadingScreen;

14. StatusBar

The StatusBar component is used to control the appearance of the status bar on the top of the screen. It may strike as a bit unusual since, unlike other React Native components, it doesn’t render any visible content. Instead, it sets some native properties that can help customize the look of status bars on Android, iOS, or other platforms.

To use the StatusBar component, you need to import it from ‘react-native’ and use it in your React component. Here’s an example:

import React from 'react';
import { View, StatusBar } from 'react-native';

const App = () => {
  return (
    <View>
      <StatusBar barStyle="dark-content" backgroundColor="#F0F0F0" />
      {/* Your other components */}
    </View>
  );
};

export default App;

15. SectionList

SectionList is a component used to render sections and headers in a scroll view. It helps to manage and optimize a large list of items divided into categories. It is one of the List View components provided by React Native along with FlatList.

The key difference between SectionList and FlatList is that SectionList separates data items into sections, with headers.

Here’s an example of how to use a SectionList in your app:

import React, {Component} from 'react';
import {SectionList, StyleSheet, Text, View, SafeAreaView} from 'react-native';

export default class App extends Component {
  render() {
    return (
      <SafeAreaView style={styles.container}>
        <SectionList
          sections={[
            {
              title: 'Section 1',
              data: ['Item 1.1', 'Item 1.2', 'Item 1.3'],
            },
            {
              title: 'Section 2',
              data: ['Item 2.1', 'Item 2.2', 'Item 2.3'],
            },
          ]}
          renderItem={({item}) => <Text style={styles.item}>{item}</Text>}
          renderSectionHeader={({section}) => (
            <Text style={styles.sectionHeader}>{section.title}</Text>
          )}
          keyExtractor={(item, index) => String(index)}
        />
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingRight: 10,
    paddingLeft: 10,
  },
  sectionHeader: {
    fontSize: 20,
    fontWeight: 'bold',
    backgroundColor: 'lightgrey',
    padding: 5,
  },
  item: {
    fontSize: 16,
    padding: 10,
    borderBottomWidth: 1,
    borderBottomColor: 'black',
  },
});

How to write Interactive API Documentation ?

Himanshu Aggarwal — Mon, 15 Apr 2024 18:31:44 +0000

API Documentation Overview

An API serves as a mediator between applications and web servers, facilitating information sharing. Properly documenting APIs is crucial for a smooth developer experience. API documentation is akin to a user manual, providing guidance on using and integrating with an API effectively.

It should cover:

API overview and its purpose
Step-by-step tutorials and examples
Glossary of key terms
Supported operations
API response details

This article introduces Swagger, an ecosystem of tools for streamlined API development and documentation using the OpenAPI Specification (OAS).

What is OAS?

OpenAPI specification (previously known as Swagger specification) describes a standard format for REST APIs. This standard is important so that everyone who writes REST APIs is compliant with its best practices such as the versioning, safety, and error handling. We can say that OpenAPI is similar to a template with a set of rules and constraints explaining how you could describe an API. It is usually written in YAML or JSON file format making it readable for humans and machines.

This file let us:-

Describe all available API endpoints (e.g. /users, /users/{id})
Operations in the endpoints such as GET /users, POST /user
Input and Output parameters for each operation
Authentication mechanisms
Contact information, API Licence, terms of use and other information

What is Swagger?

Swagger is a set of open-source tools built around the OpenAPI Specification that can help us to design, build, document and consume REST APIs. The ability of APIs to describe their own structure is the root of all awesomeness in Swagger. Note that Swagger not only helps us to design and document REST APIs, it also lets us build (Server Stub) and Consume (Rest Clients) REST APIs.

The major Swagger tools include:

Swagger Editor — browser-based editor where one can write OpenAPI specification
Swagger UI — renders OpenAPI specs as interactive API documentation
Swagger Codegen — generates server stubs and client libraries from an OpenAPI specification

Express.js API application setup

Set Up your NodeJS,Express App with all the API Endpoints
Once you have done it, run the commands below in the terminal:

npm install
npm i swagger-ui-express swagger-jsdoc

These are going to download the required dependencies into your application. Now it’s time to integrate Swagger into your Node.js application.

How to connect Swagger to Node.js?

To connect Swagger to your Node.js application, import swagger-ui-express and swagger-jsdoc in your server.js or create a seprate swagger.js file for the :

  const swaggerJsdoc = require("swagger-jsdoc"),
  const swaggerUi = require("swagger-ui-express");

Those are the two respective objects representing the libraries we’ve imported. Next, add the following code before the app’s listen function:

const options = {
  definition: {
    openapi: '3.1.0',
    info: {
      title: 'CRUD API Documentation',
      version: '1.0.0',
      description: 'Documentation for the CRUD API created using Node.js, Express, and MongoDB.',
      contact: {
        name: "Himanshu Aggarwal",
        email: "himanshuaggar00@gmail.com",
    },
    license: {
      name: "MIT",
      url: "https://spdx.org/licenses/MIT.html",
    },
    },
    servers: [
      {
        url: 'http://localhost:9000', // Change the URL based on your server configuration
        description: 'Local server',
      },
    ],
  },
  apis: ['./routes/*.js'], // Path to the API routes directory
};

const specs = swaggerJsdoc(options);

module.exports = {
  serve: swaggerUi.serve,
  setup: swaggerUi.setup(specs),
};

As you see in the first line, this configuration object sets an OpenAPI to v3.1.0.

Swagger uses the Open API Specification, a standard, language-agnostic interface for RESTful APIs that allows humans and machines to understand the capabilities of a web service without having to access the source code or inspect the network traffic.

You can refer to the official docs for all available settings for each version. Here, we’re using just the basics: API info, name, title, description, license, the contact of the API owner, and more.

The API’s property is essential because it searches for the model and endpoint definitions, so inform it correctly.

Finally, we’re using the swaggerJsdoc function to scan through the options passed in as a param and return the converted Swagger specification object. This one, in turn, can be used along with the swaggerUi setup process.

You can now start the application via the npm start command. You’ll see the following screen when accessing the http://localhost:9000/api-docs/

Note, that we still don’t have any operations defined in the spec. This happens because we need to map those operations to the routes explicitly. Otherwise, Swagger can’t figure out the API endpoints on its own.

Optionally, you can add a search bar to your UI just in case your API has too many operations. For this, change the implementation to the following:

app.use(
  "/api-docs",
  swaggerUi.serve,
  swaggerUi.setup(specs, { explorer: true })
);

Now, the search bar will show up.

Creating the API model

Like many significant frameworks and API architectures, data is encapsulated into models to become more easily accessible. Swagger also expects your APIs to have models and for you to define them.

Go to routes and you can define the schema at the beginning of the file as shown below:


/**
 * @swagger
 * components:
 *   schemas:
 *     Product:
 *       type: object
 *       required:
 *         - name
 *         - brand
 *         - ram
 *         - camera
 *         - network
 *         - fingerprint
 *         - price
 *       properties:
 *         _id:
 *           type: string
 *           description: The auto-generated unique identifier of the product.
 *         name:
 *           type: string
 *           description: The name of the product.
 *         brand:
 *           type: string
 *           description: The brand of the product.
 *         ram:
 *           type: integer
 *           description: The RAM capacity of the product in gigabytes.
 *         camera:
 *           type: string
 *           description: The camera specification of the product.
 *         network:
 *           type: string
 *           description: The network connectivity of the product.
 *         fingerprint:
 *           type: boolean
 *           description: Indicates whether the product has a fingerprint sensor.
 *         price:
 *           type: number
 *           description: The price of the product.
 *       example:
 *         _id: "65d34a7cbe5329a2e035c756"
 *         name: Galaxy S21
 *         brand: Samsung
 *         ram: 8
 *         camera: 64 MP
 *         network: 5G
 *         fingerprint: true
 *         price: 799
 */

Remember the JSDocs we’ve talked about? JSDocs now enters the scene and helps us to set up the rest of the Swagger spec definitions through the@swagger annotation. Here, you can define as many schemas as you want. In our case, we’re just defining the domain Books.

The required property receives the list of attributes that must be filled in the requests. This step is essential for letting people know what they must send when using your API.

The properties property describes detailed information about your model attributes. Each attribute must have a name followed by its type, description (optional), and format (you can validate values too). Please refer to Swagger data types for a complete list of available data types.

Finally, you can provide an example of request data for this schema model. That’s going to be useful later. When you restart the app and refresh the page, you’ll see the screen below:

It’s important to note that if you’re facing a YAMLSemanticError in the schema, make sure to check the indentation in the YAMLconfiguration

Integrating operations into the routes

Now, we have Swagger schema integrated into the routes. However, we still don’t have any operations. Let’s fix that. Right after the previous JSDoc comment, add the following:

/**
 * @swagger
 * tags:
 *   name: Products
 *   description: TheProducts CRUD API
 * /products:
 *   get:
 *     summary: Retrieve a list of all products.
 *     description: Retrieve a list of all products from the database.
 *     responses:
 *       200:
 *         description: A list of products.
 *         content:
 *           application/json:
 *             schema:
 *               type: array
 *               items:
 *                 $ref: '#/components/schemas/Product'
 */

Let’s analyze it in parts, starting with the Swagger tags. A tag allows you to create a section within the Swagger docs. All the routes assigned to this tag will appear under the same division. It’s an organizational setting.

In our example, all the endpoints will be mapped to the same tag. Next, we set up our first route: Retrive Products. It’s pretty straightforward. First, define a title and specify the tag to which the path will be attached.

Then, we have the request and the response. Within the request, define three things: whether the request is required, the content type of the request, and the schema from which it must be processed.

The schemas can be referenced through the #components/schemas Swagger operator. As for the response, define the HTTP response codes and the properties for each of them. We’re just worried about the happy path with an HTTP 200.

You can test the new operation directly within the Swagger UI page

Now, you can see where the example values take place. It’s easier to provide your users with sample data as a reference for when they want to perform stuff.

*Entire code of the Routes *

const express = require("express");
const router = express.Router();
const Product = require('../models/product');

/**
 * @swagger
 * components:
 *   schemas:
 *     Product:
 *       type: object
 *       required:
 *         - name
 *         - brand
 *         - ram
 *         - camera
 *         - network
 *         - fingerprint
 *         - price
 *       properties:
 *         _id:
 *           type: string
 *           description: The auto-generated unique identifier of the product.
 *         name:
 *           type: string
 *           description: The name of the product.
 *         brand:
 *           type: string
 *           description: The brand of the product.
 *         ram:
 *           type: integer
 *           description: The RAM capacity of the product in gigabytes.
 *         camera:
 *           type: string
 *           description: The camera specification of the product.
 *         network:
 *           type: string
 *           description: The network connectivity of the product.
 *         fingerprint:
 *           type: boolean
 *           description: Indicates whether the product has a fingerprint sensor.
 *         price:
 *           type: number
 *           description: The price of the product.
 *       example:
 *         _id: "65d34a7cbe5329a2e035c756"
 *         name: Galaxy S21
 *         brand: Samsung
 *         ram: 8
 *         camera: 64 MP
 *         network: 5G
 *         fingerprint: true
 *         price: 799
 */

/**
 * @swagger
 * /products:
 *   get:
 *     summary: Retrieve a list of all products.
 *     description: Retrieve a list of all products from the database.
 *     responses:
 *       200:
 *         description: A list of products.
 *         content:
 *           application/json:
 *             schema:
 *               type: array
 *               items:
 *                 $ref: '#/components/schemas/Product'
 */
router.get('/', async (req, res) => {
  try {
    const products = await Product.find();
    res.json(products);
  } catch (error) {
    res.status(500).json({ message: error.message });
  }
});

/**
 * @swagger
 * /products/{id}:
 *   get:
 *     summary: Retrieve a product by ID.
 *     description: Retrieve a product from the database by its ID.
 *     parameters:
 *       - in: path
 *         name: id
 *         required: true
 *         description: ID of the product to retrieve.
 *         schema:
 *           type: string
 *     responses:
 *       200:
 *         description: The requested product.
 *         content:
 *           application/json:
 *             schema:
 *               $ref: '#/components/schemas/Product'
 *       404:
 *         description: Product not found.
 */
router.get('/:id', getProduct, (req, res) => {
  res.json(res.product);
});

/**
 * @swagger
 * /products:
 *   post:
 *     summary: Create a new product.
 *     description: Create a new product and save it to the database.
 *     requestBody:
 *       required: true
 *       content:
 *         application/json:
 *           schema:
 *             $ref: '#/components/schemas/Product'
 *     responses:
 *       201:
 *         description: The created product.
 *         content:
 *           application/json:
 *             schema:
 *               $ref: '#/components/schemas/Product'
 *       400:
 *         description: Invalid product data.
 */
router.post('/', async (req, res) => {
  const product = new Product({
    name: req.body.name,
    brand: req.body.brand,
    ram: req.body.ram,
    camera: req.body.camera,
    network: req.body.network,
    fingerprint: req.body.fingerprint,
    price: req.body.price
  });

  try {
    const newProduct = await product.save();
    res.status(201).json(newProduct);
  } catch (error) {
    res.status(400).json({ message: error.message });
  }
});

/**
 * @swagger
 * /products/{id}:
 *   put:
 *     summary: Update a product by ID.
 *     description: Update an existing product in the database by its ID.
 *     parameters:
 *       - in: path
 *         name: id
 *         required: true
 *         description: ID of the product to update.
 *         schema:
 *           type: string
 *     requestBody:
 *       required: true
 *       content:
 *         application/json:
 *           schema:
 *             $ref: '#/components/schemas/Product'
 *     responses:
 *       200:
 *         description: The updated product.
 *         content:
 *           application/json:
 *             schema:
 *               $ref: '#/components/schemas/Product'
 *       404:
 *         description: Product not found.
 */
router.put('/:id', getProduct, async (req, res) => {
  try {
    const updatedProduct = await res.product.set(req.body).save();
    res.json(updatedProduct);
  } catch (error) {
    res.status(400).json({ message: error.message });
  }
});

/**
 * @swagger
 * /products/{id}:
 *   delete:
 *     summary: Delete a product by ID.
 *     description: Delete a product from the database by its ID.
 *     parameters:
 *       - in: path
 *         name: id
 *         required: true
 *         description: ID of the product to delete.
 *         schema:
 *           type: string
 *     responses:
 *       200:
 *         description: Product deleted successfully.
 *       404:
 *         description: Product not found.
 */
router.delete('/:id', getProduct, async (req, res) => {
  try {
    await res.product.remove();
    res.json({ message: 'Product deleted successfully' });
  } catch (error) {
    res.status(500).json({ message: error.message });
  }
});

async function getProduct(req, res, next) {
  try {
    const product = await Product.findById(req.params.id);
    if (product == null) {
      return res.status(404).json({ message: 'Product not found' });
    }
    res.product = product;
    next();
  } catch (error) {
    res.status(500).json({ message: error.message });
  }
}

module.exports = router;

Conclusion

You may test each endpoint individually to ensure it’s working precisely as your Postman requests.

Swagger is capable of way more than merely documenting your APIs. A quick read over the official docs will give you a better understanding of its power. Remember that documenting should be part of your Project.

What's New with React in v19 ?

Himanshu Aggarwal — Sun, 14 Apr 2024 11:24:00 +0000

React just got a major update in version 19🚀

But before you get alarmed about how much time it'll take to learn a new version of React, I want to give you some good news.

React 19 is less about the code you have to write and more about the code you don't have to write anymore. Let's take a look at what React code you'll be able to remove in React 19, plus some new features it offers to help you build your React projects faster.

How to use React 19

As of today, React 19 is not yet a stable release. So if your React version is less than 19, you can install a canary version of React to start using these features today.

npm i react@canary react-dom@canary

React Compiler

"React can sometimes be too reactive: it can re-render too much."

Most of the features that are in React 19 are due to the compiler.

So what does it do?

The React compiler will convert your React code into regular JavaScript. The main benefit of this is to improve your overall app performance. But what's even better is that it removes the need for you to think as much about performance. That means you no longer have to use manual memoization tools like useCallback, useMemo, and memo.
These tools were necessary to prevent unnecessary re-renders, but they are hard to use properly, even with React reminding you to use them in the console.

But now, The new compiler optimizes your React code automatically, so you can completely remove any performance hooks you previously had. And it gets even better.

Use() Hook

This hook will read and asynchronously load a resource such as a promise or a context. It can also be used in loops and conditionals, unlike other React hooks.

use() hook can be used to fetch data, therefore, replacing useEffect().

const value = use(resource);

💡 This resource is the source of the data where you want to read the values from, it could be a Promise or a Context.

One great thing about this hook is that it can be called inside of the functions and conditionals unlike the other traditional hooks in React which can only be called at the top level of the component.

Use Client and use Server Directives

React 19 is coming with support for both the use of Client and use Server directives. This is an important aspect as they allow developers to write both client-side and server-side code in the same file. Components will be rendered on the server which makes for better SEO, faster page load times and easy data fetching.

use client
To mark a module as the client code, add "use client" at the top of the file. When a component marked with "use client" is imported by the server component, the compatible bundlers will treat the module import as a boundary between the client and the server code.

'use client';

const ClientComponent = () => {
  return (
    <>
      {/* Other component JSX... */}
    </>
  );
}

use server
Add "use server" at the top of the async functions to mark the function callable by the client, such functions are called Server Actions.

Additionally, we can also add "use server" to the top of the file to mark the entire module as Server Actions which can then be imported in the client code.

const someAsyncFn = async(data) => {
  'use server';
  // Other logic will go here...
}

Actions

Now, actions are a great new feature that makes working with forms a lot easier. Actions are just functions that are called when a form is submitted. These functions are connected to the action prop of any form element. And with React 19, actions can now be executed on the server or client.

New form handling hooks will be:

• useFormStatus() – to access the current status of form operations.

• useFormState() – for a response of form operations.

useOptimistic hook

The useOptimistic hook is yet another hook added to React which works well together with React actions. This hook allows us to optimistically update the UI while a background operation like a network request is being performed.

const [optimisticState, addOptimistic] = useOptimistic(state, updateFn);

Using this hook can make the app feel more responsive, especially when working with forms. For example, when a user types a message into an input box and clicks on the submit button, instead of waiting for the server to respond, the useOptimistic hook will directly show the user message along with a loading indicator, meanwhile, the form will attempt to send the message to the actual server in the background and once the server confirms that the message is received, the loading indicator will be removed.

Document Metadata

The days of using third-party packages for SEO and metadata is coming to an end. The incoming version will have in-built support like titles, descriptions and keywords.

Tags can now be placed anywhere within a component’s JSX and it will work for both client and server components.

No more forwardRef

This feature allows for the passing of a ref through a component to its child and is useful when access is needed to a child DOM element or React component instance from a parent component. forwardRef will no longer be used but instead, ref will be passed as a regular prop.

Asset Loading

Being greeted with unstyled content during page load seems to be a common theme when visiting some websites which isn’t ideal. React 19 will be integrating asset loading with Suspense to ensure assets are ready before display.

Conclusion

So, React 19 brings exciting advancements to the table, focusing more on optimization and convenience. The introduction of the React compiler streamlines performance enhancements, bidding farewell to manual memoization tools. The new use() hook simplifies resource loading and replaces useEffect(), while useClient and useServer directives allow seamless integration of client and server-side code. Actions revolutionize form handling, complemented by new hooks like useOptimistic for UI responsiveness during background operations. Say goodbye to third-party SEO packages as React 19 natively supports document metadata. Additionally, the removal of forwardRef simplifies component communication, and asset loading with Suspense ensures a smoother user experience from the get-go. With these upgrades, React 19 empowers developers to build faster, more efficient, and visually appealing web applications! 🚀

Reference
React19 Blog by React Labs