DEV Community: Jasur Kurbanov

Google Docs bilan ishlash

Jasur Kurbanov — Sun, 13 Jul 2025 12:34:35 +0000

📄 1.2 Google Docs bilan ishlash

Google Docs — bu onlayn matn muharriri bo‘lib, siz hujjatlarni internet orqali yaratish, tahrirlash va boshqalar bilan real vaqt rejimida bo‘lishish imkoniyatiga egasiz. GLOBUZ viza markazida barcha hujjat almashinuvi aynan Google Docs orqali amalga oshiriladi.

🎯 Nima o‘rganasiz:

Yangi hujjat yaratish
Matn yozish va formatlash (bold, kursiv, heading, rang, underline)
Rasm va havola qo‘shish
Jadval yaratish va dizayn berish
Sahifa raqamlarini kiritish
Hujjatni boshqalar bilan ulashish ("Share")

🎓 O‘rganish uchun video qo‘llanma:

Google Docs Tutorial for Beginners 2025

▶️ https://www.youtube.com/watch?v=aoMMDlwEtwM

🧩 Amaliy topshiriq:

Video darslikni tugatgandan so‘ng quyidagi topshiriqni bajaring:

📄 Referat tayyorlash

Ushbu topshiriq sizning Google Docs bilan ishlash ko‘nikmalaringizni sinovdan o‘tkazadi. Quyidagi talablarga amal qilgan holda referat yozing va yakunida hujjatni belgilangan emailga ulashing.

🎯 Topshiriq mavzusi:

Quyidagi mavzulardan birini tanlab, referat yozing:

🇮🇹 Italiyadagi mashhur turistik joylar
🇫🇷 Fransiyadagi mashhur turistik joylar

📌 Talablar:

📃 Tuzilishi:

Kamida 3 sahifa (Google Docs, A4 format)
Kamida 1000 ta so‘z
O‘zbek tilida yozilgan
Matn strukturasida bo‘limlar bo‘lishi kerak: Kirish, Asosiy qism, Xulosa

🖼 Rasm qo‘shish:

Kamida 3 ta rasm
Har bir rasm ostida sarlavha bo‘lishi kerak (masalan: “Kolizey, Rim”)

🔗 Havolalar:

Kamida 2 ta havola (Wikipedia, sayohat bloglari yoki rasmiy saytlardan)
Havolani matn ichiga joylashtiring (masalan: Florensiya haqida ma’lumot)

📊 Jadval qo‘shish:

Kamida 1 ta jadval
Jadvalda kamida 5 ustun bo‘lishi kerak
Jadval mavzusi: “Eng mashhur 5 joy – tavsifi, manzili, narxi, ish vaqti, reyting”

Misol:

Joy nomi	Manzili	Narxi	Ish vaqti	Reyting
Eyfel minorasi	Parij, Fransiya	€25	09:00–23:45	4.7

🎨 Formatlash talablari:

Heading 1, Heading 2 sarlavhalari ishlatilgan bo‘lishi kerak
Matnda quyidagilar bo‘lishi kerak:
- Bold matn
- Kursiv matn
- Underline matn
- 🌈 Rangli matn
Sahifa raqamlari qo‘shilgan bo‘lishi kerak

📤 Yuborish tartibi:

Tayyor bo‘lgan hujjatni Google Docs orqali quyidagi email manzilga ulashing:

📩 jasurkurbanov96@gmail.com
Sharing huquqi: “Editor” yoki “Commenter”
Email mavzusi (agar xat bilan yuborilsa):

Referat - [Ism Familiya]

✅ Baholash mezonlari:

Mezoni	Talablar
Sahifa soni	Kamida 3 sahifa
Matn tili	To‘liq o‘zbek tilida
Rasm ishlatilishi	Kamida 3 ta, sarlavhali
Jadval	Kamida 5 ustun, 3+ qator
Formatlash	Bold, kursiv, heading, rangli matn, sahifa raqami
Linklar	Matn ichiga joylashtirilgan kamida 2 ta havola(link)
Bo‘limlar mavjudligi	Kirish, asosiy qism, xulosa
Hujjatni ulash	`jasurkurbanov96@gmail.com` bilan to‘g‘ri ulashilgan

Gmail ochish bo‘yicha bosqichma-bosqich qo‘llanma (O‘zbek tilida)

Jasur Kurbanov — Sun, 13 Jul 2025 11:57:47 +0000

Agar siz hali Gmail email manziliga ega bo‘lmasangiz, quyidagi oddiy bosqichlarni bajaring. Ushbu qo‘llanma orqali siz Gmail akkauntini yaratishni o'rganasiz

🎥 Video yo‘riqnoma (O‘zbek tilida)

👉 Tomosha qiling: ▶️ Gmail’da Yangi Email Yaratish bo‘yicha video qo‘llanma

Yozma yo‘riqnoma (O‘zbek tilida)

1-bosqich: Gmail saytiga kiring

Brauzeringizda https://mail.google.com manziliga kiring
"Create account" tugmasini bosing

2-bosqich: Ismingizni kiriting

