React ਕੀ ਹੈ? ਗ਼ੈਰ-ਡਿਵੈਲਪਰਾਂ ਲਈ ਸਧਾਰਨ ਗਾਈਡ

React ਯੂਜ਼ਰ ਇੰਟਰਫ਼ੇਸ ਬਣਾਉਣ ਲਈ ਇੱਕ JavaScript ਲਾਇਬ੍ਰੇਰੀ ਹੈ, ਯਾਨੀ ਐਪ ਦਾ ਉਹ ਹਿੱਸਾ ਜੋ ਲੋਕ ਵੇਖਦੇ ਅਤੇ ਕਲਿੱਕ ਕਰਦੇ ਹਨ। ਤੁਸੀਂ ਸਕਰੀਨਾਂ ਨੂੰ ਮੁੜ ਵਰਤੋਂ ਯੋਗ ਟੁਕੜਿਆਂ ਤੋਂ ਬਣਾਉਂਦੇ ਹੋ, ਜਿਵੇਂ ਬਟਨ, ਉਤਪਾਦ ਕਾਰਡ ਜਾਂ ਪੂਰਾ ਪੰਨਾ, ਜਿਨ੍ਹਾਂ ਨੂੰ ਕੰਪੋਨੈਂਟ ਕਿਹਾ ਜਾਂਦਾ ਹੈ। React ਸਕਰੀਨ ਨੂੰ ਤੁਹਾਡੇ ਡਾਟੇ ਨਾਲ ਸਮਕਾਲੀ ਰੱਖਦਾ ਹੈ: ਜਦੋਂ ਡਾਟਾ ਬਦਲਦਾ ਹੈ, ਤਾਂ ਉਸ ’ਤੇ ਨਿਰਭਰ ਪੰਨੇ ਦੇ ਹਿੱਸੇ ਅੱਪਡੇਟ ਹੋ ਜਾਂਦੇ ਹਨ। ਇਹ Facebook (ਹੁਣ Meta) ’ਤੇ ਬਣਿਆ ਸੀ, ਓਪਨ ਸੋਰਸ ਹੈ, ਅਤੇ ਵੈੱਬ ਐਪ ਬਣਾਉਣ ਦੇ ਸਭ ਤੋਂ ਵੱਧ ਵਰਤੇ ਜਾਣ ਵਾਲੇ ਤਰੀਕਿਆਂ ਵਿੱਚੋਂ ਇੱਕ ਹੈ।

AI ਨਾਲ ਬਣਾਉਂਦੇ ਸਮੇਂ ਇਹ ਕਿਉਂ ਮਾਇਨੇ ਰੱਖਦਾ ਹੈ

ਜੇ ਤੁਸੀਂ ਕਿਸੇ AI ਟੂਲ ਨਾਲ ਵੈੱਬ ਐਪ ਬਣਾਉਂਦੇ ਹੋ, ਤਾਂ ਸੰਭਾਵਨਾ ਹੈ ਕਿ ਉਹ React ਵਿੱਚ ਲਿਖੀ ਹੋਵੇ। ਬਹੁਤ ਸਾਰੇ AI ਐਪ ਬਿਲਡਰ ਡਿਫ਼ਾਲਟ ਤੌਰ ’ਤੇ React ਵਰਤਦੇ ਹਨ, ਕਿਉਂਕਿ ਇਹ ਮਸ਼ਹੂਰ ਹੈ, ਚੰਗੀ ਤਰ੍ਹਾਂ ਦਸਤਾਵੇਜ਼ਿਤ ਹੈ, ਅਤੇ AI ਮਾਡਲਾਂ ਨੇ ਇਸ ਦਾ ਬਹੁਤ ਸਾਰਾ ਕੋਡ ਸਿੱਖਿਆ ਹੋਇਆ ਹੈ।

AI ਨਾਲ ਬਣਾਉਣ ਲਈ ਤੁਹਾਨੂੰ React ਲਿਖਣਾ ਨਹੀਂ ਆਉਣਾ ਚਾਹੀਦਾ। ਪਰ ਥੋੜ੍ਹਾ ਜਾਣਨ ਨਾਲ ਤੁਹਾਨੂੰ ਇਹ ਫ਼ਾਇਦੇ ਮਿਲਦੇ ਹਨ:

