diff --git a/GLOSSARY.MD b/GLOSSARY.MD new file mode 100644 index 000000000..a0dfca87e --- /dev/null +++ b/GLOSSARY.MD @@ -0,0 +1,82 @@ +# Glossary + +Glossary of the translations of technical and React-specific terms. + +## Untranslatable terms +- props (**core concept**) +- state (**core concept**) +- hooks (**core concept**) +- ref (**core concept**) +- footer +- bug +- browser +- client/client-side +- server +- array +- alert +- record +- true +- false +- tag +- lifecycle +- callback +- console +- warning +- form/forms +- render props +- strict mode +- web components +- build steps +- wrapper +- provider +- consumer +- reducer +- deploy +- template strings +- extensions + +# Common Translations + +Suggestion on words and terms: + +| Original word/term | Suggestion | +| ------------------ | ---------- | +| variable | ndryshore ref. Fjalori Cano-Tupja +| string | germëvarg | ref. Fjalori Cano-Tupja | +| domain | domen ref. Fjalori Cano-Tupja | Përkthimi i duhur duhet të jetë i +njëjtë me atë në kontekstin e matematikës, pra domen +| initialization | vlerënisja ref. Fjalori Cano-Tupja +| update | përditësoj (folje), përditësim (emer) +| render | gjeneron ?! (folje), gjenerim?! (emer) | +| refactor | refaktor | +| refactoring | rifaktorim | +| feature | tipar, cilësi +| React component class | klasa e komponentit React | +| React component type | lloji i komponentit React | +| function component | komponent funksioni | +| error boundary | kontejner i erroreve ?! | +| native(ly) | prej vetiu?! + + + +## Problematic terms + +Here's a list of terms that require discussion/agreement, with a link to the issue. + +If you encounter one of those expressions for the first time, it might be worth checking the issue to find out what's the current quorum around how we should handle a consistent translation across the whole website. + + +- `to render` (([#44]https://github.com/reactjs/sq.reactjs.org/issues/44)) +- `refactor` (([#44]https://github.com/reactjs/sq.reactjs.org/issues/44)) +- `event* handler` (([#44]https://github.com/reactjs/sq.reactjs.org/issues/44)) +- `event* listener` (([#44]https://github.com/reactjs/sq.reactjs.org/issues/44)) +- `mount` and `unmount` (([#44]https://github.com/reactjs/sq.reactjs.org/issues/44)) + +*event sipas fjalorit "Terminologji Informatike" nga Erion Cano dhe Edmond Tupja: + +event [i’vent] em. sh.t. është fjala për një ngjarje që ndryshon apo përcakton +ecurinë e një procesi apo dukurie. Në ligjërimin e përgjithshëm ka kuptimin e +aktivitetit ndërsa në atë teknik mbartet mjaft mirë nga fjala ngjarje, siç ndeshet +te [31] f. 56, te [19] f. 99, te [20] f. 40 etj. Duhet shmangur pra fjala event, e cila +ndeshet shpesh në gjuhën e folur. Shembuj: unexpected event ngjarje e papritur, +system failure event ngjarje e dështimit të sistemit diff --git a/README.md b/README.md index 6387cdac4..74eba1d2f 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,11 @@ This repo contains the source code and documentation powering [reactjs.org](https://reactjs.org/). +## Before we start, some useful links: + +- [Glossary](GLOSSARY.md) +- [Style Guide](STYLE_GUIDE.md) + ## Getting started ### Prerequisites diff --git a/STYLE_GUIDE.MD b/STYLE_GUIDE.MD new file mode 100644 index 000000000..9a26f7831 --- /dev/null +++ b/STYLE_GUIDE.MD @@ -0,0 +1,108 @@ +# Udhezues i pergjithshem per stilin + +> This Style Guide is based on the [Universal Style Guide](https://github.com/reactjs/reactjs.org-translation/blob/master/style-guide.md) +> +> Ky udhezues per stilin eshte i bazuar ne [Universal Style Guide](https://github.com/reactjs/reactjs.org-translation/blob/master/style-guide.md) + +Ky udhëzues per stilin përshkruan rregullat që duhet të zbatohen për **të gjitha** gjuhët. + +## Fjalorth + +Shiko [ketu](https://github.com/reactjs/sq.reactjs.org/blob/master/GLOSSARY.md) + +## ID-ja e titujve (Headers) + +Te gjithe titujt kane ID specifike, si per shembull: + +```md +## Try React {#try-react} +``` + +**Mos** i perktheni keto ID! Ato perdoren per navigim dhe rrezikojne te mos funksionojne me. + +Per shembull, duke pasur kete link: + +```md +See the [beginning section](/getting-started#try-react) for more information. +``` + +✅ Keshtu eshte NE RREGULL ✅: + +```md +## Provo React {#try-react} +``` + +❌ Keshtu eshte GABIM! ❌: + +```md +## Provo React {#provo-react} +``` + +Me shembullin e dyte, linku pak me larte nuk do te funksionoj me. + +## Teksti ne blloqet e kodit + +Mos perkthe kurre tekstin ne blloqet e kodit, pervec komenteve. Mund te kesh nevoje mbase per te perkthyer dhe tekstin e strings, por ki kujdes te MOS perkthesh strings qe jane referenca per kodin. + +Per shembull: +```js +// Shembull +const element =

Hello, world

; +ReactDOM.render(element, document.getElementById('root')); +``` + +✅ Keshtu eshte NE RREGULL ✅: + +```js +// Shembull +const element =

Hello, world!

; +ReactDOM.render(element, document.getElementById('root')); +``` + +✅ EDHE keshtu eshte NE RREGULL ✅: + +```js +// Shembull +const element =

Pershendes te gjithe boten!

; +ReactDOM.render(element, document.getElementById('root')); +``` + +❌ Keshtu eshte GABIM! ❌: + +```js +// Shembull +const element =

Pershendes te gjithe boten!

; +// "root" i referohet ID-se se nje elementi +// MOS E PERKTHE! +ReactDOM.render(element, document.getElementById('rrenja')); +``` + +❌ KJO AKOMA EDHE ME GABIM!! ❌: + +```js +// Shembull +// ABSOLUTISHT JO! +const elementi =