First name: ismingiz
Last name: familiyangiz
Username: tanlagan Gmail manzilingiz (masalan, jasurkurbanov13072025)
Password: kuchli parol tanlang

3-bosqich: Parol yaratish

Kuchli parol tanlang: katta va kichik harflar, raqamlar va belgilar ishlating

🛠️ Tavsiya: LastPass Password Generator yordamida xavfsiz parol yarating

4-bosqich: Telefon raqamingizni kiriting

Gmail sizdan telefon raqam so‘raydi — bu hisobingizni tiklash uchun kerak
Kodni kiriting va Next tugmasini bosing

5-bosqich: Zaxira email va tug‘ilgan sana

Tiklash uchun boshqa email (agar mavjud bo‘lsa)
Tug‘ilgan kun, oy va yilni tanlang
Jinsingizni tanlang

6-bosqich: Maxfiylik va shartlarni qabul qilish

Google’ning xizmat ko‘rsatish shartlari bilan tanishing
“I agree” tugmasini bosing

✅ Gmail email tayyor!

🎉 Tabriklaymiz! Siz muvaffaqiyatli Gmail akkaunt yaratdingiz va endi undan xabar yuborish, ro‘yxatdan o‘tish yoki ish uchun foydalanishingiz mumkin.

🧩 Topshiriq: 3 ta yangi email yarating

Ushbu topshiriqda siz Gmail.com’da 3 ta yangi email manzilini yaratishingiz kerak.

🔧 Nima qilish kerak?

Har bir foydalanuvchi uchun to‘liq ism (ism + familiya) tanlang. Xoxlanga 3 ta har xil ism sharif tanlang va bungungi sanani kiriting oxirida

✅ Topshiriq uchun misollar:

Nodirbek Tursunov → nodirbektursunov13072025@gmail.com
Ziyoda Ergasheva → ziyodaergasheva13072025@gmail.com
Shohrux Karimov → shohruxkarimov13072025@gmail.com

Bunguni sana: 13.07.2025

LastPass yordamida kuchli parol yaratish – Video qo‘llanma (O‘zbek tilida)

Jasur Kurbanov — Sun, 13 Jul 2025 11:42:05 +0000

Hozirgi kunda kuchli va xavfsiz parolga ega bo‘lish – bu internetdagi asosiy himoya vositangizdir. Ayniqsa, agar siz ishda email, CRM yoki shaxsiy akkauntlardan foydalanayotgan bo‘lsangiz, parolingiz himoyasiz bo‘lsa – butun tizim xavf ostida qoladi.

Ushbu postda siz bilan LastPass Password Generator yordamida kuchli parol yaratishni o‘rganamiz — bu bepul vosita va oson ishlatiladi.

🎥 Video yo‘riqnoma (O‘zbek tilida)

👉 Tomosha qiling:

[▶️ LastPass yordamida parol yaratish bo‘yicha video qo‘llanma (https://youtu.be/gBnvoMUUFTM)

🛠️ LastPass Password Generator nima?

LastPass Password Generator — bu kuchli, tasodifiy parollar yaratishga yordam beruvchi onlayn vosita. Siz o‘zingizga mos:

Parol uzunligini (8 dan 32 belgigacha),
Belgilar tarkibini (raqamlar, harflar, maxsus belgilar),
Va parolni o‘qilishi yoki eslab qolish qulayligini tanlashingiz mumkin.

✅ Parol yaratish uchun bosqichlar:

Saytga kiring:

👉 https://www.lastpass.com/features/password-generator
Parol uzunligini tanlang: odatda 12–16 belgi yetarli
Quyidagilarni yoqing:
- Include uppercase (Katta harflar)
- Include lowercase (Kichik harflar)
- Include numbers (Raqamlar)
- Include symbols (Belgilar)
Generate Password tugmasini bosing
Tayyor parolni nusxalab oling va xavfsiz joyga saqlang (masalan, parol menejeri yoki maxfiy fayl)

🔐 Tavsiya:

Ish parollarini hech qachon oddiy so‘z yoki tug‘ilgan sanangiz asosida yaratmang
Har bir xizmat (Gmail, Outlook, CRM va boshqalar) uchun alohida parol foydalaning
Agar parolni eslab qolish qiyin bo‘lsa, LastPass yoki Bitwarden kabi parol menejeridan foydalaning

BEPUL: GLOBUZ Viza Markazida Ishni Boshlash Uchun Onlayn Tayyorlov Kursi - Yangi Hodimlar Uchun

Jasur Kurbanov — Sun, 13 Jul 2025 11:13:40 +0000

1-kun: Asosiy ko‘nikmalar

1.1 Gmail va Outlook yaratish

Ushbu bo‘limda siz yangi email akkauntlari yaratishni o‘rganasiz:

✅ Gmail ochish bo‘yicha qo‘llanma
✅ Outlook va Hotmail ochish bo‘yicha qo‘llanma

🧩 Bo‘limni yakunlash uchun nima qilish kerak?

Ushbu bobni tugatganingizni tasdiqlash uchun siz quyidagilarni bajaring:

📩 Jasur Kurbanovga test xat yuboring:

jasurkurbanov96@gmail.com manziliga quyidagi shaklda xat jo‘nating.

📄 Email namunasi (shablon):

Mavzu (Subject): Email yaratish bo‘limi yakunlandi

Salom!

Men 1.1-bo‘lim — "Gmail va Outlook yaratish" bo‘limini yakunladim.

Men quyidagi ikki emailni muvaffaqiyatli yaratdim:

Gmail: [sizning yangi Gmail manzilingiz]

Outlook: [sizning yangi Outlook manzilingiz]

Hotmail: [sizning yangi Hotmail manzilingiz]


Hurmat bilan,
[Ismingiz]

🧩 Yakuniy topshiriq: Emaildan xat yuboring

Siz ushbu bo‘limni tugatganingizni tasdiqlash uchun 3 xil email manzildan xabarni yuborishingiz kerak:

📤 Xat yuboriladigan manzil: jasurkurbanov96@gmail.com

Siz quyidagi uchta manzildan alohida-alohida xat yuboring, tepada xat ga nima yozishni aytib o'tilgan:

✅ Yangi yaratgan Gmail manzilingizdan
✅ Yangi yaratgan Outlook manzilingizdan
✅ Yangi yaratgan Hotmail manzilingizdan

Outlook.com’da Yangi Email Yaratish – Bosqichma-bosqich Qo‘llanma (O‘zbek tilida)

Jasur Kurbanov — Sun, 13 Jul 2025 10:59:15 +0000

Outlookda email manzilingiz yaratmoqchi bo‘lsangiz, quyidagi oddiy bosqichlarni bajaring. Har bir bosqichga rasm ilova qilingan — bu esa email yaratishni oson va tushunarli qiladi.

1-bosqich: Outlook saytiga kiring

Brauzeringizda https://www.outlook.com sahifasini oching
"Create free account" tugmasini bosing

📷

2-bosqich: Email nomini tanlang

Ism familyangiz: Jasur Kurbanov
Bugungi sana: 13.07.2025
Emailingiz quyidagicha bo‘ladi:
👉 jasurkurbanov13072025@outlook.com
Domenni tanlang: @outlook.comni tanlang
Next tugmasini bosing

📷

3-bosqich: Kuchli parol yarating

Kuchli, ishonchli parol kiriting (masalan: 370l82rGmcQ~)
Parolda katta va kichik harflar, raqamlar va belgilar bo‘lishi kerak

🛠️ Tavsiya: Parol yaratish uchun bepul vebsaytdan foydalaning:

👉 LastPass Password Generator

LastPass yordamida kuchli parol yaratish –
Video qo‘llanma (O‘zbek tilida)

Yangi yaratilgan parolni Outlook sahifasiga qo‘shing
Next tugmasini bosing

📷

4-bosqich: Tug‘ilgan sanani kiriting

Tug‘ilgan kun, oy va yilni kiriting
Davlat sifatida tug'ilgan davlatini belgilang
Men Uzbekistan ** tu'g'ilganligim sababli **Uzbekistan tanlayapman
"Next" tugmasini bosing

📷

5-bosqich: Ismingizni kiriting

Ismingiz va familiyangizni yozing
"Next" tugmasini bosing

📷

6-bosqich: Robot emasligingizni tasdiqlang

Microsoft sizdan robot emasligingizni isbotlashingizni so‘raydi.
Buning uchun ekrandagi PRESS & HOLD tugmasini bosib ushlab turing.

📷

✅ Yakunlandi!

Endi sizda yangi Outlook email mavjud 🎉

📷

📩 Email manzilini tekshirish (Ishlayaptimi yoki yo‘qmi?)

Yangi yaratgan emailingiz — jasurkurbanov13072025@outlook.com — ishlayaptimi yoki yo‘qligini tekshirish uchun quyidagi oddiy amallarni bajaring:

1. O‘z emailingizga kiring

Masalan: Gmail, Yahoo, yoki boshqa Outlook akkauntingizga.

2. Yangi xat yozing

Kimga (To): jasurkurbanov13072025@outlook.com
Mavzu (Subject): Salom Viza Javobi Tekshirish
Xat matni: Salom! Ushbu xat orqali sizning emailingiz ishlayaptimi yoki yo‘qligini tekshiryapmiz. Hurmat bilan, Jasur

📷

✅ Email muvaffaqiyatli tekshirildi

Biz quyidagi manzilga test xat yubordik:

jasurkurbanov13072025@outlook.com

📥 Natija: Email muvaffaqiyatli yetkazildi!

🎉 Bu degani, sizning emailingiz faol va xatlarni qabul qilmoqda. Endi undan to‘liq foydalanishingiz mumkin.

📷

🧩 Topshiriq: 6 ta yangi email yarating

Ushbu topshiriqda siz Outlook.com’da va Hotmail.com'da 3 tadan yangi email manzilini yaratishingiz kerak.

🔧 Nima qilish kerak?

Har bir foydalanuvchi uchun to‘liq ism (ism + familiya) tanlang. Xoxlanga 6ta har xil ism sharif tanlang va bungungi sanani kiriting oxirida

✅ Topshiriq uchun misollar:

Nodirbek Tursunov → nodirbektursunov13072025@outlook.com
Ziyoda Ergasheva → ziyodaergasheva13072025@outlook.com
Shohrux Karimov → shohruxkarimov13072025@outlook.com

Dilshod Rahimov → dilshodrahimov13072025@hotmail.com
Malika Yuldasheva → malikayuldasheva13072025@hotmail.com
Azizbek Nurali → azizbeknurali13072025@hotmail.com

Bunguni sana: 13.07.2025

Simple Way To Export Data From API To Excel Using ReactJS in 2023

Jasur Kurbanov — Fri, 17 Feb 2023 05:31:31 +0000

New React Project

npx create-react-app react-to-excel

Start project

npm start

Once project successfully created. Lets dive into installing necessary library.

Library Installation

For this tutorial we will use library namely SheetJS Community Edition. This library can installed through these package managers

npm

npm i --save https://cdn.sheetjs.com/xlsx-0.19.2/xlsx-0.19.2.tgz

pnpm

pnpm install https://cdn.sheetjs.com/xlsx-0.19.2/xlsx-0.19.2.tgz

yarn

yarn add https://cdn.sheetjs.com/xlsx-0.19.2/xlsx-0.19.2.tgz

User Interface

Let's make this kind of UI.

App.js

import "./App.css";

function App() {
  const handleDownload = () => {
    console.log("test button");
  };
  return (
    <div className="wrapper">
      <button onClick={handleDownload}>DOWNLOAD EXCEL</button>
    </div>
  );
}

export default App;

App.css

.wrapper {
  padding: 20px;
}

button {
  margin-top: 20px;
  padding: 10px;
}

Logic

First lets fetch data from API. In this tutorial I am using this API https://fakestoreapi.com/products. Lets add useState for storing data and useEffect for sending request after render.

App.js

import { useEffect, useState } from "react";
import "./App.css";

function App() {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    fetch("https://fakestoreapi.com/products")
      .then((res) => res.json())
      .then((json) => setProducts(json));
  }, []);

  const handleDownload = () => {
    console.log("test data", products);
  };
  return (
    <div className="wrapper">
      <button onClick={handleDownload}>DOWNLOAD EXCEL</button>
    </div>
  );
}