• ਤਬਦੀਲੀਆਂ ਸਹੀ ਢੰਗ ਨਾਲ ਦੱਸਣਾ। “ProductCard ਕੰਪੋਨੈਂਟ ਵਿੱਚ ਕੀਮਤ ਬੋਲਡ ਕਰੋ” ਕਹਿਣਾ “ਕਿਤੇ ਕੀਮਤਾਂ ਉਭਾਰੋ” ਨਾਲੋਂ ਸਾਫ਼ ਹੈ।
• ਗ਼ਲਤੀਆਂ ਸਮਝਣਾ। “Cannot read properties of undefined” ਜਾਂ “Too many re-renders” ਵਰਗੇ ਸੁਨੇਹੇ ਵਧੇਰੇ ਸਮਝ ਆਉਂਦੇ ਹਨ।
• ਸਮਝਦਾਰ ਚੋਣ ਕਰਨਾ। ਸਾਦੀਆਂ React ਐਪਾਂ ਬਰਾਊਜ਼ਰ ਵਿੱਚ ਰੈਂਡਰ ਹੁੰਦੀਆਂ ਹਨ, ਜੋ ਸਰਚ ਵਿੱਚ ਦਿੱਖ ਅਤੇ ਪਹਿਲੀ ਲੋਡਿੰਗ ਦੀ ਰਫ਼ਤਾਰ ’ਤੇ ਅਸਰ ਪਾਉਂਦਾ ਹੈ। ਇਹ ਜਾਣਨ ਨਾਲ ਤੁਸੀਂ ਫ਼ੈਸਲਾ ਕਰ ਸਕਦੇ ਹੋ ਕਿ ਕਦੋਂ ਵੱਖਰੀ ਸੈੱਟਅੱਪ ਮੰਗਣੀ ਹੈ।
• ਬਾਅਦ ਵਿੱਚ ਡਿਵੈਲਪਰਾਂ ਨਾਲ ਕੰਮ ਕਰਨਾ। React ਇੱਕ ਆਮ ਹੁਨਰ ਹੈ, ਇਸ ਲਈ ਕੋਈ ਡਿਵੈਲਪਰ ਆਮ ਤੌਰ ’ਤੇ React ਕੋਡਬੇਸ ਜਲਦੀ ਸਮਝ ਲੈਂਦਾ ਹੈ।

ਰੋਜ਼ਾਨਾ ਦੀ ਮਿਸਾਲ

LEGO ਬਾਰੇ ਸੋਚੋ। ਪੂਰਾ ਮਾਡਲ ਇੱਕੋ ਬਲਾਕ ਤੋਂ ਤਰਾਸ਼ਣ ਦੀ ਥਾਂ, ਤੁਸੀਂ ਮਿਆਰੀ ਇੱਟਾਂ ਤੋਂ ਬਣਾਉਂਦੇ ਹੋ। ਕੁਝ ਇੱਟਾਂ ਮਿਲ ਕੇ ਇੱਕ ਪਹੀਆ ਬਣਦੀਆਂ ਹਨ; ਚਾਰ ਪਹੀਏ ਅਤੇ ਕੁਝ ਹੋਰ ਹਿੱਸੇ ਮਿਲ ਕੇ ਕਾਰ। ਜੇ ਹਰ ਕਾਰ ਦੇ ਲਾਲ ਪਹੀਏ ਚਾਹੀਦੇ ਹਨ, ਤਾਂ ਪਹੀਏ ਦਾ ਡਿਜ਼ਾਈਨ ਇੱਕ ਵਾਰ ਬਦਲੋ।

React ਕੰਪੋਨੈਂਟ ਉਹ ਇੱਟਾਂ ਹਨ। ਇੱਕ Button ਕੰਪੋਨੈਂਟ ProductCard ਦੇ ਅੰਦਰ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ, ਜੋ ProductGrid ਵਿੱਚ ਹੈ, ਜੋ ShopPage ਦਾ ਹਿੱਸਾ ਹੈ। Button ਇੱਕ ਵਾਰ ਬਦਲੋ, ਅਤੇ ਐਪ ਦਾ ਹਰ ਬਟਨ ਬਦਲ ਜਾਂਦਾ ਹੈ।

