React བཀོལ་ནས་རིན་མེད་འབྲེལ་བ་QR ཨང་ཀི་བཟོ་ཆས་བཟོ་བ་དང་GitHub Pages ཐོག་སྤྲོད་པ།

སྤྱི་ཚོགས་དྲ་བའི་དུས་རབས་སུ། འབྲེལ་བའི་གནས་ཚུལ་མཉམ་སྤྱོད་མགྱོགས་པ་དང་འབད་པ་མེད་པ་ཡིན་དགོས། ངའི་གཅེན་པོས་མགྲོན་པ་དང་འདིའི་འབྲེལ་བའི་རྒྱས་པ་ནུས་ལྡན་དུ་བརྗེ་རེས་བྱེད་པའི་དཀའ་ངལ་ལ་གདོང་ལེན་བྱས། སྲོལ་རྒྱུན་གྱི་ཚོང་ལས་ཤོག་བུ། ནུས་ཡོད་ཡིན་ཀྱང༌། ཚད་བཀག་ཡོད། དྲ་ཐོག་QR ཨང་ཀི་བཟོ་ཆས་ལྟ་བུའི་འདེམས་གཞི་གཞན་པས་མང་ཆེ་བར་རིན་གླ་འམ་ཐོ་འགོད་དགོས་པས། སྟབས་མི་བདེ། འདིས་ང་ལ་རིན་མེད། བཀོལ་སླ་བའི་འབྲེལ་བ་QR ཨང་ཀི་བཟོ་ཆས་བཟོ་བར་སྐུལ་བྱུང༌། ཟིན་བྲིས་འདིར། ངས་ཁྱོད་ཀྱིས་React བཀོལ་ནས་ཁྱོད་རང་གི་བཟོ་ཐུབ་པ་དང་GitHub Pages བཀོལ་ནས་རིན་མེད་དུ་སྤྲོད་ཐུབ་པའི་ཐབས་ལམ་མཉམ་སྤྱོད་བྱ།

ལས་གཞི་སྒྲིག་འཇུག

སྔོན་འགྲོའི་ཆ་རྐྱེན།

• React དང་JavaScript ཀྱི་རྨང་གཞིའི་ཤེས་ཡོན།
• ཁྱོད་ཀྱི་གློག་ཀླད་ཐོག་Node.js དང་npm བཅུག་ཡོད།
• GitHub གི་རྩིས་ཁྲ།

གོམ་པ་དང་པོ། React མཉེན་ཆས་བཟོ་བ།

Create React App བཀོལ་ནས་React མཉེན་ཆས་གསར་པ་བཟོས་ནས་མགོ་བརྩམས།

npx create-react-app contact-qr-code-generator
cd contact-qr-code-generator

གོམ་པ་གཉིས་པ། TailwindCSS སྣོན་པ།

ང་ཚོའི་UI མཛེས་པར་བཟོ་བའི་ཆེད། ང་ཚོས་TailwindCSS བཀོལ།

npm install tailwindcss postcss autoprefixer
npx tailwindcss init -p

ཁྱོད་ཀྱི་tailwind.config.js ནང་། purge འདེམས་གཞི་སྒྲིག

module.exports = {
  purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
  // ... སྒྲིག་གཞི་གཞན།
};

ཁྱོད་ཀྱི་CSS ནང་Tailwind འཇུག (src/index.css ནང)

@tailwind base;
@tailwind components;
@tailwind utilities;

མཉེན་ཆས་བཟོ་བ།

ContactForm ཆ་ཤས།

ཆ་ཤས་འདི་ (ContactForm.js) བཀོལ་མཁན་གྱིས་འབྲེལ་བའི་རྒྱས་པ་བཅུག་ཆོག་པའི་གཤམ་གྱི་འཆར་སྤྲོད་བྱེད་འགན་ཡོད།

import React, { useState } from "react";

function ContactForm({ onSubmit }) {
  // ... useState དང་handleChange ངེས་འཛིན།
  // ... TailwindCSS སྡེ་ཚན་ཅན་གྱི་གཤམ་JSX
}

export default ContactForm;

QRCodeGenerator ཆ་ཤས།

QRCodeGenerator.js ནང་། ང་ཚོས་qrcode.react མཛོད་བཀོལ་ནས་QR ཨང་ཀི་བཟོ་བ་དང་འཆར་སྤྲོད་བྱེད་འགན་བཟུང༌།

import React, { useState } from "react";
import QRCode from "qrcode.react";
import ContactForm from "./ContactForm";

function QRCodeGenerator() {
  // ... useState, handleSubmit, དང་createVCard ངེས་འཛིན།
  // ... ཆ་ཤས་JSX
}