export default App;

Result

As you can see we successfully fetched data from API. Now lets implement logic for making our Excel file. First add import * as XLSX from "xlsx"; on top of App.js file for importing SheetsJS library.

App.js

import { useEffect, useState } from "react";
import "./App.css";
import * as XLSX from "xlsx";

function App() {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    fetch("https://fakestoreapi.com/products")
      .then((res) => res.json())
      .then((json) => setProducts(json));
  }, []);

  const handleDownload = () => {
    // flatten object like this {id: 1, title:'', category: ''};
    const rows = products.map((product) => ({
      id: product.id,
      title: product.title,
      category: product.category,
    }));

    // create workbook and worksheet
    const workbook = XLSX.utils.book_new();
    const worksheet = XLSX.utils.json_to_sheet(rows);

    XLSX.utils.book_append_sheet(workbook, worksheet, "Products");

    // customize header names
    XLSX.utils.sheet_add_aoa(worksheet, [
      ["Product ID", "Product Name", "Product Category"],
    ]);

    XLSX.writeFile(workbook, "ReportFor2023.xlsx", { compression: true });
  };
  return (
    <div className="wrapper">
      <button onClick={handleDownload}>DOWNLOAD EXCEL</button>
    </div>
  );
}

export default App;

Result

As you can see from screenshot below by pressing to button. We can successfully download data from API inside Excel file.

Now I open ReportFor2023.xlsx file

Project source code available on Github. Source code

If you need help for you project or doing any other web related projects reach me out

Email: jasurkurbanov96@gmail.com
Linkedin: https://www.linkedin.com/in/jasurkurbanov/

Fatal Github Error: Authentication failed for Command Line

Jasur Kurbanov — Fri, 10 Feb 2023 05:39:01 +0000

While I was participating on Linode Hackathon. I need to upload React project from Ubuntu server to Github. My Ubuntu server was hosted on Linode. So using command line I decided to upload to Github. But I come across this problem

As you can see it is stating that password authentication was removed already. So instead of this we need Personal access tokens to successfully do solve this problem.

Step 1

Go to settings

Step 2

In you profile, scroll down till end and find developer settings

Once you clicked on developer settings, you can see this sidebar with three menu items. From here click to last menu item which is Personal access tokens

Step 3

Then choose, from toggling menu down, Tokens(classic)

Step 4

Click to generate to token

Step 5

Choose for general purpose option

Step 6

On notes write down your notes, and from scopes choose what you need.

Once you done, click to generate token button.
Now you get your token

Now you can use this token for authentication.

In Command Line

When they ask you password: enter you personal access token

If you need build, help, support to your projector want to get next level in your coding journey reach me out jasurkurbanov96@gmail.com

How To Add Multiple Language Support In ReactJS