ਮਿਸਾਲ ਦਾ ਦੂਜਾ ਪਾਸਾ: ਕਲਪਨਾ ਕਰੋ ਕਿ LEGO ਮਾਡਲ ਹਦਾਇਤਾਂ ਬਦਲਣ ’ਤੇ ਆਪਣੇ ਆਪ ਦੁਬਾਰਾ ਬਣ ਜਾਂਦਾ ਹੈ। React ਦੀ ਇਹ ਦੂਜੀ ਖ਼ਾਸੀਅਤ ਹੈ: ਤੁਸੀਂ ਦੱਸਦੇ ਹੋ ਕਿ ਮੌਜੂਦਾ ਡਾਟੇ ਲਈ ਸਕਰੀਨ ਕਿਹੋ ਜਿਹੀ ਦਿਸਣੀ ਚਾਹੀਦੀ ਹੈ, ਅਤੇ React ਪੰਨੇ ’ਤੇ ਕੀ ਬਦਲਣਾ ਹੈ ਇਹ ਆਪ ਤੈਅ ਕਰਦਾ ਹੈ।

ਮੁੱਖ ਸੰਕਲਪ

ਕੰਪੋਨੈਂਟ

ਕੰਪੋਨੈਂਟ ਇੱਕ JavaScript ਫ਼ੰਕਸ਼ਨ ਹੈ ਜੋ ਇੰਟਰਫ਼ੇਸ ਦਾ ਇੱਕ ਟੁਕੜਾ ਵਾਪਸ ਕਰਦਾ ਹੈ। React ਦੇ ਦਸਤਾਵੇਜ਼ ਇਸ ਨੂੰ UI ਦਾ ਅਜਿਹਾ ਹਿੱਸਾ ਕਹਿੰਦੇ ਹਨ ਜਿਸ ਦਾ ਆਪਣਾ ਤਰਕ ਅਤੇ ਦਿੱਖ ਹੁੰਦੀ ਹੈ। ਕੰਪੋਨੈਂਟ ਦੇ ਨਾਂ ਵੱਡੇ ਅੱਖਰ ਨਾਲ ਸ਼ੁਰੂ ਹੁੰਦੇ ਹਨ।

JSX

ਕੰਪੋਨੈਂਟ ਆਮ ਤੌਰ ’ਤੇ JSX ਵਿੱਚ ਲਿਖੇ ਜਾਂਦੇ ਹਨ, ਜੋ JavaScript ਵਿੱਚ ਮਿਲੇ HTML ਵਰਗਾ ਦਿਸਦਾ ਹੈ:

function Greeting() {
  return <h1>Welcome back!</h1>;
}

JSX ਲਾਜ਼ਮੀ ਨਹੀਂ ਹੈ, ਪਰ React ਦੇ ਦਸਤਾਵੇਜ਼ ਦੱਸਦੇ ਹਨ ਕਿ ਜ਼ਿਆਦਾਤਰ ਪ੍ਰੋਜੈਕਟ ਇਸ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ। ਬਰਾਊਜ਼ਰ ਵਿੱਚ ਚੱਲਣ ਤੋਂ ਪਹਿਲਾਂ ਇਹ ਸਾਦੇ JavaScript ਵਿੱਚ ਬਦਲ ਜਾਂਦਾ ਹੈ।

Props

Props ਉਹ ਇਨਪੁੱਟ ਹਨ ਜੋ ਤੁਸੀਂ ਕੰਪੋਨੈਂਟ ਨੂੰ ਦਿੰਦੇ ਹੋ, ਮੁੜ ਵਰਤੋਂ ਯੋਗ ਹਿੱਸੇ ’ਤੇ ਸੈਟਿੰਗਾਂ ਵਾਂਗ:

<ProductCard name="Lavender Candle" price={24} />

ਇੱਕੋ ProductCard ਕੋਈ ਵੀ ਉਤਪਾਦ ਵਿਖਾ ਸਕਦਾ ਹੈ।

State

