Generate barcode image in "React.js and ASP.NET Core" application

In This Topic

This tutorial shows how to create a blank "Rect.js and ASP.NET Core" application in Visual Studio .NET 2026 and generate barcode image in "React.js and ASP.NET Core" application.

Here are steps, which must be done:

Create a blank "React.js and ASP.NET Core" application.
Open Visual Studio .NET 2026 and create a new project, of "React.js and ASP.NET Core" application type:

Configure the project to use .NET 10.0:
"ReactApp1.Server" project: Add references to the Vintasoft nuget-packages to ASP.NET Core Web application.
Add references to the nuget-packages Vintasoft.Barcode, Vintasoft.Barcode.SkiaSharp and Vintasoft.Barcode.AspNetCore.ApiControllers to the "ReactApp1.Server" project.
Comment: Reference to the nuget-package Vintasoft.Barcode.SkiaSharp is necessary only if SDK should draw text value of barcode on barcode image. Instead of nuget-package Vintasoft.Barcode.SkiaSharp can be used nuget-package Vintasoft.Barcode.ImageSharp or Vintasoft.Barcode.Gdi.
"ReactApp1.Server" project: Add Web API controller that allows to generate barcode image.
- Press the right mouse button on the "Controllers" folder and select the "Add => Controller..." menu from context menu
- Select Empty API controller template, set the controller name to the "MyVintasoftBarcodeApiController" and press the "Add" button
- Specify that MyVintasoftBarcodeApiController class is derived from Vintasoft.Barcode.AspNetCore.ApiControllers.VintasoftBarcodeApiController class
  
  Here are source codes of MyVintasoftBarcodeApiController class:
  - JavaScript
  using Vintasoft.Barcode.AspNetCore.ApiControllers; namespace WebApplication1.Controllers { public class MyVintasoftBarcodeApiController : VintasoftBarcodeApiController { public MyVintasoftBarcodeApiController(IWebHostEnvironment hostingEnvironment) : base(hostingEnvironment) { } } }
"ReactApp1.Server" project: Delete files, which are not necessary.
Delete files "ReactApp1.Server.http", "WeatherForecast.cs" and "Controllers\WeatherForecastController.cs" in "ReactApp1.Server" project - the WeatherForecast Web API controller is not necessary in this demo.
"reactapp1.client" project: Compile the solution for restoring TypeScript-dependencies in "reactapp1.client" project.

"reactapp1.client" project: Add JavaScript files to the ASP.NET Core Web application.

Copy JavaScript-file "Vintasoft.Shared.js" from Github in "reactapp1.client" project.
Copy JavaScript-file "Vintasoft.Barcode.js" from Github in "reactapp1.client" project.

Add references to Vintasoft JavaScript files to the header of "index.html" file in "reactapp1.client" project:

HTML

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>reactapp1.client</title>

    <script src="Vintasoft.Shared.js" type="text/javascript"></script>
    <script src="Vintasoft.Barcode.js" type="text/javascript"></script>
</head>
<body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
</body>
</html>

"reactapp1.client" project: Create React.js component that generate barcode image and displays generated barcode image.

Open "src\App.jsx" file in "reactapp1.client" project, clear the file, add JavaScript code to the "App.jsx" file ("App" function generates page markup and starts the barcode image generation, "__generateBarcode" function generated barcode image):

Here is JavaScript code of App.jsx file:

JavaScript

import './App.css'

function App() {
    return (
        <>
            <div>
                <h1>Angular Barcode Generator Demo</h1>

                <img id="barcodeImage" src="" />
            </div>
            <script>{setTimeout(__generateBarcode, 10)}</script>
        </>
    )
}

/**
 * Generates barcode image.
 */
function __generateBarcode() {
    // generate image of QR barcode with value "12345"
    __generate2dBarcodeImage("QR", "12345");
}

/**
 * Generates 1D barcode image.
 * @param barcodeType Barcode type.
 * @param barcodeValue Barcode value.
 */