Jasur Kurbanov — Thu, 06 Oct 2022 05:01:09 +0000

Introduction

In this tutorial, we will learn how to add multiple language support with react-i18next library in React project.

react-i18next is a powerful internationalization framework for React / React Native which is based on i18next.

Table Of Content

Create New Project
Development
Adding Translations
Language Switcher
Translation Optimization
Final Result
Reference

Demo

Create New Project

Step 1: Run code below to create new React project.



npx create-react-app react-lang-support

Once project created, check if it working by running this code



cd react-lang-support
npm start

Project opened successfully

Step 2: Install dependencies
Run code below to install two libraries react-i18next and i18next



npm install react-i18next i18next

react-i18next - is an internationalization-framework for React and React Native which is based on i18next
i18next - is an internationalization-framework written in and for JavaScript

Development

Step 1: First we need to create new file called i18n.js in our project

Step 2: Add following code inside i18n.js file



import i18n from "i18next";
import { initReactI18next } from "react-i18next";

i18n
    .use(initReactI18next) // passes i18n down to react-i18next
    .init({
        // the translations
        // (tip move them in a JSON file and import them,
        // or even better, manage them via a UI: https://react.i18next.com/guides/multiple-translation-files#manage-your-translations-with-a-management-gui)
        resources: {
            en: {
                translation: {
                    "Welcome to React": "Welcome to React and react-i18next"
                }
            }
        },
        lng: "en", // if you're using a language detector, do not define the lng option
        fallbackLng: "en",

        interpolation: {
            escapeValue: false // react already safes from xss => https://www.i18next.com/translation-function/interpolation#unescape
        }
    });

Now our file look like this

Step 3: Now we need to make our translation file accessible throughout our project. That's why we need to import i18n.js file inside index.js

Add code below inside index.js



import "./i18n"

Check if you correctly following tutorial by looking to this screenshot below

Inside i18n.js file, there is translation object which is consist of keys and values. From here we will use these keys inside our JSX file.

Step 4: Inside App.js file lets import useTranslation hook.



import { useTranslation } from 'react-i18next';

function App() {
 return (
    ...
  )
}

useTranslation - gets the t function and i18n instance inside your functional component.

Step 5: As it stated above we will get t function from useTranslation hook inside App component



function App() {
  const { t } = useTranslation()

  return (
    ...
   )
}

Step 6: Now we can use t function inside our JSX. t function looks for key t('key') from i18n.js file. Our keys located inside translation object..

Overall our App.js look like this



import logo from './logo.svg';
import './App.css';
import { useTranslation } from 'react-i18next';

function App() {
  const { t } = useTranslation()
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          {t('Welcome to React')}
        </a>
      </header>
    </div>
  );
}

export default App;

Check what we have done until this part



npm start

Result

As you can see, we got "Welcome to React and react-i18next" text from our i18n.js file. It means we successfully configured react-i18next and now ready for adding translations.

Adding translations

In this project, three languages will be used. They are Uzbek, Russian and English.
Step 1 For demonstration purposes add following translations inside i18n file.



resources: {
            uz: {
                translation: {
                    welcome: "Xush kelibsiz",
                    goodbye: "Xayr"
                }
            },
            ru: {
                translation: {
                    welcome: "Добро пожаловать",
                    goodbye: "До свидания"
                }
            },
            en: {
                translation: {
                    welcome: "Welcome",
                    goodbye: "Goodbye"
                }
            }

       }

Now our i18n file look like this



import i18n from "i18next";
import { initReactI18next } from "react-i18next";

i18n
    .use(initReactI18next) // passes i18n down to react-i18next
    .init({
        // the translations
        // (tip move them in a JSON file and import them,
        // or even better, manage them via a UI: https://react.i18next.com/guides/multiple-translation-files#manage-your-translations-with-a-management-gui)
        resources: {
            uz: {
                translation: {
                    welcome: "Xush kelibsiz",
                    goodbye: "Xayr"
                }
            },
            ru: {
                translation: {
                    welcome: "Добро пожаловать",
                    goodbye: "До свидания"
                }
            },
            en: {
                translation: {
                    welcome: "Welcome",
                    goodbye: "Goodbye"
                }
            }

        },
        lng: "en", // if you're using a language detector, do not define the lng option
        fallbackLng: "en",

        interpolation: {
            escapeValue: false // react already safes from xss => https://www.i18next.com/translation-function/interpolation#unescape
        }
    });

Now let see result on browser.

As you can see it is showing words from our i18n file. But it is showing only English version.

Let change to Russian language. In order to do this, let's make change key lng to ru inside i18n file



import i18n from "i18next";
import { initReactI18next } from "react-i18next";

i18n
    .use(initReactI18next) // passes i18n down to react-i18next
    .init({
        // the translations
        // (tip move them in a JSON file and import them,
        // or even better, manage them via a UI: https://react.i18next.com/guides/multiple-translation-files#manage-your-translations-with-a-management-gui)
        resources: {
            uz: {
                translation: {
                    welcome: "Xush kelibsiz",
                    goodbye: "Xayr"
                }
            },
            ru: {
                translation: {
                    welcome: "Добро пожаловать",
                    goodbye: "До свидания"
                }
            },
            en: {
                translation: {
                    welcome: "Welcome",
                    goodbye: "Goodbye"
                }
            }

        },
        lng: "ru", // change here
        fallbackLng: "en",

        interpolation: {
            escapeValue: false // react already safes from xss => https://www.i18next.com/translation-function/interpolation#unescape
        }
    });