State ਉਹ ਜਾਣਕਾਰੀ ਹੈ ਜੋ ਕੰਪੋਨੈਂਟ ਯਾਦ ਰੱਖਦਾ ਹੈ ਅਤੇ ਐਪ ਚੱਲਦਿਆਂ ਬਦਲ ਸਕਦੀ ਹੈ, ਜਿਵੇਂ ਮੇਨੂ ਖੁੱਲ੍ਹਾ ਹੈ ਜਾਂ ਨਹੀਂ, ਸਰਚ ਬਾਕਸ ਵਿੱਚ ਕੀ ਲਿਖਿਆ ਹੈ, ਜਾਂ ਕਾਰਟ ਵਿੱਚ ਕਿੰਨੀਆਂ ਚੀਜ਼ਾਂ ਹਨ। ਜਦੋਂ state ਬਦਲਦਾ ਹੈ, React ਕੰਪੋਨੈਂਟ ਨੂੰ ਮੁੜ ਰੈਂਡਰ ਕਰਦਾ ਹੈ ਤਾਂ ਜੋ ਸਕਰੀਨ ਮੇਲ ਖਾਵੇ।

Hooks

Hooks ਉਹ ਫ਼ੰਕਸ਼ਨ ਹਨ ਜਿਨ੍ਹਾਂ ਦੇ ਨਾਂ use ਨਾਲ ਸ਼ੁਰੂ ਹੁੰਦੇ ਹਨ, ਜਿਵੇਂ useState (ਇੱਕ ਮੁੱਲ ਯਾਦ ਰੱਖਣਾ) ਅਤੇ useEffect (ਰੈਂਡਰ ਤੋਂ ਬਾਅਦ ਕੋਡ ਚਲਾਉਣਾ, ਜਿਵੇਂ ਡਾਟਾ ਲਿਆਉਣਾ)। AI ਨਾਲ ਬਣੇ React ਕੋਡ ਵਿੱਚ ਇਹ ਹਰ ਪਾਸੇ ਮਿਲਣਗੇ।

ਕੰਮ ਦੀ ਮਿਸਾਲ: ਇੱਕ ਕਾਰਟ ਕਾਊਂਟਰ

ਮੰਨ ਲਓ ਤੁਹਾਡੀ ਔਨਲਾਈਨ ਦੁਕਾਨ ’ਤੇ ਇੱਕ “Add to cart” ਬਟਨ ਹੈ ਅਤੇ ਇੱਕ ਕਾਰਟ ਆਈਕਨ ਜੋ ਚੀਜ਼ਾਂ ਦੀ ਗਿਣਤੀ ਦਿਖਾਉਂਦਾ ਹੈ। React ਵਿੱਚ ਇਹ ਮੋਟੇ ਤੌਰ ’ਤੇ ਇਸ ਤਰ੍ਹਾਂ ਦਿਸਦਾ ਹੈ:

import { useState } from "react";

function Shop() {
  const [cartCount, setCartCount] = useState(0);

  return (
    <div>
      <CartIcon count={cartCount} />
      <ProductCard
        name="Lavender Candle"
        price={24}
        onAdd={() => setCartCount(cartCount + 1)}
      />
    </div>
  );
}

function CartIcon({ count }) {
  return <span>Cart ({count})</span>;
}

function ProductCard({ name, price, onAdd }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>${price}</p>
      <button onClick={onAdd}>Add to cart</button>
    </div>
  );
}

ਜਦੋਂ ਕੋਈ ਖ਼ਰੀਦਦਾਰ “Add to cart” ’ਤੇ ਕਲਿੱਕ ਕਰਦਾ ਹੈ:

1. ਬਟਨ ਦਾ onClick onAdd ਨੂੰ ਬੁਲਾਉਂਦਾ ਹੈ, ਜੋ setCartCount ਨੂੰ ਬੁਲਾਉਂਦਾ ਹੈ।
2. React cartCount state ਨੂੰ 0 ਤੋਂ 1 ਕਰ ਦਿੰਦਾ ਹੈ।
3. React Shop ਨੂੰ ਮੁੜ ਰੈਂਡਰ ਕਰਦਾ ਹੈ, ਅਤੇ CartIcon ਨੂੰ count={1} ਦਿੰਦਾ ਹੈ।
4. ਪੰਨਾ ਹੁਣ “Cart (1)” ਦਿਖਾਉਂਦਾ ਹੈ। ਕਿਸੇ ਨੇ ਕੋਡ ਨਹੀਂ ਲਿਖਿਆ ਕਿ “ਕਾਰਟ ਵਾਲਾ ਟੈਕਸਟ ਲੱਭ ਕੇ ਬਦਲੋ”; ਸਕਰੀਨ ਡਾਟੇ ਦੇ ਪਿੱਛੇ ਚੱਲਦੀ ਹੈ।

ਹੱਦਾਂ ਵੀ ਵੇਖੋ। ਇਹ ਗਿਣਤੀ ਬਰਾਊਜ਼ਰ ਦੀ ਮੈਮੋਰੀ ਵਿੱਚ ਰਹਿੰਦੀ ਹੈ। ਪੰਨਾ ਰਿਫ਼ਰੈਸ਼ ਕਰੋ, ਤਾਂ ਇਹ ਫਿਰ 0 ਹੋ ਜਾਂਦੀ ਹੈ। ਕਾਰਟ ਬਚਾਉਣ ਲਈ ਇਸ ਨੂੰ ਕਿਤੇ ਸਥਾਈ ਰੱਖਣਾ ਪਵੇਗਾ: ਕੂਕੀ, ਬਰਾਊਜ਼ਰ ਸਟੋਰੇਜ, ਜਾਂ ਡਾਟਾਬੇਸ ਜੋ ਤੁਹਾਡੇ ਬੈਕਐਂਡ ਰਾਹੀਂ ਹੋਵੇ। React ਸਕਰੀਨ ਸੰਭਾਲਦਾ ਹੈ, ਤੁਹਾਡਾ ਡਾਟਾ ਸਟੋਰ ਨਹੀਂ ਕਰਦਾ।

React ਵੈੱਬ ਐਪ ਵਿੱਚ ਕਿੱਥੇ ਫਿੱਟ ਹੁੰਦਾ ਹੈ

“Vite + React” ਐਪ ਬਰਾਊਜ਼ਰ ਵਿੱਚ ਰੈਂਡਰ ਹੁੰਦੀ ਹੈ (ਇੱਕ ਸਿੰਗਲ-ਪੇਜ ਐਪ)। Next.js ਐਪ ਪੰਨਿਆਂ ਨੂੰ ਪਹਿਲਾਂ ਸਰਵਰ ’ਤੇ ਰੈਂਡਰ ਕਰ ਸਕਦੀ ਹੈ, ਜੋ ਸਰਚ ਇੰਜਣਾਂ ਅਤੇ ਪਹਿਲੀ ਲੋਡਿੰਗ ਦੀ ਰਫ਼ਤਾਰ ਲਈ ਮਦਦਗਾਰ ਹੈ।

ਆਮ ਸ਼ਬਦਾਂ ਦੀ ਵਿਆਖਿਆ

ਆਮ ਗ਼ਲਤੀਆਂ ਅਤੇ ਗ਼ਲਤਫ਼ਹਿਮੀਆਂ

