From 70a8eee69524a01444e4573767353b9e6a02e9df Mon Sep 17 00:00:00 2001 From: "Kristijan \"Fremen\" Velkovski" Date: Sat, 2 Mar 2024 09:34:56 -0600 Subject: [PATCH 1/3] =?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 2/3] =?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 3/3] =?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*/}