Let see result

As you can see it's showing Russian translation on screen. Wow we did it. Congratulations! So if you need Uzbek translation just change lng to uz. But question arises will be every time change language like in this hardcoded way ?

Answer is No. We will implement switcher to our project.

Language Switcher

Step 1: Inside App.js add <select> tag in order to give options for choosing language for user.



import logo from './logo.svg';
import './App.css';
import { useTranslation } from 'react-i18next';

function App() {
  const { t } = useTranslation()
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>

        <select>
          <option>Choose language</option>
          <option value="uz">Uzbek</option>
          <option value="ru">Russian</option>
          <option value="en">English</option>
        </select>

        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          {t('welcome')}
          <br />
          {t('goodbye')}
        </a>


      </header>
    </div>
  );
}

export default App;

Now user will be able to choose language from <select> dropdown. But it won't change language since we didn't implement function for changing language. In order to change language we will get instance of i18n from useTranslation hook.

Basic syntax of changing language using i18n



i18n.changeLanguage('en-US');

Step 2: We need to get instance of i18n from 'useTranslation'



function App() {
  const { t, i18n } = useTranslation()
  return (
      ...   
  )
}

Now inside <select> tag add onChange method, this is where we get values from options provided and pass it to i18n to change language



    <select onChange={(e) => i18n.changeLanguage(e.target.value)}>
          <option>Choose language</option>
          <option value="uz">Uzbek</option>
          <option value="ru">Russian</option>
          <option value="en">English</option>
    </select>

Final App.js



import logo from './logo.svg';
import './App.css';
import { useTranslation } from 'react-i18next';

function App() {
  const { t, i18n } = useTranslation()
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>

        <select onChange={(e) => i18n.changeLanguage(e.target.value)}>
          <option>Choose language</option>
          <option value="uz">Uzbek</option>
          <option value="ru">Russian</option>
          <option value="en">English</option>
        </select>

        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          {t('welcome')}
          <br />
          {t('goodbye')}
        </a>


      </header>
    </div>
  );
}

export default App;

Result

Translation optimization

Step 1: Now, did you noticed our translations are located inside i18n.js file. We haven't yet started splitting translations into multiple files (which is highly recommended for larger projects) but we already see that adding more languages would result in bundling unneeded translations into the application.

In order to separate our translation we will use package namely i18next-http-backend, which helps us to load our translations
asynchronously.

Install i18next-http-backend by running this code on terminal



npm install i18next-http-backend

Now we need to wire up i18next-http-backend into our i18n.js file



import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import backend from "i18next-http-backend";  // <--- import here

i18n
    .use(initReactI18next) // passes i18n down to react-i18next
    .use(backend) // <--- wire up here 
    .init({
        // the translations
        // (tip move them in a JSON file and import them,
        // or even better, manage them via a UI: https://react.i18next.com/guides/multiple-translation-files#manage-your-translations-with-a-management-gui)
        resources: {
            uz: {
                translation: {
                    welcome: "Xush kelibsiz",
                    goodbye: "Xayr"
                }
            },
            ru: {
                translation: {
                    welcome: "Добро пожаловать",
                    goodbye: "До свидания"
                }
            },
            en: {
                translation: {
                    welcome: "Welcome",
                    goodbye: "Goodbye"
                }
            }

        },
        lng: "en", // if you're using a language detector, do not define the lng option
        fallbackLng: "en",

        interpolation: {
            escapeValue: false // react already safes from xss => https://www.i18next.com/translation-function/interpolation#unescape
        }
    });

Once we connected i18next-http-backend, by default it will load translation from this path



'../public/locales/{lang}/translation.json'

This path considered to be the default for the i18next-http-backend to load from.

Step 2: We need to create this path locales/{lang}/translation.json inside public folder.

Now we need to remove this part of code from i18n.js file

And add our translations inside translation.json file for each language.

UZ

RU

EN

Now check result on browser

Final Result

Link to full source of tutorial here

Reference list

i18next
React.i18next
Locize
Geeksforgeeks
Legacy-v9

How To Export Data To Excel From Api Using ReactJS (incl. Custom Headers)

Jasur Kurbanov — Fri, 20 May 2022 10:48:52 +0000

In my previous post, about exporting data to Excel from api using React, there were comments like how to add custom header and style to the sheet!?. So considering these comments, in this post I decided to show solution for first issue which is adding custom headers to your Excel sheet.

In this post two ways of adding custom headers will be shown

First way

Setup

Create a new project



npx create-react-app react-data-to-excel

Run project locally



npm start

Let's dive into next step.

Install libraries

For this project we need to install following libraries:



npm install xlsx file-saver axios