function __generate1dBarcodeImage(barcodeType, barcodeValue) {
    try {
        // declare reference to the Vintasoft namespace
        var Vintasoft = window.Vintasoft;

        if (Vintasoft.Shared.WebImagingEnviromentJS.get_SessionId() == null)
            // set the session identifier
            Vintasoft.Shared.WebImagingEnviromentJS.set_SessionId("SessionID");

        // create web service that allows to generate barcode
        var barcodeService = new Vintasoft.Shared.WebServiceControllerJS("vintasoft/api/MyVintasoftBarcodeApi");

        // create the barcode writer
        var barcodeWriter = new Vintasoft.Barcode.WebBarcodeWriterJS(barcodeService);

        // create the barcode writer settings for generating 2D barcode
        var barcodeWriterSettings = new Vintasoft.Barcode.Web1DBarcodeWriterSettingsJS();
        // specify that barcode writer must generate QR barcode image
        barcodeWriterSettings.set_BarcodeType(new Vintasoft.Barcode.WebBarcodeTypeEnumJS(barcodeType));
        // specify the QR barcode value
        barcodeWriterSettings.set_Value(barcodeValue);

        // specify settings for barcode writer
        barcodeWriter.set_Settings(barcodeWriterSettings);

        // send an asynchronous request for getting barcode image as Base64 string
        barcodeWriter.getBarcodeAsBase64Image(__writeBarcode_success, __writeBarcode_failed);
    }
    catch (ex) {
        alert("Error: " + ex);
    }
}

/**
 * Generates 2D barcode image.
 * @param barcodeType Barcode type.
 * @param barcodeValue Barcode value.
*/
function __generate2dBarcodeImage(barcodeType, barcodeValue) {
    try {
        // declare reference to the Vintasoft namespace
        var Vintasoft = window.Vintasoft;

        if (Vintasoft.Shared.WebImagingEnviromentJS.get_SessionId() == null)
            // set the session identifier
            Vintasoft.Shared.WebImagingEnviromentJS.set_SessionId("SessionID");

        // create web service that allows to generate barcode
        var barcodeService = new Vintasoft.Shared.WebServiceControllerJS("vintasoft/api/MyVintasoftBarcodeApi");

        // create the barcode writer
        var barcodeWriter = new Vintasoft.Barcode.WebBarcodeWriterJS(barcodeService);

        // create the barcode writer settings for generating 2D barcode
        var barcodeWriterSettings = new Vintasoft.Barcode.Web2DBarcodeWriterSettingsJS();
        // specify that barcode writer must generate QR barcode image
        barcodeWriterSettings.set_BarcodeType(new Vintasoft.Barcode.WebBarcodeTypeEnumJS(barcodeType));
        // specify the QR barcode value
        barcodeWriterSettings.set_Value(barcodeValue);

        // specify settings for barcode writer
        barcodeWriter.set_Settings(barcodeWriterSettings);

        // send an asynchronous request for getting barcode image as Base64 string
        barcodeWriter.getBarcodeAsBase64Image(__writeBarcode_success, __writeBarcode_failed);
    }
    catch (ex) {
        alert("Error: " + ex);
    }
}

/**
 * Barcode is generated successfully.
 * @param data Object that stores response from barcode service.
 */
function __writeBarcode_success(data) {
    if (data.success) {
        var barcodeImage = data.barcodeImage;
        var barcodeImageElement = document.getElementById("barcodeImage");
        barcodeImageElement.src = barcodeImage;
    }
    else {
        alert(data.errorMessage);
    }
}

/**
 * Barcode generation is failed.
 * @param data Object with information about error.
 */
function __writeBarcode_failed(data) {
    // show information about error
    alert(data.errorMessage);
}

export default App

Open "Properties\launchSettings.json" file in "ReactApp1.Server" project and get URL to the web service in "applicationUrl" parameter of "profiles\https" section - in this demo URL is "https://localhost:7109":

Open "vite.config.js" file in "reactapp1.client" project and specify that React.js aplication can have access to the web service in "ReactApp1.Server" project (add "server" section in the "defineConfig" object):
- JavaScript
```
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

const target = 'https://localhost:7109';

// https://vite.dev/config/
export default defineConfig({
    plugins: [react()],
    server: {
        proxy: {
            '^/vintasoft/api/': {
                target,
                secure: false
            }
        },
        port: 7109
    }
})
```

Run the "React.js with ASP.NET Core" application and see the result.

Send Feedback

Create a blank "React.js and ASP.NET Core" application.

"ReactApp1.Server" project: Add references to the Vintasoft nuget-packages to ASP.NET Core Web application.

"ReactApp1.Server" project: Add Web API controller that allows to generate barcode image.

"ReactApp1.Server" project: Delete files, which are not necessary.

"reactapp1.client" project: Compile the solution for restoring TypeScript-dependencies in "reactapp1.client" project.

"reactapp1.client" project: Add JavaScript files to the ASP.NET Core Web application.

"reactapp1.client" project: Create React.js component that generate barcode image and displays generated barcode image.

Run the "React.js with ASP.NET Core" application and see the result.