export default QRCodeGenerator;

App.js ནང་ཆ་ཤས་མཉམ་སྦྲེལ།

མཐར། App.js ནང་། ང་ཚོས་QRCodeGenerator ཆ་ཤས་འཇུག

import React from "react";
import QRCodeGenerator from "./QRCodeGenerator";

function App() {
  // ... App གི་JSX
}

export default App;

GitHub Pages ལ་སྤྲོད་པ།

གོམ་པ་དང་པོ། gh-pages བཅུག

npm install gh-pages --save-dev

གོམ་པ་གཉིས་པ། package.json གསར་བསྐྲུན།

མདུན་ཤོག་དང་སྤྲོད་པའི་ཨང་ཀི་སྣོན།

{
  "homepage": "https://<username>.github.io/<repo-name>",
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
    // ... ཨང་ཀི་གཞན།
  }
}

གོམ་པ་གསུམ་པ། ཁྱོད་ཀྱི་མཉེན་ཆས་སྤྲོད།

སྤྲོད་པའི་ཨང་ཀི་འཁྲུལ།

npm run deploy

གོམ་པ་བཞི་པ། GitHub མཛོད་སྒྲིག་གཞི་སྒྲིག

ཁྱོད་ཀྱི་GitHub མཛོད་སྒྲིག་གཞིར། GitHub Pages ཁུངས་gh-pages ཡན་ལག་ལ་སྒྲིག

མཇུག་བསྡུ།

ལས་གཞི་འདི་ངའི་ཆེད་དམིགས་བསལ་གྱི་འགྲུལ་བཞུད་ཅིག་ཡིན། ལྷག་པར་དུ་ReactJS ལ་མཁས་པ་མིན་པའི་མི་ཞིག་གི་ཚུལ་དུ། འདི་ཡིན་ཀྱང༌། ངས་React ལ་ཚོད་ལྟ་བྱེད། དགོས་སྐབས་འོས་པའི་ཨང་ཀི་བྲིས་ཐུབ། སློབ་ཁྲིད་འདིའི་ཆེད། ངས་དྲ་ཐོག་སློབ་ཁྲིད་དང་GitHub Copilot གྱི་གསར་གཏོད་ཅན་གྱི་རོགས་པ་ལ་མང་པོ་བརྟེན། འདིས་བཟོ་བའི་བྱ་གཞག་གལ་ཆེན་སླ་བ་བཟོས།

འབྲེལ་བ་QR ཨང་ཀི་བཟོ་ཆས་འདི་བཟོས་པས་ཐབས་ལམ་ཅན་གྱི་གནད་དོན་སེལ་བ་ཙམ་མིན་པར། React དང་TailwindCSS ལྟ་བུའི་དེང་རབས་དྲ་ཚིགས་འཕྲུལ་རིག་གི་ནུས་པའི་སྐོར་ཕན་ཐོགས་ཅན་གྱི་ཤེས་རྟོགས་ཀྱང་སྦྱིན་བྱུང༌། འདི་ནི་འཕྲུལ་རིག་སླ་བསྟུན་ཇི་ལྟར་འགྱུར་བའི་དཔང་རྟགས་ཡིན། རྨང་གཞི་དམིགས་བསལ་ཅིག་ལ་ཟབ་མོར་མཁས་པ་མིན་ཀྱང༌། ཕན་ཐོགས་དང་ཤུགས་རྐྱེན་ལྡན་པ་བཟོ་ཆོག

ད་ལྟ། མཉེན་ཆས་གསོན་པོར་ཡོད། རིན་མེད་དང་བཀོལ་སླ་བའི་ཞབས་ཞུ་མཁོ་སྤྲོད། འདི་གཅེས་པ་ཡིན་ཀྱང་ནུས་ཡོད་ཀྱི་ཐག་གཅོད། འབྲེལ་བའི་གནས་ཚུལ་མཉམ་སྤྱོད་QR ཨང་ཀི་མགྱོགས་པའི་བསྐན་པ་ཙམ་དུ་བསྒྱུར། ལས་གཞི་འདི་བརྒྱུད། ངས་འཕྲུལ་རིག་ཉིན་རེའི་ལས་དོན་སླ་བཟོ་བའི་ཐབས་ལམ་ཅན་གྱི་ཐག་གཅོད་བཟོ་བར་ཇི་ལྟར་བཀོལ་ཆོག་པ་རང་གིས་མྱོང་བྱུང༌།

མཉེན་ཆས་ཀྱི་སྦྲེལ་མཐུད།

👉 མཉེན་ཆས་ལ་འདིར་མནན།