xlsx - library for parsing and writing various spreadsheet formats
file-saver - library for saving files on the client-side
axios - promise based HTTP client for the browser and node.js. We will use it for fetching data from server

Components

Inside your project create component ExportToExcel.js



import React from 'react'
import * as FileSaver from "file-saver";
import * as XLSX from "xlsx";

export const ExportToExcel = ({ apiData, fileName }) => {
  const fileType =
    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8";
  const fileExtension = ".xlsx";

  const exportToCSV = (apiData, fileName) => {
    const ws = XLSX.utils.json_to_sheet(apiData);
    const wb = { Sheets: { data: ws }, SheetNames: ["data"] };
    const excelBuffer = XLSX.write(wb, { bookType: "xlsx", type: "array" });
    const data = new Blob([excelBuffer], { type: fileType });
    FileSaver.saveAs(data, fileName + fileExtension);
  };

  return (
    <button onClick={(e) => exportToCSV(apiData, fileName)}>Export</button>
  );
};

Update your App.js



import React from 'react'
import axios from 'axios'
import './App.css';

import {ExportToExcel} from './ExportToExcel'

function App() {
  const [data, setData] = React.useState([])
  const fileName = "myfile"; // here enter filename for your excel file

  React.useEffect(() => {
    const fetchData = () =>{
     axios.get('https://jsonplaceholder.typicode.com/posts').then(postData => {

     // reshaping the array
     const customHeadings = postData.data.map(item=>({
       "Article Id": item.id,
       "Article Title": item.title
     }))

      setData(customHeadings) 
     })
    }
    fetchData()
  }, [])

  return (
    <div className="App">
      <ExportToExcel apiData={data} fileName={fileName} />
    </div>
  );
}

export default App;

According to official SheetJS CE docs. By default, json_to_sheet creates a worksheet with a header row.

This way of adding header is reshaping array to object, based on our needs. Since the headers for Excel file come from the object keys we defined.

In our case headers will be "Article Id" and "Article Title".

Run project



npm start

Once project started successfully, click to button to download Excel file.

Result

Second way

No need to reshape array inside App.js. Just need to add this code



 XLSX.utils.sheet_add_aoa(ws, [["Name", "Birthday", "Age", "City"]], { origin: "A1" });

inside your ExportToExcel.js file



const exportToCSV = (apiData, fileName) => {

    const ws = XLSX.utils.json_to_sheet(apiData);

    /* custom headers */

    XLSX.utils.sheet_add_aoa(ws, [["Name", "Birthday", "Age", "City"]], { origin: "A1" });

    const wb = { Sheets: { data: ws }, SheetNames: ["data"] };

    const excelBuffer = XLSX.write(wb, { bookType: "xlsx", type: "array" });

    const data = new Blob([excelBuffer], { type: fileType });

    FileSaver.saveAs(data, fileName + fileExtension);

  };

Result

Source code links

1st way

2nd way

3 Ways Conditionally Render CSS in ReactJS

Jasur Kurbanov — Tue, 07 Dec 2021 05:19:37 +0000

Create new react app

npx create-react-app my-app
cd my-app
npm start

Method 1:

Syntax

{[ your_class_name]: conditon}

Example

In this method, we are going to use CSS modules. In order to merge two classes we use clsx library.

Install clsx

npm install clsx

Now once you installed let dive into App.js

import styles from "./styles.module.css";
import clsx from "clsx";

export default function App() {
  let title = true;
  return (
    <div className="App">
      <h1 class={clsx(styles.baseText, { [styles.heading]: title })}>
        Sample Heading
      </h1>
      <h1 class={styles.description}>Here goes description</h1>
    </div>
  );
}

styles.module.css

.baseText {
  font-size: 20px;
  color: yellow;
}

.heading {
  font-size: 28px;
  color: red;
}

.description {
  font-size: 18px;
  color: aqua;
}

Link

Method 2:

Syntax

conditon && yourstyle

App.js

import styles from "./styles.module.css";
import clsx from "clsx";

export default function App() {
  let title = true;
  return (
    <div className="App">
      <h1 class={clsx(styles.baseText, title && styles.heading)}>
        Sample Heading
      </h1>
      <h1 class={styles.description}>Here goes description</h1>
    </div>
  );
}

styles.module.css

.baseText {
  font-size: 20px;
  color: yellow;
}

.heading {
  font-size: 28px;
  color: red;
}

.description {
  font-size: 18px;
  color: aqua;
}

Method 3:

Syntax

{`${condition}` ? "classname_1" : "classname_2"}

Example

App.js

import "./styles.css";

export default function App() {
  let title = true;
  return (
    <div className="App">
      <h1 class={`${title}` ? "heading" : "baseText"}>Sample Heading</h1>
      <h1 class="description">Here goes description</h1>
    </div>
  );
}

styles.css

.baseText {
  font-size: 20px;
  color: yellow;
}

.heading {
  font-size: 28px;
  color: red;
}

.description {
  font-size: 18px;
  color: aqua;
}

Result

Source code for this tutorial

How To Add Custom Typography Variants In Material UI v5.1.0

