From 7a3b8f98774cd53c97122193574420f2cafd3229 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Thu, 18 May 2023 14:37:00 +0100 Subject: [PATCH 1/5] Set up the translation --- README.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 966131db5..98e15d33c 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ -# react.dev +# mk.react.dev -This repo contains the source code and documentation powering [react.dev](https://react.dev/). +This repo contains the source code and documentation powering [mk.react.dev](https://mk.react.dev/). ## Getting started @@ -10,11 +10,11 @@ This repo contains the source code and documentation powering [react.dev](https: 1. Node: any 12.x version starting with v12.0.0 or greater 1. Yarn: See [Yarn website for installation instructions](https://yarnpkg.com/lang/en/docs/install/) 1. A fork of the repo (for any contributions) -1. A clone of the [react.dev repo](https://github.com/reactjs/react.dev) on your local machine +1. A clone of the [mk.react.dev repo](https://github.com/reactjs/mk.react.dev) on your local machine ### Installation -1. `cd react.dev` to go into the project root +1. `cd mk.react.dev` to go into the project root 3. `yarn` to install the website's npm dependencies ### Running locally @@ -26,11 +26,11 @@ This repo contains the source code and documentation powering [react.dev](https: ### Guidelines -The documentation is divided into several sections with a different tone and purpose. If you plan to write more than a few sentences, you might find it helpful to get familiar with the [contributing guidelines](https://github.com/reactjs/react.dev/blob/main/CONTRIBUTING.md#guidelines-for-text) for the appropriate sections. +The documentation is divided into several sections with a different tone and purpose. If you plan to write more than a few sentences, you might find it helpful to get familiar with the [contributing guidelines](https://github.com/reactjs/mk.react.dev/blob/main/CONTRIBUTING.md#guidelines-for-text) for the appropriate sections. ### Create a branch -1. `git checkout main` from any folder in your local `react.dev` repository +1. `git checkout main` from any folder in your local `mk.react.dev` repository 1. `git pull origin main` to ensure you have the latest main code 1. `git checkout -b the-name-of-my-branch` (replacing `the-name-of-my-branch` with a suitable name) to create a branch @@ -51,13 +51,13 @@ The documentation is divided into several sections with a different tone and pur 1. `git add -A && git commit -m "My message"` (replacing `My message` with a commit message, such as `Fix header logo on Android`) to stage and commit your changes 1. `git push my-fork-name the-name-of-my-branch` -1. Go to the [react.dev repo](https://github.com/reactjs/react.dev) and you should see recently pushed branches. +1. Go to the [mk.react.dev repo](https://github.com/reactjs/mk.react.dev) and you should see recently pushed branches. 1. Follow GitHub's instructions. 1. If possible, include screenshots of visual changes. A preview build is triggered after your changes are pushed to GitHub. ## Translation -If you are interested in translating `react.dev`, please see the current translation efforts [here](https://github.com/reactjs/react.dev/issues/4135). +If you are interested in translating `mk.react.dev`, please see the current translation efforts [here](https://github.com/reactjs/mk.react.dev/issues/4135). ## License -Content submitted to [react.dev](https://react.dev/) is CC-BY-4.0 licensed, as found in the [LICENSE-DOCS.md](https://github.com/reactjs/react.dev/blob/main/LICENSE-DOCS.md) file. +Content submitted to [mk.react.dev](https://mk.react.dev/) is CC-BY-4.0 licensed, as found in the [LICENSE-DOCS.md](https://github.com/reactjs/mk.react.dev/blob/main/LICENSE-DOCS.md) file. From 70a8eee69524a01444e4573767353b9e6a02e9df Mon Sep 17 00:00:00 2001 From: "Kristijan \"Fremen\" Velkovski" Date: Sat, 2 Mar 2024 09:34:56 -0600 Subject: [PATCH 2/5] =?UTF-8?q?=D0=91=D1=80=D0=B7=20=D0=BF=D0=BE=D1=87?= =?UTF-8?q?=D0=B5=D1=82=D0=BE=D0=BA.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Layout/HomeContent.js | 30 +++++++++++++------------- src/components/MDX/MDXComponents.tsx | 2 +- src/content/learn/index.md | 32 ++++++++++++++-------------- 3 files changed, 32 insertions(+), 32 deletions(-) diff --git a/src/components/Layout/HomeContent.js b/src/components/Layout/HomeContent.js index e1fab6d71..0b2401354 100644 --- a/src/components/Layout/HomeContent.js +++ b/src/components/Layout/HomeContent.js @@ -124,7 +124,7 @@ export function HomeContent() { React

