Installation section and homepage finished

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

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

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 = <h1>Hello, world</h1>;
+ReactDOM.render(element, document.getElementById('root'));
+```
+
+✅ Keshtu eshte NE RREGULL ✅:
+
+```js
+// Shembull
+const element = <h1>Hello, world!</h1>;
+ReactDOM.render(element, document.getElementById('root'));
+```
+
+✅ EDHE keshtu eshte NE RREGULL ✅:
+
+```js
+// Shembull
+const element = <h1>Pershendes te gjithe boten!</h1>;
+ReactDOM.render(element, document.getElementById('root'));
+```
+
+❌ Keshtu eshte GABIM! ❌:
+
+```js
+// Shembull
+const element = <h1>Pershendes te gjithe boten!</h1>;
+// "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 = <h1>Pershendes te gjithe boten!</h1>;
+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.

beta/src/components/Layout/Feedback.tsx

@@ -62,7 +62,7 @@ function SendFeedback({onSubmit}: {onSubmit: () => void}) {
   return (
     <div className="max-w-xs w-80 lg:w-auto py-3 shadow-lg rounded-lg m-4 bg-wash dark:bg-gray-95 px-4 flex">
       <p className="w-full font-bold text-primary dark:text-primary-dark text-lg">
-        {isSubmitted ? 'Thank you for your feedback!' : 'Is this page useful?'}
+        {isSubmitted ? 'Faleminderit për komentin tuaj!' : 'A ju ndihmon kjo?'}
       </p>
       {!isSubmitted && (
         <button

beta/src/components/Layout/Nav/MobileNav.tsx

@@ -44,12 +44,12 @@ export function MobileNav() {
         <TabButton
           isActive={section === 'home'}
           onClick={() => setSection('home')}>
-          Home
+          Kryefaqja
         </TabButton>
         <TabButton
           isActive={section === 'learn'}
           onClick={() => setSection('learn')}>
-          Learn
+          Mëso
         </TabButton>
         <TabButton
           isActive={section === 'apis'}

beta/src/components/Layout/Nav/Nav.tsx

@@ -144,7 +144,7 @@ export default function Nav() {
         <NextLink href="/">
           <a className="inline-flex text-l font-normal items-center text-primary dark:text-primary-dark py-1 mr-0 sm:mr-3 whitespace-nowrap">
             <Logo className="text-sm mr-2 w-8 h-8 text-link dark:text-link-dark" />
-            React Docs
+            Dokumentacioni i React
           </a>
         </NextLink>
         <div className="lg:w-full leading-loose hidden sm:flex flex-initial items-center h-auto pr-5 lg:pr-5 pt-0.5">
@@ -177,10 +177,10 @@ export default function Nav() {
       </div>
       <div className="px-0 pt-2 w-full 2xl:max-w-xs hidden lg:flex items-center self-center border-b-0 lg:border-b border-border dark:border-border-dark">
         <NavLink href="/" isActive={section === 'home'}>
-          Home
+          Kryefaqja
         </NavLink>
         <NavLink href="/learn" isActive={section === 'learn'}>
-          Learn
+          Mëso
         </NavLink>
         <NavLink href="/apis" isActive={section === 'apis'}>
           API

beta/src/components/MDX/ExpandableCallout.tsx

@@ -25,7 +25,7 @@ const variantMap = {
       'linear-gradient(rgba(245, 249, 248, 0), rgba(245, 249, 248, 1)',
   },
   gotcha: {
-    title: 'Pitfall',
+    title: 'Grackë',
     Icon: IconGotcha,
     containerClasses: 'bg-yellow-5 dark:bg-yellow-60 dark:bg-opacity-20',
     textColor: 'text-yellow-50 dark:text-yellow-40',

beta/src/components/MDX/ExpandableExample.tsx

@@ -41,7 +41,7 @@ function ExpandableExample({
           {isDeepDive && (
             <>
               <IconDeepDive className="inline mr-2 dark:text-purple-30 text-purple-40" />
-              Deep Dive
+              Më në thellësi
             </>
           )}
           {isExample && (
@@ -69,7 +69,7 @@ function ExpandableExample({
           <span className="mr-1">
             <IconChevron displayDirection={isExpanded ? 'up' : 'down'} />
           </span>
-          {isExpanded ? 'Hide Details' : 'Show Details'}
+          {isExpanded ? 'Fshih detajet' : 'Trego detajet'}
         </Button>
       </div>
       <div

beta/src/components/MDX/HomepageHero.tsx

@@ -13,7 +13,7 @@ function HomepageHero() {
         <Logo className="text-link dark:text-link-dark w-20 sm:w-28 mr-4 mb-4 sm:mb-0 h-auto" />
         <div className="flex flex-wrap">
           <h1 className="text-5xl mr-4 -mt-1 flex wrap font-bold leading-tight text-primary dark:text-primary-dark">
-            React Docs
+            Dokumentacioni i React
           </h1>
           <div className="inline-flex self-center px-2 mt-1 bg-highlight dark:bg-highlight-dark w-auto rounded text-link dark:text-link-dark uppercase font-bold tracking-wide text-base whitespace-nowrap">
             Beta
@@ -22,18 +22,18 @@ function HomepageHero() {
       </div>
       <section className="my-8 sm:my-10 grid grid-cols-1 lg:grid-cols-2 gap-x-8 gap-y-4">
         <div className="flex flex-col justify-center">
-          <YouWillLearnCard title="Learn React" path="/learn">
+          <YouWillLearnCard title="Mësoni React" path="/learn">
             <p>
-              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.
             </p>
           </YouWillLearnCard>
         </div>
         <div className="flex flex-col justify-center">
-          <YouWillLearnCard title="API Reference" path="/apis">
+          <YouWillLearnCard title="Referenca API" path="/apis">
             <p>
-              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.
             </p>
           </YouWillLearnCard>
         </div>

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 <SimpleCallout title={title}>{children}</SimpleCallout>;
 }
 

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ë
           <IconNavArrow displayDirection="right" className="inline ml-1" />
         </ButtonLink>
       </div>

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 (

beta/src/pages/community/index.md

@@ -1,20 +1,20 @@
 ---
-title: Community
+title: Komuniteti
 ---
 
 <Intro>
 
-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ë.
 
 </Intro>
 
-## 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)!
 
 <!--
 
@@ -33,6 +33,6 @@ Each community consists of many thousands of React users.
 
 -->
 
-## 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*.