Jasur Kurbanov — Thu, 25 Nov 2021 12:01:21 +0000

I found that Material UI has 13 different variants for Typography component. While doing project at company I am working I came across with problem, where I need it to add extra Typography variant. In this tutorial, I will show you how to add extra Typography variants in Material UI.

Material UI version 5.1.0 supported in this tutorial.

Create New React Project



npx create-react-app my-app
cd my-app
npm start

Install Material UI



// with npm
npm install @mui/material @emotion/react @emotion/styled

// with yarn
yarn add @mui/material @emotion/react @emotion/styled

Setup theme

Let's create our theme with our extra typographies

theme.js



export const theme = createTheme({
  typography: {
    body1_medium: {
      lineHeight: 1.6,
      fontSize: 24,
      fontWeight: 500,
    },
    body2_medium: {
      lineHeight: 1.6,
      fontSize: 18,
      fontWeight: 500,
    },
    p1_italic: {
      lineHeight: 2.6,
      fontSize: 26,
      fontStyle: "italic",
      fontWeight: 800,
    },
    p1_bold: {
      lineHeight: 2.6,
      fontSize: 22,
      fontStyle: "bold",
      fontWeight: 700,
    },
    p1_error: {
      fontStyle: "bold",
      fontWeight: 300,
      color: "red",
    },
    p2_highlighted: {
      fontStyle: "italic",
      fontWeight: 500,
      backgroundColor: "yellow",
    },
  },
});

ATTENTION
I am only showing you to add extra Typography variants, that's why I won't be touching default Typography variants. Variant names are just for demonstration purposes

Add your custom theme to ThemeProvider

index.js



import React from "react";

import ReactDOM from "react-dom";

import "./index.css";

import App from "./App";

import { ThemeProvider } from "@mui/material/styles";

import { theme } from "./theme";

ReactDOM.render(

  <ThemeProvider theme={theme}>

    <App />

  </ThemeProvider>,

  document.getElementById("root")

);

Usage



import Typography from "@mui/material/Typography";

function App() {

  return (

    <div className="App">

      <Typography variant="body1_medium">

        Lorem Ipsum is simply dummy text of the industry.

      </Typography>

      <br />

      <Typography variant="body2_medium">

        Lorem Ipsum is simply dummy text of the industry.

      </Typography>

      <br />

      <Typography variant="p1_error">

        Lorem Ipsum is simply dummy text of the industry.

      </Typography>

      <br />

      <Typography variant="p1_italic">

        Lorem Ipsum is simply dummy text of the industry.

      </Typography>

      <br />

      <Typography variant="p2_bold">

        Lorem Ipsum is simply dummy text of the industry.

      </Typography>

      <br />

      <Typography variant="p2_highlighted">

        Lorem Ipsum is simply dummy text of the industry.

      </Typography>

    </div>

  );

}

export default App;

Result

Full source code available on Github

How To Export Data To Excel From Api Using React

Jasur Kurbanov — Mon, 22 Feb 2021 12:24:46 +0000

UPDATED version of this tutorial available here

CREATE AND INSTALL

Create new react project



npx create-react-app react-data-to-excel

Now start project



npm start

Project successfully created.
Lets dive into installing neccassry libraries for our project. Install these three libraries.



npm install xlsx file-saver axios --save-dev

👉xlsx - library for parsing and writing various spreadsheet formats
👉file-saver - library for saving files on the client-side
👉axios - promise based HTTP client for the browser and node.js. We will use it for fetching data from server

UI AND LOGIC

Create a component namely ExportToExcel.js



import React from 'react'
import * as FileSaver from "file-saver";
import * as XLSX from "xlsx";

export const ExportToExcel = ({ apiData, fileName }) => {
  const fileType =
    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8";
  const fileExtension = ".xlsx";

  const exportToCSV = (apiData, fileName) => {
    const ws = XLSX.utils.json_to_sheet(apiData);
    const wb = { Sheets: { data: ws }, SheetNames: ["data"] };
    const excelBuffer = XLSX.write(wb, { bookType: "xlsx", type: "array" });
    const data = new Blob([excelBuffer], { type: fileType });
    FileSaver.saveAs(data, fileName + fileExtension);
  };

  return (
    <button onClick={(e) => exportToCSV(apiData, fileName)}>Export</button>
  );
};

Sample data we will get from https://jsonplaceholder.typicode.com/posts


 App.js



import React from 'react'
import axios from 'axios'
import './App.css';

import {ExportToExcel} from './ExportToExcel'

function App() {
  const [data, setData] = React.useState([])
  const fileName = "myfile"; // here enter filename for your excel file

  React.useEffect(() => {
    const fetchData = () =>{
     axios.get('https://jsonplaceholder.typicode.com/posts').then(r => setData(r.data) )
    }
    fetchData()
  }, [])

  return (
    <div className="App">
      <ExportToExcel apiData={data} fileName={fileName} />
    </div>
  );
}

export default App;

Start project



npm start

Once it successfully started. You can see one button. By pressing this button you download excel file with data filled from https://jsonplaceholder.typicode.com/posts

Output

Excel File

Github repo for this project link