• “React ਇੱਕ ਪ੍ਰੋਗਰਾਮਿੰਗ ਭਾਸ਼ਾ ਹੈ।” ਇਹ ਇੱਕ ਲਾਇਬ੍ਰੇਰੀ ਹੈ ਜੋ JavaScript (ਜਾਂ TypeScript) ਵਿੱਚ ਲਿਖੀ ਅਤੇ ਉਸ ਤੋਂ ਵਰਤੀ ਜਾਂਦੀ ਹੈ।
• “React ਮੇਰਾ ਡਾਟਾ ਸਟੋਰ ਕਰਦਾ ਹੈ।” State ਬਰਾਊਜ਼ਰ ਵਿੱਚ ਰਹਿੰਦਾ ਹੈ ਅਤੇ ਰਿਫ਼ਰੈਸ਼ ’ਤੇ ਖ਼ਤਮ ਹੋ ਜਾਂਦਾ ਹੈ। ਸਥਾਈ ਡਾਟੇ ਲਈ ਬੈਕਐਂਡ ਅਤੇ ਡਾਟਾਬੇਸ ਚਾਹੀਦਾ ਹੈ।
• React ਕੋਡ ਵਿੱਚ ਸੀਕਰੇਟ ਪਾਉਣਾ। React ਐਪ ਦਾ ਸਭ ਕੁਝ ਵਿਜ਼ਟਰ ਦੇ ਬਰਾਊਜ਼ਰ ਤੱਕ ਜਾਂਦਾ ਹੈ। ਉੱਥੇ ਪਾਈਆਂ API ਕੀਅ ਜਨਤਕ ਹੋ ਜਾਂਦੀਆਂ ਹਨ। ਉਨ੍ਹਾਂ ਨੂੰ ਸਰਵਰ ’ਤੇ ਰੱਖੋ।
• “React ਐਪਾਂ ਸਰਚ ਵਿੱਚ ਰੈਂਕ ਨਹੀਂ ਹੋ ਸਕਦੀਆਂ।” ਸਿਰਫ਼ ਕਲਾਇੰਟ ’ਤੇ ਰੈਂਡਰ ਕਰਨਾ ਸਰਚ ਲਈ ਕਮਜ਼ੋਰ ਹੈ, ਪਰ ਪ੍ਰੀਰੈਂਡਰਿੰਗ ਜਾਂ ਸਰਵਰ ਰੈਂਡਰਿੰਗ ਜ਼ਿਆਦਾਤਰ ਇਸ ਨੂੰ ਠੀਕ ਕਰ ਦਿੰਦੀ ਹੈ।
• ਵੱਡੇ ਕੰਪੋਨੈਂਟ। ਇੱਕ 1,000 ਲਾਈਨਾਂ ਵਾਲਾ ਕੰਪੋਨੈਂਟ ਲੋਕਾਂ ਅਤੇ AI ਦੋਹਾਂ ਲਈ ਸੁਰੱਖਿਅਤ ਢੰਗ ਨਾਲ ਬਦਲਣਾ ਔਖਾ ਹੈ। ਛੋਟੇ ਕੰਪੋਨੈਂਟ ਮੰਗੋ।
• ਮੰਨਣਾ ਕਿ React ਵੈੱਬ ਐਪ ਫ਼ੋਨ ਐਪ ਹੈ। ਇਹ ਬਰਾਊਜ਼ਰ ਵਿੱਚ ਚੱਲਦੀ ਹੈ, ਫ਼ੋਨਾਂ ’ਤੇ ਵੀ, ਪਰ ਇਹ App Store ਦੀ ਐਪ ਨਹੀਂ ਹੈ।

ਆਪਣੇ AI ਬਿਲਡਰ ਤੋਂ ਕੀ ਮੰਗਣਾ ਹੈ

• “ਇਸ ਪੰਨੇ ਨੂੰ ਛੋਟੇ, ਨਾਂ ਵਾਲੇ ਕੰਪੋਨੈਂਟਾਂ ਵਿੱਚ ਵੰਡੋ, ਅਤੇ ਦੱਸੋ ਕਿ ਹਰ ਇੱਕ ਕਿਹੜੀ ਫ਼ਾਈਲ ਵਿੱਚ ਹੈ।”
• “ProductCard ਕੰਪੋਨੈਂਟ ਨੂੰ ਮੁੜ ਵਰਤੋਂ ਯੋਗ ਬਣਾਓ, ਜਿਸ ਵਿੱਚ name, price ਅਤੇ image props ਹੋਣ।”
• “ਕਾਰਟ ਨੂੰ ਡਾਟਾਬੇਸ ਵਿੱਚ ਸੰਭਾਲੋ ਤਾਂ ਜੋ ਰਿਫ਼ਰੈਸ਼ ਤੋਂ ਬਾਅਦ ਵੀ ਰਹੇ।”
• “ਸਾਰੀਆਂ API ਕੀਅ ਸਰਵਰ ’ਤੇ ਰੱਖੋ; React ਕੋਡ ਸਾਡੀ ਆਪਣੀ API ਨੂੰ ਬੁਲਾਵੇ।”
• “ਸਰਵਰ ਤੋਂ ਆਉਣ ਵਾਲੇ ਡਾਟੇ ਲਈ ਲੋਡਿੰਗ ਅਤੇ ਗ਼ਲਤੀ ਵਾਲੀਆਂ ਹਾਲਤਾਂ ਜੋੜੋ।”
• “ਜੇ ਇਨ੍ਹਾਂ ਪੰਨਿਆਂ ਲਈ ਸਰਚ ਦੀ ਦਿੱਖ ਮਾਇਨੇ ਰੱਖਦੀ ਹੈ, ਤਾਂ ਇਨ੍ਹਾਂ ਨੂੰ ਪ੍ਰੀਰੈਂਡਰ ਕਰੋ ਜਾਂ ਸਰਵਰ-ਰੈਂਡਰ ਸੈੱਟਅੱਪ ਵਰਤੋ।”
• “ਸਧਾਰਨ ਭਾਸ਼ਾ ਵਿੱਚ ਦੱਸੋ ਕਿ ਇਹ ਗ਼ਲਤੀ ਕੀ ਹੈ ਅਤੇ ਕਿਹੜੇ ਕੰਪੋਨੈਂਟ ਤੋਂ ਆਉਂਦੀ ਹੈ।”