- The library for web and native user interfaces + Библиотеката за веб и домашни кориснички интерфејси

- Learn React + label="Научете React"> + Научете React - API Reference + label="API Референца"> + API Референца
-
Create user interfaces from components
+
Креирајте кориснички интерфејси од компоненти
- React lets you build user interfaces out of individual pieces - called components. Create your own React components like{' '} - Thumbnail, LikeButton, and{' '} - Video. Then combine them into entire screens, pages, - and apps. + React ви овозможува да изградите кориснички интерфејси од + поединечни делови наречени компоненти. Создадете свои компоненти + React како Thumbnail, LikeButton и{' '} + Video. Потоа комбинирајте ги во цели екрани, + страници, и апликации.
@@ -162,10 +162,10 @@ export function HomeContent() {
- Whether you work on your own or with thousands of other - developers, using React feels the same. It is designed to let you - seamlessly combine components written by independent people, - teams, and organizations. + Без разлика дали работите сами или со илјадници други + програмерите, користењето на React се чувствува исто. Дизајниран е + за да ви дозволи беспрекорно комбинирање на компоненти напишани од + независни луѓе, тимови и организации.
diff --git a/src/components/MDX/MDXComponents.tsx b/src/components/MDX/MDXComponents.tsx index 76bf86eaa..239f8d621 100644 --- a/src/components/MDX/MDXComponents.tsx +++ b/src/components/MDX/MDXComponents.tsx @@ -180,7 +180,7 @@ function YouWillLearn({ children: any; isChapter?: boolean; }) { - let title = isChapter ? 'In this chapter' : 'You will learn'; + let title = isChapter ? 'Во ова поглавје' : 'Вие ќе научите'; return {children}; } diff --git a/src/content/learn/index.md b/src/content/learn/index.md index b57655bc4..c57077ba6 100644 --- a/src/content/learn/index.md +++ b/src/content/learn/index.md @@ -1,21 +1,21 @@ --- -title: Quick Start +title: Брз почеток --- -Welcome to the React documentation! This page will give you an introduction to the 80% of React concepts that you will use on a daily basis. +Добредојдовте во документацијата React! Оваа страница ќе ве водеде во 80% од концептите на React што ќе ги користите секојдневно. -- How to create and nest components -- How to add markup and styles -- How to display data -- How to render conditions and lists -- How to respond to events and update the screen -- How to share data between components +- Како да креирате и вгнездувате компоненти +- Како да додадете обележување(markup) и стилови +- Како да се прикажат податоци +- Како да рендерирате услови и списоци +- Како да одговорите на настани и да го ажурирате екранот +- Како да споделувате податоци помеѓу компонентите @@ -28,27 +28,27 @@ React components are JavaScript functions that return markup: ```js function MyButton() { return ( - + ); } ``` -Now that you've declared `MyButton`, you can nest it into another component: +Сегашто "MyButton" е прогласен, можете да го вгнездите во друга компонента: ```js {5} export default function MyApp() { return (
-

Welcome to my app

+

Добредојдовте во мојата апликација

); } ``` -Notice that `` starts with a capital letter. That's how you know it's a React component. React component names must always start with a capital letter, while HTML tags must be lowercase. +Забележете дека `` започнува со голема буква. Така знаете дека тоа е React компонента. Имињата на React компонентите секогаш мора да започнуваат со голема буква, додека HTML ознаките мора да бидат мали. -Have a look at the result: +Погледнете го резултатот: @@ -56,7 +56,7 @@ Have a look at the result: function MyButton() { return ( ); } @@ -64,7 +64,7 @@ function MyButton() { export default function MyApp() { return (
-

Welcome to my app

+

Добредојдовте во мојата апликација

); @@ -73,7 +73,7 @@ export default function MyApp() { -The `export default` keywords specify the main component in the file. If you're not familiar with some piece of JavaScript syntax, [MDN](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export) and [javascript.info](https://javascript.info/import-export) have great references. +Клучните зборови "export default" ја одредуваат главната компонента во фајлот. Ако не сте запознаени со некои делови од синтаксата на JavaScript, [MDN](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export) и [javascript.info](https://javascript.info/import-export) имаат одлични референци. ## Writing markup with JSX {/*writing-markup-with-jsx*/} From b454898ca44384dc45048375ea6fc5fbb95d5922 Mon Sep 17 00:00:00 2001 From: "Kristijan \"Fremen\" Velkovski" Date: Sat, 2 Mar 2024 11:10:31 -0600 Subject: [PATCH 3/5] =?UTF-8?q?=D0=94=D0=BE=D0=B4=D0=B0=D0=B2=D0=B0=D1=9A?= =?UTF-8?q?=D0=B5=20=D1=81=D1=82=D0=B8=D0=BB=D0=BE=D0=B2=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/content/learn/index.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/content/learn/index.md b/src/content/learn/index.md index c57077ba6..4a7d96bcb 100644 --- a/src/content/learn/index.md +++ b/src/content/learn/index.md @@ -94,24 +94,24 @@ function AboutPage() { If you have a lot of HTML to port to JSX, you can use an [online converter.](https://transform.tools/html-to-jsx) -## Adding styles {/*adding-styles*/} +## Додавање стилови {/*adding-styles*/} -In React, you specify a CSS class with `className`. It works the same way as the HTML [`class`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class) attribute: +Во React, одредувате CSS класа со `className`. Работи на истиот начин како HTML атрибутот [`class`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class): ```js ``` -Then you write the CSS rules for it in a separate CSS file: +Потоа ги пишувате CSS правилата за него во посебен CSS фајл: ```css -/* In your CSS */ +/* Во вашиот CSS */ .avatar { border-radius: 50%; } ``` -React does not prescribe how you add CSS files. In the simplest case, you'll add a [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) tag to your HTML. If you use a build tool or a framework, consult its documentation to learn how to add a CSS file to your project. +React не пропишува како да додавате CSS фајлови. Во наједноставниот случај, ќе додадете [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) ознака во вашиот HTML. Ако користите алатка за градење или оквир, консултирајте се со документацијата за да научите како да додадете CSS фајлови во вашиот проект. ## Displaying data {/*displaying-data*/} From 9fb3db08dc5a04e224a731232d5809469d5e0b6c Mon Sep 17 00:00:00 2001 From: "Kristijan \"Fremen\" Velkovski" Date: Sat, 2 Mar 2024 11:41:00 -0600 Subject: [PATCH 4/5] =?UTF-8?q?=D0=9F=D1=80=D0=B8=D0=BA=D0=B0=D0=B6=D1=83?= =?UTF-8?q?=D0=B2=D0=B0=D1=9A=D0=B5=20=D0=BF=D0=BE=D0=B4=D0=B0=D1=82=D0=BE?= =?UTF-8?q?=D1=86=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/content/learn/index.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/content/learn/index.md b/src/content/learn/index.md index 4a7d96bcb..e12cd64f0 100644 --- a/src/content/learn/index.md +++ b/src/content/learn/index.md @@ -113,9 +113,9 @@ If you have a lot of HTML to port to JSX, you can use an [online converter.](htt React не пропишува како да додавате CSS фајлови. Во наједноставниот случај, ќе додадете [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) ознака во вашиот HTML. Ако користите алатка за градење или оквир, консултирајте се со документацијата за да научите како да додадете CSS фајлови во вашиот проект. -## Displaying data {/*displaying-data*/} +## Прикажување податоци {/*displaying-data*/} -JSX lets you put markup into JavaScript. Curly braces let you "escape back" into JavaScript so that you can embed some variable from your code and display it to the user. For example, this will display `user.name`: +JSX ви овозможува да ставите ознаки во JavaScript. Кадравите загради ви дозволуваат "да избегате назад" во JavaScript за да можете да вградите некоја варијабила од вашиот код и да ја прикажете на корисникот. На пример, ова ќе прикаже `user.name`: ```js {3} return ( @@ -125,7 +125,7 @@ return ( ); ``` -You can also "escape into JavaScript" from JSX attributes, but you have to use curly braces *instead of* quotes. For example, `className="avatar"` passes the `"avatar"` string as the CSS class, but `src={user.imageUrl}` reads the JavaScript `user.imageUrl` variable value, and then passes that value as the `src` attribute: +Можете исто така да "избегате во JavaScript" од JSX атрибутите, но мора да користите кадрави загради *наместо* наводници. На пример, `className="avatar"` ја пренесува низата `"avatar"` како CSS класа, но `src={user.imageUrl}` ја чита вредноста на JavaScript варијабилата `user.imageUrl` и потоа ја пренесува таа вредност како атрибутот `src`: ```js {3,4} return ( @@ -136,7 +136,7 @@ return ( ); ``` -You can put more complex expressions inside the JSX curly braces too, for example, [string concatenation](https://javascript.info/operators#string-concatenation-with-binary): +Можете исто така да ставите посложени изрази во JSX кадравите загради, на пример, [спојување низи](https://javascript.info/operators#string-concatenation-with-binary): @@ -154,7 +154,7 @@ export default function Profile() { {'Photo -In the above example, `style={{}}` is not a special syntax, but a regular `{}` object inside the `style={ }` JSX curly braces. You can use the `style` attribute when your styles depend on JavaScript variables. +Во горниот пример, `style={{}}` не е специјална синтакса, туку обичен објект `{}` во `style={ }` JSX кадравите заградите. Можете да го користите атрибутот "style" кога вашите стилови зависат од JavaScript варијабилите. ## Conditional rendering {/*conditional-rendering*/} From 009a0a24db325f41a207ae06eb3c031cc5a517c8 Mon Sep 17 00:00:00 2001 From: "Kristijan \"Fremen\" Velkovski" Date: Mon, 13 Apr 2026 03:00:50 -0500 Subject: [PATCH 5/5] =?UTF-8?q?=D0=B1=D1=80=D0=B7=20=D0=BF=D0=BE=D1=87?= =?UTF-8?q?=D0=B5=D1=82=D0=BE=D0=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/content/learn/index.md | 166 ++++++++++++++++++------------------- 1 file changed, 83 insertions(+), 83 deletions(-) diff --git a/src/content/learn/index.md b/src/content/learn/index.md index f09d84175..de3c04846 100644 --- a/src/content/learn/index.md +++ b/src/content/learn/index.md @@ -4,26 +4,26 @@ title: Брз почеток -Добредојдовте во документацијата React! Оваа страница ќе ве водеде во 80% од концептите на React што ќе ги користите секојдневно. +Добредојдовте во документацијата за React! Оваа страница ви дава вовед во 80% од концептите на React што ќе ги користите секојдневно. -- Како да креирате и вгнездувате компоненти -- Како да додадете обележување(markup) и стилови -- Како да се прикажат податоци +- Како да создавате и вгнездувате компоненти +- Како да додадете обележување (markup) и стилови +- Како да прикажувате податоци - Како да рендерирате услови и списоци -- Како да одговорите на настани и да го ажурирате екранот -- Како да споделувате податоци помеѓу компонентите +- Како да одговарате на настани и да го ажурирате екранот +- Како да споделувате податоци помеѓу компоненти -## Creating and nesting components {/*components*/} +## Создавање и вгнездување на компоненти {/*components*/} -React apps are made out of *components*. A component is a piece of the UI (user interface) that has its own logic and appearance. A component can be as small as a button, or as large as an entire page. +React апликациите се изградени од *компоненти*. Компонентата е дел од корисничкиот интерфејс (UI) што има сопствена логика и изглед. Може да биде мала како копче или голема како цела страница. -React components are JavaScript functions that return markup: +React компонентите се JavaScript функции што враќаат обележување: ```js function MyButton() { @@ -33,7 +33,7 @@ function MyButton() { } ``` -Сегашто "MyButton" е прогласен, можете да го вгнездите во друга компонента: +Откако ќе ја декларирате `MyButton`, можете да ја вгнездите во друга компонента: ```js {5} export default function MyApp() { @@ -46,7 +46,7 @@ export default function MyApp() { } ``` -Забележете дека `` започнува со голема буква. Така знаете дека тоа е React компонента. Имињата на React компонентите секогаш мора да започнуваат со голема буква, додека HTML ознаките мора да бидат мали. +Забележете дека `` започнува со голема буква. Така знаете дека е React компонента. Имињата на React компонентите секогаш мора да започнуваат со голема буква, додека HTML ознаките мора да бидат со мали букви. Погледнете го резултатот: @@ -73,36 +73,36 @@ export default function MyApp() { -Клучните зборови "export default" ја одредуваат главната компонента во фајлот. Ако не сте запознаени со некои делови од синтаксата на JavaScript, [MDN](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export) и [javascript.info](https://javascript.info/import-export) имаат одлични референци. +Клучните зборови `export default` ја одредуваат главната компонента во фајлот. Ако не сте запознаени со дел од синтаксата на JavaScript, [MDN](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export) и [javascript.info](https://javascript.info/import-export) имаат одлични референци. -## Writing markup with JSX {/*writing-markup-with-jsx*/} +## Пишување обележување со JSX {/*writing-markup-with-jsx*/} -The markup syntax you've seen above is called *JSX*. It is optional, but most React projects use JSX for its convenience. All of the [tools we recommend for local development](/learn/installation) support JSX out of the box. +Синтаксата за обележување што ја видовте погоре се вика *JSX*. Не е задолжителна, но повеќето React проекти користат JSX заради погодноста. Сите [алатки што ги препорачуваме за локален развој](/learn/installation) поддржуваат JSX веднаш. -JSX is stricter than HTML. You have to close tags like `
`. Your component also can't return multiple JSX tags. You have to wrap them into a shared parent, like a `
...
` or an empty `<>...` wrapper: +JSX е построг од HTML. Мора да ги затворите ознаките како `
`. Компонентата не може да врати повеќе JSX ознаки истовремено. Треба да ги ставите во заеднички родител, како `
...
` или празна `<>...` обвивка (фрагмент): ```js {3,6} function AboutPage() { return ( <> -

About

-

Hello there.
How do you do?

+

За нас

+

Здраво.
Како сте?

); } ``` -If you have a lot of HTML to port to JSX, you can use an [online converter.](https://transform.tools/html-to-jsx) +Ако имате многу HTML што треба да го пренесете во JSX, може да користите [онлајн конвертор.](https://transform.tools/html-to-jsx) ## Додавање стилови {/*adding-styles*/} -Во React, одредувате CSS класа со `className`. Работи на истиот начин како HTML атрибутот [`class`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class): +Во React, CSS класата ја одредувате со `className`. Работи на истиот начин како HTML атрибутот [`class`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class): ```js ``` -Потоа ги пишувате CSS правилата за него во посебен CSS фајл: +Потоа ги пишувате CSS правилата за неа во посебен CSS фајл: ```css /* Во вашиот CSS */ @@ -111,11 +111,11 @@ If you have a lot of HTML to port to JSX, you can use an [online converter.](htt } ``` -React не пропишува како да додавате CSS фајлови. Во наједноставниот случај, ќе додадете [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) ознака во вашиот HTML. Ако користите алатка за градење или оквир, консултирајте се со документацијата за да научите како да додадете CSS фајлови во вашиот проект. +React не пропишува како да додавате CSS фајлови. Во наједноставниот случај, ќе додадете [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) ознака во вашиот HTML. Ако користите алатка за градење или оквир, консултирајте се со документацијата за да научите како да додадете CSS фајл во проектот. ## Прикажување податоци {/*displaying-data*/} -JSX ви овозможува да ставите ознаки во JavaScript. Кадравите загради ви дозволуваат "да избегате назад" во JavaScript за да можете да вградите некоја варијабила од вашиот код и да ја прикажете на корисникот. На пример, ова ќе прикаже `user.name`: +JSX ви овозможува да ставите обележување во JavaScript. Кадравите загради ви дозволуваат повторно да „влезете“ во JavaScript за да вградите променлива од вашиот код и да ја прикажете на корисникот. На пример, ова ќе прикаже `user.name`: ```js {3} return ( @@ -125,7 +125,7 @@ return ( ); ``` -Можете исто така да "избегате во JavaScript" од JSX атрибутите, но мора да користите кадрави загради *наместо* наводници. На пример, `className="avatar"` ја пренесува низата `"avatar"` како CSS класа, но `src={user.imageUrl}` ја чита вредноста на JavaScript варијабилата `user.imageUrl` и потоа ја пренесува таа вредност како атрибутот `src`: +Можете исто така да „избегате“ во JavaScript од JSX атрибутите, но мора да користите кадрави загради *наместо* наводници. На пример, `className="avatar"` ја пренесува низата `"avatar"` како CSS класа, но `src={user.imageUrl}` ја чита вредноста на JavaScript променливата `user.imageUrl` и потоа ја пренесува како атрибут `src`: ```js {3,4} return ( @@ -136,7 +136,7 @@ return ( ); ``` -Можете исто така да ставите посложени изрази во JSX кадравите загради, на пример, [спојување низи](https://javascript.info/operators#string-concatenation-with-binary): +Можете да ставите и посложени изрази во JSX кадравите загради, на пример [спојување низи](https://javascript.info/operators#string-concatenation-with-binary): @@ -177,11 +177,11 @@ export default function Profile() { -Во горниот пример, `style={{}}` не е специјална синтакса, туку обичен објект `{}` во `style={ }` JSX кадравите заградите. Можете да го користите атрибутот "style" кога вашите стилови зависат од JavaScript варијабилите. +Во горниот пример, `style={{}}` не е посебна синтакса, туку обичен објект `{}` внатре во `style={ }` во JSX кадравите загради. Можете да го користите атрибутот `style` кога вашите стилови зависат од JavaScript променливи. -## Conditional rendering {/*conditional-rendering*/} +## Условен приказ {/*conditional-rendering*/} -In React, there is no special syntax for writing conditions. Instead, you'll use the same techniques as you use when writing regular JavaScript code. For example, you can use an [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) statement to conditionally include JSX: +Во React нема посебна синтакса за пишување услови. Наместо тоа, ќе ги користите истите техники како при обичен JavaScript. На пример, може да користите наредба [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) за условно вклучување на JSX: ```js let content; @@ -197,7 +197,7 @@ return ( ); ``` -If you prefer more compact code, you can use the [conditional `?` operator.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) Unlike `if`, it works inside JSX: +Ако претпочитате покомпактен код, може да го користите [условниот оператор `?`.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) За разлика од `if`, работи и внатре во JSX: ```js
@@ -209,7 +209,7 @@ If you prefer more compact code, you can use the [conditional `?` operator.](htt
``` -When you don't need the `else` branch, you can also use a shorter [logical `&&` syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#short-circuit_evaluation): +Кога не ви треба гранката `else`, може да користите пократка [логичка синтакса со `&&`.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#short-circuit_evaluation) ```js
@@ -217,13 +217,13 @@ When you don't need the `else` branch, you can also use a shorter [logical `&&`
``` -All of these approaches also work for conditionally specifying attributes. If you're unfamiliar with some of this JavaScript syntax, you can start by always using `if...else`. +Сите овие пристапи важат и за условно задавање на атрибути. Ако некои од овие JavaScript конструкции не ви се познати, почнете со тоа секогаш да користите `if...else`. -## Rendering lists {/*rendering-lists*/} +## Прикажување на списоци {/*rendering-lists*/} -You will rely on JavaScript features like [`for` loop](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for) and the [array `map()` function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) to render lists of components. +Ќе се потпрете на можностите на JavaScript како [`for` јамката](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for) и [функцијата `map()` на низи](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) за да рендерирате списоци од компоненти. -For example, let's say you have an array of products: +На пример, да речеме дека имате низа производи: ```js const products = [ @@ -233,7 +233,7 @@ const products = [ ]; ``` -Inside your component, use the `map()` function to transform an array of products into an array of `
  • ` items: +Внатре во компонентата, користете ја функцијата `map()` за да ја претворите низата производи во низа `
  • ` елементи: ```js const listItems = products.map(product => @@ -247,7 +247,7 @@ return ( ); ``` -Notice how `
  • ` has a `key` attribute. For each item in a list, you should pass a string or a number that uniquely identifies that item among its siblings. Usually, a key should be coming from your data, such as a database ID. React uses your keys to know what happened if you later insert, delete, or reorder the items. +Забележете дека `
  • ` има атрибут `key`. За секој елемент во списокот треба да пренесете низа или број што единствено го одредува тој елемент меѓу „браќата“ во дрвото. Обично, клучот доаѓа од вашите податоци, на пример од ID во база. React ги користи клучевите за да знае што се случило ако подоцна вметнете, избришете или прередите елементи. @@ -278,37 +278,37 @@ export default function ShoppingList() { -## Responding to events {/*responding-to-events*/} +## Одговарање на настани {/*responding-to-events*/} -You can respond to events by declaring *event handler* functions inside your components: +Можете да одговарате на настани со декларирање на функции за *ракување со настани* внатре во вашите компоненти: ```js {2-4,7} function MyButton() { function handleClick() { - alert('You clicked me!'); + alert('Ме кликнавте!'); } return ( ); } ``` -Notice how `onClick={handleClick}` has no parentheses at the end! Do not _call_ the event handler function: you only need to *pass it down*. React will call your event handler when the user clicks the button. +Забележете дека `onClick={handleClick}` нема загради на крајот! Не ја *повикувајте* функцијата за ракување со настан: доволно е да ја *пренесете*. React ќе ја повика таа функција кога корисникот ќе го кликне копчето. -## Updating the screen {/*updating-the-screen*/} +## Ажурирање на екранот {/*updating-the-screen*/} -Often, you'll want your component to "remember" some information and display it. For example, maybe you want to count the number of times a button is clicked. To do this, add *state* to your component. +Често ќе сакате компонентата да „запомни“ некоја информација и да ја прикаже. На пример, можеби сакате да броите колку пати е кликнато копче. За тоа додадете *состојба (state)* во компонентата. -First, import [`useState`](/reference/react/useState) from React: +Прво, увезете [`useState`](/reference/react/useState) од React: ```js import { useState } from 'react'; ``` -Now you can declare a *state variable* inside your component: +Потоа може да декларирате *променлива за состојба* внатре во компонентата: ```js function MyButton() { @@ -316,9 +316,9 @@ function MyButton() { // ... ``` -You’ll get two things from `useState`: the current state (`count`), and the function that lets you update it (`setCount`). You can give them any names, but the convention is to write `[something, setSomething]`. +Од `useState` добивате две работи: моменталната состојба (`count`) и функцијата што ја ажурира (`setCount`). Можете да им дадете било кои имиња, но конвенцијата е `[нешто, setНешто]`. -The first time the button is displayed, `count` will be `0` because you passed `0` to `useState()`. When you want to change state, call `setCount()` and pass the new value to it. Clicking this button will increment the counter: +Првиот пат кога копчето се прикажува, `count` ќе биде `0` затоа што на `useState()` му пренесовте `0`. Кога сакате да ја смените состојбата, повикајте `setCount()` и пренесете ја новата вредност. Кликот на ова копче ќе го зголеми бројачот: ```js {5} function MyButton() { @@ -330,15 +330,15 @@ function MyButton() { return ( ); } ``` -React will call your component function again. This time, `count` will be `1`. Then it will be `2`. And so on. +React повторно ќе ја повика вашата функција за компонента. Овој пат, `count` ќе биде `1`. Потоа `2`. И така натаму. -If you render the same component multiple times, each will get its own state. Click each button separately: +Ако ја рендерирате истата компонента повеќе пати, секоја добива сопствена состојба. Кликнете го секое копче посебно: @@ -348,7 +348,7 @@ import { useState } from 'react'; export default function MyApp() { return (
    -

    Counters that update separately

    +

    Бројачи што се ажурираат одделно

    @@ -364,7 +364,7 @@ function MyButton() { return ( ); } @@ -379,59 +379,59 @@ button {     -Notice how each button "remembers" its own `count` state and doesn't affect other buttons. +Забележете како секое копче „си ја памети“ сопствената состојба `count` и не влијае на другите копчиња. -## Using Hooks {/*using-hooks*/} +## Користење на Hooks {/*using-hooks*/} -Functions starting with `use` are called *Hooks*. `useState` is a built-in Hook provided by React. You can find other built-in Hooks in the [API reference.](/reference/react) You can also write your own Hooks by combining the existing ones. +Функциите што започнуваат со `use` се викаат *Hooks*. `useState` е вграден Hook што го нуди React. Други вградени Hooks ги наоѓате во [API референцата.](/reference/react) Можете и сами да пишете Hooks со комбинирање на постоечките. -Hooks are more restrictive than other functions. You can only call Hooks *at the top* of your components (or other Hooks). If you want to use `useState` in a condition or a loop, extract a new component and put it there. +Hooks се построги од другите функции. Можете да ги повикувате само *на врвот* на вашите компоненти (или на други Hooks). Ако сакате `useState` во услов или јамка, издвојте нова компонента и ставете го таму. -## Sharing data between components {/*sharing-data-between-components*/} +## Споделување податоци помеѓу компоненти {/*sharing-data-between-components*/} -In the previous example, each `MyButton` had its own independent `count`, and when each button was clicked, only the `count` for the button clicked changed: +Во претходниот пример, секое `MyButton` имаше сопствен независен `count`, и при клик само `count` на тоа копче се менуваше: - + -Initially, each `MyButton`'s `count` state is `0` +На почетокот, состојбата `count` на секое `MyButton` е `0` - + -The first `MyButton` updates its `count` to `1` +Првото `MyButton` го ажурира својот `count` на `1` -However, often you'll need components to *share data and always update together*. +Но, често ви треба компонентите да *ги споделуваат податоците и секогаш да се ажурираат заедно*. -To make both `MyButton` components display the same `count` and update together, you need to move the state from the individual buttons "upwards" to the closest component containing all of them. +За двете `MyButton` да прикажуваат ист `count` и да се ажурираат заедно, треба да ја „подигнете“ состојбата од поединечните копчиња до најблиската компонента што ги содржи сите. -In this example, it is `MyApp`: +Во овој пример, тоа е `MyApp`: - + -Initially, `MyApp`'s `count` state is `0` and is passed down to both children +На почетокот, состојбата `count` на `MyApp` е `0` и се пренесува кон двете деца - + -On click, `MyApp` updates its `count` state to `1` and passes it down to both children +По клик, `MyApp` ја ажурира состојбата `count` на `1` и ја пренесува надолу кон двете деца -Now when you click either button, the `count` in `MyApp` will change, which will change both of the counts in `MyButton`. Here's how you can express this in code. +Сега, кога ќе кликнете било кое копче, `count` во `MyApp` ќе се смени, што ќе ги смени и двата броја во `MyButton`. Еве како да го изразите тоа во код. -First, *move the state up* from `MyButton` into `MyApp`: +Прво, *подигнете ја состојбата* од `MyButton` во `MyApp`: ```js {2-6,18} export default function MyApp() { @@ -443,7 +443,7 @@ export default function MyApp() { return (
    -

    Counters that update separately

    +

    Бројачи што се ажурираат одделно

    @@ -451,12 +451,12 @@ export default function MyApp() { } function MyButton() { - // ... we're moving code from here ... + // ... го преместуваме кодот оттука ... } ``` -Then, *pass the state down* from `MyApp` to each `MyButton`, together with the shared click handler. You can pass information to `MyButton` using the JSX curly braces, just like you previously did with built-in tags like ``: +Потоа, *пренесете ја состојбата надолу* од `MyApp` кон секое `MyButton`, заедно со заедничкиот ракувач за клик. Информацијата до `MyButton` ја пренесувате со JSX кадрави загради, како што претходно правевте со вградени ознаки како ``: ```js {11-12} export default function MyApp() { @@ -468,7 +468,7 @@ export default function MyApp() { return (
    -

    Counters that update together

    +

    Бројачи што се ажурираат заедно

    @@ -476,21 +476,21 @@ export default function MyApp() { } ``` -The information you pass down like this is called _props_. Now the `MyApp` component contains the `count` state and the `handleClick` event handler, and *passes both of them down as props* to each of the buttons. +Информацијата што вака ја пренесувате се вика _props_. Сега компонентата `MyApp` ја содржи состојбата `count` и ракувачот `handleClick`, и *ги пренесува двете како props* до секое копче. -Finally, change `MyButton` to *read* the props you have passed from its parent component: +На крај, сменете го `MyButton` за да ги *чита* props што ги пратил родителот: ```js {1,3} function MyButton({ count, onClick }) { return ( ); } ``` -When you click the button, the `onClick` handler fires. Each button's `onClick` prop was set to the `handleClick` function inside `MyApp`, so the code inside of it runs. That code calls `setCount(count + 1)`, incrementing the `count` state variable. The new `count` value is passed as a prop to each button, so they all show the new value. This is called "lifting state up". By moving state up, you've shared it between components. +Кога кликнувате, се активира ракувачот `onClick`. На секое копче, prop-от `onClick` беше поставен на `handleClick` од `MyApp`, па се извршува тој код. Тој код повикува `setCount(count + 1)`, што ја зголемува променливата за состојба `count`. Новата вредност на `count` се пренесува како prop до секое копче, па сите ја покажуваат новата вредност. Ова се вика „подигнување на состојба“ (*lifting state up*). Со подигнување на состојбата, ја споделивте меѓу компонентите. @@ -506,7 +506,7 @@ export default function MyApp() { return (
    -

    Counters that update together

    +

    Бројачи што се ажурираат заедно

    @@ -516,7 +516,7 @@ export default function MyApp() { function MyButton({ count, onClick }) { return ( ); } @@ -531,8 +531,8 @@ button {     -## Next Steps {/*next-steps*/} +## Следни чекори {/*next-steps*/} -By now, you know the basics of how to write React code! +Досега ги знаете основите на пишување React код! -Check out the [Tutorial](/learn/tutorial-tic-tac-toe) to put them into practice and build your first mini-app with React. +Погледнете го [туторијалот](/learn/tutorial-tic-tac-toe) за да ги ставите во пракса и да ја изградите вашата прва мини-апликација со React.