Pershendes te gjithe boten!

; +ReactDOM.gjenero(elementi, dokument.merrElementinNgaId('rrenja')); +``` + +## Linqe te jashtme + +Nese nje link i jashtem riadreson ne nje artikull reference si [MDN] ose [Wikipedia], dhe ekziston nje version i atij artikulli ne gjuhen shqipe, i nje cilesi te mire, mund ta vleresosh te link-osh versionin e perkthyer ne gjuhen shqipe, ne vend te artikullit origjinal. + +[MDN]: https://developer.mozilla.org/en-US/ +[Wikipedia]: https://en.wikipedia.org/wiki/Main_Page + +Shembull: + +```md +React Native is an open-source UI software framework (https://en.wikipedia.org/wiki/React_Native). +``` + +✅ Keshtu eshte NE RREGULL ✅: + +```md +React Native eshte nje kornize e aplikacioneve mobile (https://sq.wikipedia.org/wiki/React_Native). +``` + +Per linqet per te cilat nuk ekziston nje version i perkthyer (StackOverflow, Youtube, etj...) perdorni thjesht linkun ne anglisht. diff --git a/beta/src/components/Layout/Feedback.tsx b/beta/src/components/Layout/Feedback.tsx index acba8c813..b00f7e163 100644 --- a/beta/src/components/Layout/Feedback.tsx +++ b/beta/src/components/Layout/Feedback.tsx @@ -62,7 +62,7 @@ function SendFeedback({onSubmit}: {onSubmit: () => void}) { return (

- {isSubmitted ? 'Thank you for your feedback!' : 'Is this page useful?'} + {isSubmitted ? 'Faleminderit për komentin tuaj!' : 'A ju ndihmon kjo?'}

{!isSubmitted && (

- React Docs + Dokumentacioni i React

Beta @@ -22,18 +22,18 @@ function HomepageHero() {
- +

- Learn how to think in React with step-by-step explanations and - interactive examples. + Mësoni se si të mendoni si React me shpjegime hap pas hapi dhe + shembuj ndërveprues.

- +

- Look up the API signatures of React Hooks, and see their shape - using the visual code diagrams. + Kërkoni nënshkrimet API të React Hooks dhe shikoni formën e tyre + duke përdorur diagramet e kodit vizual.

diff --git a/beta/src/components/MDX/MDXComponents.tsx b/beta/src/components/MDX/MDXComponents.tsx index 7b4f9d49c..458ad0f29 100644 --- a/beta/src/components/MDX/MDXComponents.tsx +++ b/beta/src/components/MDX/MDXComponents.tsx @@ -152,7 +152,7 @@ function YouWillLearn({ children: any; isChapter?: boolean; }) { - let title = isChapter ? 'In this chapter' : 'You will learn'; + let title = isChapter ? 'Në këtë kapitull' : 'Do të mësoni'; return {children}; } diff --git a/beta/src/components/MDX/YouWillLearnCard.tsx b/beta/src/components/MDX/YouWillLearnCard.tsx index 839876029..daa5119ab 100644 --- a/beta/src/components/MDX/YouWillLearnCard.tsx +++ b/beta/src/components/MDX/YouWillLearnCard.tsx @@ -28,7 +28,7 @@ function YouWillLearnCard({title, path, children}: YouWillLearnCardProps) { type="primary" size="md" label={title}> - Read More + Lexo më shumë
diff --git a/beta/src/components/SocialBanner.tsx b/beta/src/components/SocialBanner.tsx index 19b3480ec..ed0ba0193 100644 --- a/beta/src/components/SocialBanner.tsx +++ b/beta/src/components/SocialBanner.tsx @@ -8,9 +8,9 @@ import {ExternalLink} from './ExternalLink'; // TODO: Unify with the old site settings. // Turning this off also requires changing the Page top value to pull up the sidebar. -const bannerText = 'Support Ukraine 🇺🇦'; +const bannerText = 'Përkrahni Ukrainën 🇺🇦'; const bannerLink = 'https://opensource.fb.com/support-ukraine'; -const bannerLinkText = 'Help Provide Humanitarian Aid to Ukraine.'; +const bannerLinkText = 'Ndihmoni në ofrimin e ndihmës humanitare për Ukrainën.'; export default function SocialBanner() { return ( diff --git a/beta/src/pages/community/index.md b/beta/src/pages/community/index.md index d9e992d2a..09cf17694 100644 --- a/beta/src/pages/community/index.md +++ b/beta/src/pages/community/index.md @@ -1,20 +1,20 @@ --- -title: Community +title: Komuniteti --- -React has a community of millions of developers. On this page we've listed some React-related communities that you can be a part of; see the other pages in this section for additional online and in-person learning materials. +React ka një komunitet prej miliona zhvilluesish. Në këtë faqe ne kemi renditur disa komunitete të lidhura me React në të cilat mund të jeni pjesë; shikoni faqet e tjera në këtë seksion për materiale mësimore shtesë. -## Code of Conduct {/*code-of-conduct*/} +## Kodi i Sjelljes {/*code-of-conduct*/} -Before participating in React's communities, [please read our Code of Conduct](https://github.com/facebook/react/blob/main/CODE_OF_CONDUCT.md). We have adopted the [Contributor Covenant](https://www.contributor-covenant.org/) and we expect that all community members adhere to the guidelines within. +Përpara se të merrni pjesë në komunitetet e React, [ju lutemi lexoni kodin tonë të sjelljes](https://github.com/facebook/react/blob/main/CODE_OF_CONDUCT.md). Ne kemi miratuar [Contributor Covenant](https://www.contributor-covenant.org/) dhe presim që të gjithë anëtarët e komunitetit t'u përmbahen udhëzimeve që ka aty. ## Stack Overflow {/*stack-overflow*/} -Stack Overflow is a popular forum to ask code-level questions or if you're stuck with a specific error. Read through the [existing questions](https://stackoverflow.com/questions/tagged/reactjs) tagged with **reactjs** or [ask your own](https://stackoverflow.com/questions/ask?tags=reactjs)! +Stack Overflow është një forum popullor për të bërë pyetje rreth programimit dhe mund të merrni ndihmë nëse keni ngecur me një gabim specifik. Lexoni [pyetjet ekzistuese](https://stackoverflow.com/questions/tagged/reactjs) etiketuar me **reactjs** ose [bëni pyetjen tuajën](https://stackoverflow.com/questions/ask?tags=reactjs)! -## News {/*news*/} +## Lajme {/*news*/} -For the latest news about React, [follow **@reactjs** on Twitter](https://twitter.com/reactjs) and the [official React blog](/blog/) on this website. +Për të rejat më të fundit rreth React, [ndiqni **@reactjs** në Twitter](https://twitter.com/reactjs) dhe [blog-un zyrtar të React](/blog/) në këtë *website*. diff --git a/beta/src/pages/index.md b/beta/src/pages/index.md index b5191368b..5493e6f1a 100644 --- a/beta/src/pages/index.md +++ b/beta/src/pages/index.md @@ -6,31 +6,31 @@ permalink: index.html -## What is this site? {/*what-is-this-site*/} +## Çfarë është kjo faqe? {/*what-is-this-site*/} -We are rewriting the React documentation with a few differences: +Ne po rishkruajmë dokumentacionin React me disa ndryshime: -- All explanations are **written using Hooks** rather than classes. -- We've added **interactive examples** and visual diagrams. -- Guides include **challenges (with solutions!)** to check your understanding. +- Të gjitha shpjegimet **janë shkruar duke përdorur Hooks** në vend të klasave. +- Ne kemi shtuar **shembuj ndërveprues** dhe diagrame vizuale. +- Udhëzuesit përfshijnë **sfida (me zgjidhje!)** për të kontrolluar të kuptuarit tuaj. -This beta website contains the current draft of the new docs. +Ky *website* beta përmban draftin aktual të dokumenteve të reja. -## This is a work in progress! {/*this-is-a-work-in-progress*/} +## Kjo është një punë në vazhdim e sipër! {/*this-is-a-work-in-progress*/} -This is a **beta website**. There will be bugs, performance issues, and missing content. +Ky është një *website* **beta**. Do të ketë *bugs* (defekte), probleme të performancës dhe përmbajtje që mungon. -## How much content is ready? {/*how-much-content-is-ready*/} +## Sa përmbajtje është gati? {/*how-much-content-is-ready*/} -* [Learn React](/learn): ~70% finished. -* [API Reference](/apis): ~20% finished. +* [Mësoni React](/learn): ~70% e përfunduar. +* [Referenca API](/apis): ~20% e përfunduar. -You can track our progress [on GitHub](https://github.com/reactjs/reactjs.org/issues/3308). +Ju mund të gjurmoni përparimin tonë [në GitHub](https://github.com/reactjs/reactjs.org/issues/3308). -## How can I provide feedback? {/*how-can-i-provide-feedback*/} +## Si mund të jap *feedback*? {/*how-can-i-provide-feedback*/} -Please use [this GitHub issue](https://github.com/reactjs/reactjs.org/issues/3308) or [this anonymous form](https://www.surveymonkey.co.uk/r/Y6GH986) for high-level feedback. If you spot something that doesn't make sense, please tell us! Additionally, each page has thumbs up/down buttons in the corner. +Ju lutemi përdorni [këtë GitHub issue](https://github.com/reactjs/reactjs.org/issues/3308) ose [këtë sondazh anonim](https://www.surveymonkey.co.uk/r/Y6GH986) për *feedback* të prioritet të lartë. Nëse vëreni diçka që nuk ka kuptim, ju lutemi na tregoni! Për më tepër, çdo faqe ka butonat e *pëlqej/nuk pëlqej* në cepin poshtë majtas. ku thotë *A ju ndihmon kjo?* -## Will this site replace the main site? {/*will-this-site-replace-the-main-site*/} +## A do të zëvendësojë ky *website*-in kryesor? {/*will-this-site-replace-the-main-site*/} -We aim to switch this site to be the main one once we reach content parity with the [existing React documentation](https://reactjs.org/). The old React website will be archived at a subdomain so you'll still be able to access it. Old content links will redirect to the archived subdomain, which will have a notice about outdated content. +Ne synojmë ta kthejmë këtë *website* në kryesorin, pasi të arrijmë një barazi në përmbajtje me [dokumentacionin ekzistues të React](https://reactjs.org/). *Website*-i i vjetër i React do të arkivohet në një nëndomen, kështu që ju do të jeni ende në gjendje ta përdorni atë. Lidhjet e përmbajtjes së vjetër do të ridrejtohen në nëndomenin e arkivuar, i cili do të ketë një njoftim për përmbajtjen e vjetëruar. diff --git a/beta/src/pages/learn/add-react-to-a-website.md b/beta/src/pages/learn/add-react-to-a-website.md index 129b31e2c..c7f88ca6d 100644 --- a/beta/src/pages/learn/add-react-to-a-website.md +++ b/beta/src/pages/learn/add-react-to-a-website.md @@ -1,55 +1,54 @@ --- -title: Add React to a Website +title: Shto React në një website --- -You don't have to build your whole website with React. Adding React to HTML doesn't require installation, takes a minute, and lets you start writing interactive components right away. +Ju nuk keni pse të ndërtoni të gjithë website-in me React. Shtimi i React në HTML nuk kërkon instalim, zgjat një minutë dhe ju lejon të filloni menjëherë të shkruani komponentë ndërveprues. -* How to add React to an HTML page in one minute -* What is the JSX syntax and how to quickly try it -* How to set up a JSX preprocessor for production +* Si të shtoni React në një faqe HTML në një minutë +* Çfarë është sintaksa JSX dhe si ta provoni menjëherë +* Si të konfiguroni një preprocesor JSX për prodhim -## Add React in one minute {/*add-react-in-one-minute*/} +## Shto React në një minutë {/*add-react-in-one-minute*/} -React has been designed from the start for gradual adoption. Most websites aren't (and don't need to be) fully built with React. This guide shows how to add some “sprinkles of interactivity” to an existing HTML page. +React është projektuar që në fillim për adoptim gradual. Shumica e faqeve të internetit nuk janë (dhe nuk kanë nevojë të jenë) plotësisht të ndërtuara me React. Ky udhëzues tregon se si të shtoni pak interaktivitet në një faqe ekzistuese HTML. -Try this out with your own website or [an empty HTML file](https://gist.github.com/gaearon/edf814aeee85062bc9b9830aeaf27b88/archive/3b31c3cdcea7dfcfd38a81905a0052dd8e5f71ec.zip). All you need is an internet connection and a text editor like Notepad or VSCode. (Here's [how to configure your editor](/learn/editor-setup/) for syntax highlighting!) +Provojeni këtë me faqen tuaj të internetit ose me një [skedar bosh HTML](https://gist.github.com/gaearon/edf814aeee85062bc9b9830aeaf27b88/archive/3b31c3cdcea7dfcfd38a81905a0052dd8e5f71ec.zip). Gjithçka që ju nevojitet është një lidhje interneti dhe një redaktues teksti si Notepad ose VSCode. (Ja se si të [konfiguroni redaktorin tuaj për theksimin e sintaksës!](/learn/editor-setup/) for syntax highlighting!) -### Step 1: Add a root HTML tag {/*step-1-add-a-root-html-tag*/} - -First, open the HTML page you want to edit. Add an empty `
` tag to mark the spot where you want to display something with React. Give this `
` a unique `id` attribute value. For example: +### Hapi 1: Shtoni një etiketë HTML root (rrënjë) {/*step-1-add-a-root-html-tag*/} +Së pari, hapni faqen HTML që dëshironi të redaktoni.Shtoni një etiketë bosh `
` për të shënuar vendin ku dëshironi të shfaqni diçka me React. Jepini këtij `
` një `id` me vlerë të atributit unike . Për shembull: ```html {3} - +
- + ``` -It's called a "root" because it's where the React tree will start. You can place a root HTML tag like this anywhere inside the `` tag. Leave it empty because React will replace its contents with your React component. +Quhet "root" (rrënjë) sepse aty do të fillojë React tree (pema e React). Ju mund të vendosni një etiketë HTML root si kjo, kudo brenda etiketës ``. Lëreni bosh sepse React do të zëvendësojë përmbajtjen e tij me komponentin tuaj React. -You may have as many root HTML tags as you need on one page. +Mund të keni aq etiketa HTML rrënjë sa ju nevojiten në një faqe. -### Step 2: Add the script tags {/*step-2-add-the-script-tags*/} +### Hapi 2: Shtoni etiketat e skriptit {/*step-2-add-the-script-tags*/} -In the HTML page, right before the closing `` tag, add three ` @@ -59,13 +58,13 @@ Your HTML should now end like this: -Before deploying to a live website, make sure to replace `development.js` with `production.min.js`! Development builds of React provide more helpful error messages, but slow down your website *a lot.* +Përpara se të bëni *deploy* në një website *live*, sigurohuni që të zëvendësoni `development.js` me `production.min.js`! *Development build* të React japin mesazhe error më ndihmuese, por ngadalësojnë **goxha** website-in tuaj. -### Step 3: Create a React component {/*step-3-create-a-react-component*/} +### Hapi 3: Krijoni një komponent React {/*step-3-create-a-react-component*/} -Create a file called **`like-button.js`** next to your HTML page, add this code snippet, and save the file. This code defines a React component called `LikeButton`. (Learn more about making components in the [Quick Start!](/learn)) +Krijoni një skedar të quajtur **`like-button.js`** pranë faqes tuaj HTML, shtoni këtë copë kodi dhe ruajeni skedarin. Ky kod përcakton një komponent React të quajtur LikeButton. (Mësoni më shumë rreth krijimit të komponentëve në [Nisje e shpejtë!](/learn)) ```js 'use strict'; @@ -87,9 +86,9 @@ function LikeButton() { } ``` -### Step 4: Add your React component to the page {/*step-4-add-your-react-component-to-the-page*/} +### Hapi 4: Shtoni komponentin tuaj React në faqe {/*step-4-add-your-react-component-to-the-page*/} -Lastly, add three lines to the bottom of **`like-button.js`**. These lines of code find the `
` you added to the HTML in the first step, create a React root, and then display the "Like" button React component inside of it: +Së fundmi, shtoni tre rreshta në fund të **`like-button.js`**. Këto rreshta kodi gjejnë `
` që keni shtuar në HTML në hapin e parë, krijojnë një React root, dhe më pas shfaqin butonin "Like" komponent React brenda tij: ```js const rootNode = document.getElementById('like-button-root'); @@ -97,17 +96,17 @@ const root = ReactDOM.createRoot(rootNode); root.render(React.createElement(LikeButton)); ``` -**Congratulations! You have just rendered your first React component to your website!** +**Urime! Sapo keni bërë *render* komponentin tuaj të parë React në website-in tuaj!** -- [View the full example source code](https://gist.github.com/gaearon/0b535239e7f39c524f9c7dc77c44f09e) -- [Download the full example (2KB zipped)](https://gist.github.com/gaearon/0b535239e7f39c524f9c7dc77c44f09e/archive/651935b26a48ac68b2de032d874526f2d0896848.zip) +- [Shikoni shembullin e plotë të kodit](https://gist.github.com/gaearon/0b535239e7f39c524f9c7dc77c44f09e) +- [Shkarkoni shembullin e plotë (2KB zipped)](https://gist.github.com/gaearon/0b535239e7f39c524f9c7dc77c44f09e/archive/651935b26a48ac68b2de032d874526f2d0896848.zip) -#### You can reuse components! {/*you-can-reuse-components*/} +#### Ju mund të ripërdorni komponentët! {/*you-can-reuse-components*/} -You might want to display React components in multiple places on the same HTML page. This is useful if React-powered parts of your page are separate from each other. You can do this by putting multiple root tags in your HTML and then rendering React components inside each of them with `ReactDOM.createRoot()`. For example: +Ju mund të doni të shfaqni komponentët React në shumë vende në të njëjtën faqe HTML. Kjo është e dobishme nëse pjesët në faqen tuaj që janë me React, janë të ndara nga njëra-tjetra. Ju mund ta bëni këtë duke vendosur etiketa të shumta root në HTML-në tuaj dhe më pas duke bërë render komponentët React brenda secilit prej tyre me `ReactDOM.createRoot()`. Për shembull: -1. In **`index.html`**, add an additional container element `
`. -2. In **`like-button.js`**, add three more lines at the end: +1. Në **`index.html`**, shtoni një element *container* shtesë `
`. +2. Në **`like-button.js`**, shtoni tre rreshta të tjerë në fund: ```js {6,7,8,9} const anotherRootNode = document.getElementById('another-root'); @@ -115,41 +114,41 @@ const anotherRoot = ReactDOM.createRoot(anotherRootNode); anotherRoot.render(React.createElement(LikeButton)); ``` -If you need to render the same component in many places, you can assign a CSS `class` instead of `id` to each root, and then find them all. Here is [an example that displays three "Like" buttons and passes data to each.](https://gist.github.com/gaearon/779b12e05ffd5f51ffadd50b7ded5bc8) +Nëse ju duhet të bëni *render* të njëjtin komponent në shumë vende, mund të caktoni një CSS *class* (klasë) në vend të id-së për secilën *root*, dhe më pas t'i gjeni të gjitha. Këtu është [një shembull që shfaq tre butona "Like" dhe i kalon të dhënat secilit.](https://gist.github.com/gaearon/779b12e05ffd5f51ffadd50b7ded5bc8) -### Step 5: Minify JavaScript for production {/*step-5-minify-javascript-for-production*/} +### Hapi 5: *Minify* JavaScript për prodhim {/*step-5-minify-javascript-for-production*/} -Unminified JavaScript can significantly slow down page load times for your users. Before deploying your website to production, it's a good idea to minify its scripts. +JavaScript jo në version *minify* (e minimizuar) mund të ngadalësojë ndjeshëm kohën e ngarkimit të faqeve për përdoruesit tuaj. Përpara se të bëni *deploy* në prodhim website-in tuaj, është një ide e mirë të bëni *minify* (minimizoni) skriptet e saj. -- **If you don't have a minification step** for your scripts, [here's one way to set it up](https://gist.github.com/gaearon/42a2ffa41b8319948f9be4076286e1f3). -- **If you already minify** your application scripts, your site will be production-ready if you ensure that the deployed HTML loads the versions of React ending in `production.min.js` like so: +- **Nëse nuk keni marrë një hap t'i bëni *minify*** skriptet tuaja, [këtu është një mënyrë për ta konfiguruar](https://gist.github.com/gaearon/42a2ffa41b8319948f9be4076286e1f3). +- Nëse i keni bërë *minify* tashmë skriptet e aplikacionit tuaj, faqja juaj do të jetë gati për prodhim nëse siguroheni që HTML-ja në prodhim ngarkon versionet e React që përfundojnë me production.min.js si ky *script*: ```html ``` -## Try React with JSX {/*try-react-with-jsx*/} +## Provoni React me JSX {/*try-react-with-jsx*/} -The examples above rely on features that are natively supported by browsers. This is why **`like-button.js`** uses a JavaScript function call to tell React what to display: +Shembujt e mësipërm varen nga veçori që mbështeten nga *browsers* prej vetiu. Kjo është arsyeja pse **`like-button.js`** përdor një *function call* (thirrje funksioni) JavaScript për t'i treguar React se çfarë të shfaqë: ```js return React.createElement('button', {onClick: () => setLiked(true)}, 'Like'); ``` -However, React also offers an option to use [JSX](/learn/writing-markup-with-jsx), an HTML-like JavaScript syntax, instead: +Sidoqoftë, React ofron gjithashtu një opsion për të përdorur [JSX](/learn/writing-markup-with-jsx), një sintaksë JavaScript si HTML, në vend të kësaj: ```jsx return ; ``` -These two code snippets are equivalent. JSX is popular syntax for describing markup in JavaScript. Many people find it familiar and helpful for writing UI code--both with React and with other libraries. +Këto dy copëza kodi janë ekuivalente. JSX është një sintaksë e njohur për të përshkruar *markup*-in në JavaScript. Shumë personave i duket familjar dhe i dobishëm për të shkruar kod për UI—si me React ashtu dhe me librarit e tjera. -> You can play with transforming HTML markup into JSX using [this online converter](https://babeljs.io/en/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=DwIwrgLhD2B2AEcDCAbAlgYwNYF4DeAFAJTw4B88EAFmgM4B0tAphAMoQCGETBe86WJgBMAXJQBOYJvAC-RGWQBQ8FfAAyaQYuAB6cFDhkgA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2&prettier=false&targets=&version=7.17). +> Ju mund të luani me transformimin e HTML *markup* në JSX duke përdorur [këtë konvertues online.](https://babeljs.io/en/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=DwIwrgLhD2B2AEcDCAbAlgYwNYF4DeAFAJTw4B88EAFmgM4B0tAphAMoQCGETBe86WJgBMAXJQBOYJvAC-RGWQBQ8FfAAyaQYuAB6cFDhkgA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2&prettier=false&targets=&version=7.17). -### Try JSX {/*try-jsx*/} +### Provo JSX {/*try-jsx*/} -The quickest way to try JSX is to add the Babel compiler as a ` @@ -159,7 +158,7 @@ The quickest way to try JSX is to add the Babel compiler as a ` ``` -Reload your website in the browser now to view it in developer tools. +Ringarkoni faqen në *browser* për ta parë në *developer tools*. ![React Developer Tools standalone](/images/docs/react-devtools-standalone.png) ## Mobile (React Native) {/*mobile-react-native*/} -React Developer Tools can be used to inspect apps built with [React Native](https://reactnative.dev/) as well. +React *Developer Tools* mund të përdoren gjithashtu për të inspektuar aplikacionet e ndërtuara me [React Native](https://reactnative.dev/). -The easiest way to use React Developer Tools is to install it globally: +Mënyra më e lehtë për të përdorur React *Developer Tools* është ta instaloni atë globalisht: ```bash # Yarn yarn global add react-devtools @@ -64,13 +64,13 @@ yarn global add react-devtools npm install -g react-devtools ``` -Next open the developer tools from the terminal. +Më pas hapni *developer tools* nga terminali. ```bash react-devtools ``` -It should connect to any local React Native app that's running. +Duhet të lidhet me çdo aplikacion React Native që po funksionon në nivel lokal. -> Try reloading the app if developer tools doesn't connect after a few seconds. +> Provoni të ringarkoni aplikacionin nëse *Developer Tools* nuk lidhen pas disa sekondash. -[Learn more about debugging React Native.](https://reactnative.dev/docs/debugging) +[Mësoni më shumë rreth të bërit *debug* React Native.](https://reactnative.dev/docs/debugging) diff --git a/beta/src/pages/learn/start-a-new-react-project.md b/beta/src/pages/learn/start-a-new-react-project.md index 35819e158..daac5ae19 100644 --- a/beta/src/pages/learn/start-a-new-react-project.md +++ b/beta/src/pages/learn/start-a-new-react-project.md @@ -1,35 +1,41 @@ --- -title: Start a New React Project +title: Filloni një projekt të ri me React --- -If you're starting a new project, we recommend to use a toolchain or a framework. These tools provide a comfortable development environment but require a local Node.js installation. +Nëse po filloni një projekt të ri, ju rekomandojmë të përdorni një *toolchain* ose një *framework*. Këto mjete ofrojnë një mjedis të rehatshëm zhvillimi, por kërkojnë një instalim në nivel lokal të Node.js. + +*Toolchain* është një grup mjetesh për zhvillimin e softuerit të përdorur në kombinim me njëri-tjetrin për të përfunduar detyra komplekse të zhvillimit të softuerit. +*Framework* në programim është një mjet që ofron komponentë të gatshëm ose zgjidhje që janë të personalizuara për të përshpejtuar zhvillimin. + -* How toolchains are different from frameworks -* How to start a project with a minimal toolchain -* How to start a project with a fully-featured framework -* What's inside popular toolchains and frameworks +* Si ndryshojnë toolchains nga frameworks +* Si të filloni një projekt me toolchain minimal +* Si të filloni një projekt me një framework me funksione të plota +* Çfarë ka në brendi të toolchain-ëve dhe framework-ëve më të njohur -## Choose your own adventure {/*choose-your-own-adventure*/} +## Zgjidhni vetë aventurën tuaj {/*choose-your-own-adventure*/} + +React është një librari që ju lejon të organizoni kodin UI (ndërfaqja e përdoruesit) duke e ndarë atë në pjesë të quajtura komponentë. React nuk kujdeset për routing (rrugëzim) ose menaxhimin e të dhënave. Kjo do të thotë se ka disa mënyra për të nisur një projekt të ri me React: -React is a library that lets you organize UI code by breaking it apart into pieces called components. React doesn't take care of routing or data management. This means there are several ways to start a new React project: +* [Filloni me një **skedar HTML dhe një etiketë skripti **.](/learn/add-react-to-a-website) Kjo nuk kërkon konfigurimin e Node.js, por ofron veçori të kufizuara. +* Filloni me një **toolchain minimal,** duke shtuar më shumë veçori në projektin tuaj me kalimin e kohës. (E shkëlqyeshme për të mësuar!) +* Filloni me një *opinionated framework* që ka veçori të zakonshme si fetching e të dhënave (marrja e të dhënave) dhe built-in routing (rrugëzim të pre-integruar/instaluar). -* [Start with an **HTML file and a script tag**.](/learn/add-react-to-a-website) This doesn't require Node.js setup but offers limited features. -* Start with a **minimal toolchain,** adding more features to your project as you go. (Great for learning!) -* Start with an **opinionated framework** that has common features like data fetching and routing built-in. +*Opinionated Framework* është një framework i ndërtuar që t'i bëj gjërat në një mënyrë të caktuar (mënyra e duhur). Ndaj epiteti opinionated = "kokëfortë". -## Getting started with a minimal toolchain {/*getting-started-with-a-minimal-toolchain*/} +## Të fillosh me një *toolchain* minimal {/*getting-started-with-a-minimal-toolchain*/} -If you're **learning React,** we recommend [Create React App](https://create-react-app.dev/). It is the most popular way to try out React and build a new single-page, client-side application. It's made for React but isn't opinionated about routing or data fetching. +Nëse po mësoni React, ne ju rekomandojmë [Create React App](https://create-react-app.dev/). Është mënyra më e zakonshme për të provuar React dhe për të ndërtuar një aplikacion *single-page client-side* (një-faqëshe në anën e klientit). Është krijuar për React, por nuk është *opinionated* për *routing* ose *fetching* të të dhënave. -First, install [Node.js](https://nodejs.org/en/). Then open your terminal and run this line to create a project: +Së pari, instaloni [Node.js](https://nodejs.org/en/). Pastaj hapni terminalin dhe ekzekutoni këtë rresht kodi për të krijuar një projekt: @@ -37,7 +43,7 @@ npx create-react-app my-app -Now you can run your app with: +Tani mund ta ekzekutoni aplikacionin tuaj me: @@ -46,38 +52,38 @@ npm start -For more information, [check out the official guide](https://create-react-app.dev/docs/getting-started). +Për më shumë informacion, [shikoni udhëzuesin zyrtar](https://create-react-app.dev/docs/getting-started). -> Create React App doesn't handle backend logic or databases. You can use it with any backend. When you build a project, you'll get a folder with static HTML, CSS and JS. Because Create React App can't take advantage of the server, it doesn't provide the best performance. If you're looking for faster loading times and built-in features like routing and server-side logic, we recommend using a framework instead. +> Create React App nuk menaxhon llogjiken e backend apo të databazës. Mund ta përdorni me çdo backend. Kur të ndërtoni një projekt, do të keni një dosje me HTML statike, CSS dhe JS. Për shkak se Create React App nuk mund të ketë avantazhet e një serveri, ai nuk ofron performancën më të mirë. Nëse jeni duke kërkuar për kohë më të shpejta ngarkimi (*loading*) dhe veçori të integruara *routing* dhe llogjikën *server-side* (të serverit), ju rekomandojmë të përdorni një *framework*. -### Popular alternatives {/*popular-alternatives*/} +### Alternativa të përhapura {/*popular-alternatives*/} * [Vite](https://vitejs.dev/guide/) * [Parcel](https://parceljs.org/) -## Building with a full-featured framework {/*building-with-a-full-featured-framework*/} +## Të ndërtosh me frameworks me funksione të plota {/*building-with-a-full-featured-framework*/} -If you're looking to **start a production-ready project,** [Next.js](https://nextjs.org/) is a great place to start. Next.js is a popular, lightweight framework for static and server‑rendered applications built with React. It comes pre-packaged with features like routing, styling, and server-side rendering, getting your project up and running quickly. +Nëse po kërkoni të **filloni një projekt të gatshëm për prodhim,** [Next.js](https://nextjs.org/) ja vlen të konsiderohet. Next.js është një framework goxha i njohur, dhe i lehtë, për aplikacionet e ndërtuara me React, që janë statike dhe *server-rendered* (gjeneruara në server). Ai vjen i para-paketuar me veçori të tilla si *routing*, *styling* (stilim), dhe *server-side rendering*, duke e bërë funksional projektin tuaj kollaj dhe shpejt. -The [Next.js Foundations](https://nextjs.org/learn/foundations/about-nextjs) tutorial is a great introduction to building with React and Next.js. +Tutoriali i [Next.js Foundations](https://nextjs.org/learn/foundations/about-nextjs) është një udhëzues i mirë si fillim, për kë do të ndërtoj me React dhe Next.js. -### Popular alternatives {/*popular-alternatives*/} +### Alternativat më të përhapura {/*popular-alternatives*/} * [Gatsby](https://www.gatsbyjs.org/) * [Remix](https://remix.run/) * [Razzle](https://razzlejs.org/) -## Custom toolchains {/*custom-toolchains*/} +## Toolchains të personalizuara {/*custom-toolchains*/} -You may prefer to create and configure your own toolchain. A toolchain typically consists of: +Ju mund të preferoni të krijoni dhe konfiguroni *toolchain*-in tuaj. Një *toolchain* zakonisht përbëhet nga: -* A **package manager** lets you install, update, and manage third-party packages. Popular package managers: [npm](https://www.npmjs.com/) (built into Node.js), [Yarn](https://yarnpkg.com/), [pnpm](https://pnpm.io/). -* A **compiler** lets you compile modern language features and additional syntax like JSX or type annotations for the browsers. Popular compilers: [Babel](https://babeljs.io/), [TypeScript](https://www.typescriptlang.org/), [swc](https://swc.rs/). -* A **bundler** lets you write modular code and bundle it together into small packages to optimize load time. Popular bundlers: [webpack](https://webpack.js.org/), [Parcel](https://parceljs.org/), [esbuild](https://esbuild.github.io/), [swc](https://swc.rs/). -* A **minifier** makes your code more compact so that it loads faster. Popular minifiers: [Terser](https://terser.org/), [swc](https://swc.rs/). -* A **server** handles server requests so that you can render components to HTML. Popular servers: [Express](https://expressjs.com/). -* A **linter** checks your code for common mistakes. Popular linters: [ESLint](https://eslint.org/). -* A **test runner** lets you run tests against your code. Popular test runners: [Jest](https://jestjs.io/). +* Një *package manager* (menaxher paketash) ju lejon të instaloni, përditësoni dhe menaxhoni *packages* (paketat) e palëve të treta. Disa *package manager* të njohur janë: [npm](https://www.npmjs.com/) (ndërtuar në Node.js), [Yarn](https://yarnpkg.com/), [pnpm](https://pnpm.io/). +* Një *compiler* (kompilator) ju lejon të bëni *compile* (të kompiloni) veçori të gjuhës moderne, bashkë me sintaksën si puna e JSX, apo *type annotations* (indikues të llojit të të dhënave) për *browser*-in, si: [Babel](https://babeljs.io/), [TypeScript](http://typescript.org/), [swc](https://swc.rs/). +* Një *bundler* ju lejon të shkruani kod modular dhe ta bëni *bundle* atë, pra ta bashkoni atë në paketa të vogla për të optimizuar kohën e ngarkimit (*loading*). Disa *bundlers* të njohur janë: [webpack](https://webpack.js.org/), [Parcel](https://parceljs.org/), [esbuild](https://esbuild.github.io/), [swc](https://swc.rs/). +* Një *minifier* (minifikues) e bën kodin tuaj më kompakt në mënyrë që të ngarkohet më shpejt. Disa *minifier* të njohur janë: [Terser](https://terser.org/), [swc](https://swc.rs/). +* Një *server* trajton *server requests* (kërkesat e server-it) në mënyrë që të bësh *render* (gjenerosh) komponentët në HTML. Një server i njohur është: [Express](https://expressjs.com/). +* Një *linter* kontrollon kodin tuaj për gabime të zakonshme. Një *linter* i njohur është: [ESLint](https://eslint.org/). +* Një *test runner* (testues) ju lejon të kryeni teste për kodin tuaj. Një testues i njohur është: [Jest](https://jestjs.io/). -If you prefer to set up your own JavaScript toolchain from scratch, [check out this guide](https://blog.usejournal.com/creating-a-react-app-from-scratch-f3c693b84658) that re-creates some of the Create React App functionality. A framework will usually also provide a routing and a data fetching solution. In a larger project, you might also want to manage multiple packages in a single repository with a tool like [Nx](https://nx.dev/react) or [Turborepo](https://turborepo.org/). +Nëse preferoni të konfiguroni *toolchain*-in tuaj të JavaScript nga e para, shikoni këtë udhëzues që rikrijon disa nga funksionet e aplikacionit Create React. Një *framework* zakonisht do të sigurojë gjithashtu një *routing* dhe një zgjidhje për *fetching* të të dhënave. Në një projekt më të madh, mund të dëshironi gjithashtu të menaxhoni *packages* të shumta në një *repository* (depo) të vetme me një mjet si [Nx](https://nx.dev/react) or [Turborepo](https://turborepo.org/). diff --git a/beta/src/sidebarHome.json b/beta/src/sidebarHome.json index 21ddd2f7f..76e59c5ca 100644 --- a/beta/src/sidebarHome.json +++ b/beta/src/sidebarHome.json @@ -8,17 +8,17 @@ "path": "", "routes": [ { - "title": "Overview", + "title": "Vështrim i përgjithshëm", "path": "/" }, { - "title": "Community", + "title": "Komuniteti", "path": "/community", "routes": [{ - "title": "Acknowledgements", + "title": "Mirënjohje", "path": "/community/acknowledgements" }, { - "title": "Meet the Team", + "title": "Njihuni me ekipin", "path": "/community/meet-the-team" }] } diff --git a/beta/src/sidebarLearn.json b/beta/src/sidebarLearn.json index 7aed1def3..34f83c86a 100644 --- a/beta/src/sidebarLearn.json +++ b/beta/src/sidebarLearn.json @@ -1,5 +1,5 @@ { - "title": "Learn React", + "title": "Mësoni React", "heading": true, "path": "/learn", "routes": [ @@ -8,19 +8,19 @@ "path": "", "routes": [ { - "title": "Installation", + "title": "Instalimi", "path": "/learn/installation", "routes": [ { - "title": "Start a New React Project", + "title": "Filloni një projekt të ri me React", "path": "/learn/start-a-new-react-project" }, { - "title": "Add React to a Website", + "title": "Shto React në një website", "path": "/learn/add-react-to-a-website" }, { - "title": "Editor Setup", + "title": "Konfigurimi i redaktorit", "path": "/learn/editor-setup" }, { @@ -30,137 +30,137 @@ ] }, { - "title": "Quick Start", + "title": "Përdorim i shpejtë", "path": "/learn", "routes": [{ - "title": "Thinking in React", + "title": "Të mendosh si React", "path": "/learn/thinking-in-react" }] }, { - "title": "Describing the UI", + "title": "Përshkrimi i UI", "tags": [], "path": "/learn/describing-the-ui", "routes": [ { - "title": "Your First Component", + "title": "Komponenti juaj i parë", "path": "/learn/your-first-component" }, { - "title": "Importing and Exporting Components", + "title": "Importimi dhe eksportimi i komponentëve", "path": "/learn/importing-and-exporting-components" }, { - "title": "Writing Markup with JSX", + "title": "Të shkruash Markup me JSX", "path": "/learn/writing-markup-with-jsx" }, { - "title": "JavaScript in JSX with Curly Braces", + "title": "JavaScript në JSX me kllapa gjarpërore", "path": "/learn/javascript-in-jsx-with-curly-braces" }, { - "title": "Passing Props to a Component", + "title": "Kalimi i props tek një komponent", "path": "/learn/passing-props-to-a-component" }, { - "title": "Conditional Rendering", + "title": "Rendering i kushtëzuar", "path": "/learn/conditional-rendering" }, { - "title": "Rendering Lists", + "title": "Rendering i Listave", "path": "/learn/rendering-lists" }, { - "title": "Keeping Components Pure", + "title": "Mbajtja e komponentëve 'pure'", "path": "/learn/keeping-components-pure" } ] }, { - "title": "Adding Interactivity", + "title": "Shtimi i interaktivitetit", "path": "/learn/adding-interactivity", "tags": [], "routes": [ { - "title": "Responding to Events", + "title": "T'i përgjigjesh eventeve", "path": "/learn/responding-to-events" }, { - "title": "State: A Component's Memory", + "title": "State: memoria e komponentit", "path": "/learn/state-a-components-memory" }, { - "title": "Render and Commit", + "title": "Render dhe Commit", "path": "/learn/render-and-commit" }, { - "title": "State as a Snapshot", + "title": "State si snapshot", "path": "/learn/state-as-a-snapshot" }, { - "title": "Queueing a Series of State Updates", + "title": "Queueing një seri të azhornimeve të State", "path": "/learn/queueing-a-series-of-state-updates" }, { - "title": "Updating Objects in State", + "title": "Azhornimi i objekteve në State", "path": "/learn/updating-objects-in-state" }, { - "title": "Updating Arrays in State", + "title": "Azhornimi i array në State", "path": "/learn/updating-arrays-in-state" } ] }, { - "title": "Managing State", + "title": "Menaxhimi i State", "path": "/learn/managing-state", "tags": [ "intermediate" ], "routes": [ { - "title": "Reacting to Input with State", + "title": "Reagimi ndaj Input-it me State", "path": "/learn/reacting-to-input-with-state" }, { - "title": "Choosing the State Structure", + "title": "Zgjedhja e strukturës së State", "path": "/learn/choosing-the-state-structure" }, { - "title": "Sharing State Between Components", + "title": "Shpërnda State midis Komponentëve", "path": "/learn/sharing-state-between-components" }, { - "title": "Preserving and Resetting State", + "title": "Ruajtja dhe rivendosja e State", "path": "/learn/preserving-and-resetting-state" }, { - "title": "Extracting State Logic into a Reducer", + "title": "Nxjerrja e logjikës së State në një Reducer", "path": "/learn/extracting-state-logic-into-a-reducer" }, { - "title": "Passing Data Deeply with Context", + "title": "Kalimi i të dhënave në thellësi me Context", "path": "/learn/passing-data-deeply-with-context" }, { - "title": "Scaling Up with Reducer and Context", + "title": "Scaling Up me Reducer dhe Context", "path": "/learn/scaling-up-with-reducer-and-context" } ] }, { - "title": "Escape Hatches", + "title": "Dalje shpëtimi", "path": "/learn/escape-hatches", "tags": [ "advanced" ], "routes": [ { - "title": "Referencing Values with Refs", + "title": "Referencimi i vlerave me Refs", "path": "/learn/referencing-values-with-refs" }, { - "title": "Manipulating the DOM with Refs", + "title": "Manipulimi i DOM me Refs", "path": "/learn/manipulating-the-dom-with-refs" }, {