ਵੱਡੀ ਤਸਵੀਰ ਲਈ ਫ਼ਰੰਟਐਂਡ ਬਨਾਮ ਬੈਕਐਂਡ ਵੇਖੋ, ਅਤੇ AI ਦੇ ਲਿਖੇ ਕੋਡ ਦੀ ਸਮੀਖਿਆ ਲਈ AI ਨਾਲ ਬਣਾਇਆ ਕੋਡ ਕਿਵੇਂ ਪਰਖੀਏ।

Mythex ਵਿੱਚ React

ਜਦ ਤੱਕ ਤੁਸੀਂ ਕੁਝ ਹੋਰ ਨਹੀਂ ਮੰਗਦੇ, Mythex ਨਵੇਂ ਪ੍ਰੋਜੈਕਟ Vite + React + TypeScript + Tailwind ’ਤੇ ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ, ਅਤੇ ਤੁਹਾਡੀ ਚੈਟ ਦੌਰਾਨ ਇੱਕ ਲਾਈਵ ਪ੍ਰੀਵਿਊ ਚੱਲਦੀ ਰਹਿੰਦੀ ਹੈ। ਤੁਸੀਂ ਆਪਣੇ ਪਹਿਲੇ ਪ੍ਰੌਂਪਟ ਵਿੱਚ ਕੋਈ ਹੋਰ ਸੈੱਟਅੱਪ ਦੱਸ ਸਕਦੇ ਹੋ, ਜਿਵੇਂ “Next.js ਵਰਤੋ” ਜਾਂ “ਸਾਦਾ ਸਟੈਟਿਕ HTML ਲੈਂਡਿੰਗ ਪੰਨਾ”, ਅਤੇ Mythex ਜੋ ਤੁਸੀਂ ਲਿਖਦੇ ਹੋ ਉਸ ਤੋਂ ਚੁਣਦਾ ਹੈ; ਇਸ ਲਈ ਕੋਈ ਸੈਟਿੰਗ ਸਕਰੀਨ ਨਹੀਂ ਹੈ। ਤਕਨੀਕ ਕਿਵੇਂ ਚੁਣੀ ਜਾਂਦੀ ਹੈ ਬਾਰੇ ਡੌਕਸ ਪੰਨਾ ਵਿਕਲਪ ਸਮਝਾਉਂਦਾ ਹੈ। ਕੋਡ ਐਡੀਟਰ Free ’ਤੇ ਸਿਰਫ਼ ਪੜ੍ਹਨ ਲਈ ਹੈ; Pro ’ਤੇ ਤੁਸੀਂ React ਕੋਡ ਸਿੱਧਾ ਬਦਲ ਸਕਦੇ ਹੋ ਅਤੇ ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਕਿਤੇ ਹੋਰ ਕੰਮ ਕਰਨ ਲਈ ਐਕਸਪੋਰਟ ਕਰ ਸਕਦੇ ਹੋ।

ਸਵਾਲ