From 7db0950bfa31ac94b964baba92bbec96ee0ab4c1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rado=C5=A1=20Mili=C4=87ev?= <40705899+rammba@users.noreply.github.com> Date: Mon, 23 Sep 2024 18:19:41 +0200 Subject: [PATCH] Translate thinking-in-react.md --- src/content/learn/thinking-in-react.md | 251 +++++++++++++------------ 1 file changed, 129 insertions(+), 122 deletions(-) diff --git a/src/content/learn/thinking-in-react.md b/src/content/learn/thinking-in-react.md index 0f05a056..fa4f76af 100644 --- a/src/content/learn/thinking-in-react.md +++ b/src/content/learn/thinking-in-react.md @@ -1,49 +1,50 @@ --- -title: Thinking in React +title: Razmišljanje u React-u --- -React can change how you think about the designs you look at and the apps you build. When you build a user interface with React, you will first break it apart into pieces called *components*. Then, you will describe the different visual states for each of your components. Finally, you will connect your components together so that the data flows through them. In this tutorial, we’ll guide you through the thought process of building a searchable product data table with React. +React vam može promeniti način razmišljanja o dizajnu, kao i o aplikaciji koju pravite. Kada gradite korisnički interfejs (UI) pomoću React-a, prvo ćete ga podeliti na delove koji se zovu *komponente*. Nakon toga, opisaćete različita vizuelna stanja za svaku od vaših komponenti. Na kraju, povezaćete vaše komponente kako bi podaci prolazili kroz njih. U ovom tutorijalu ćemo vas voditi kroz proces razmišljanja o pravljenju tabele sa proizvodima koja može da se pretražuje pomoću React-a. -## Start with the mockup {/*start-with-the-mockup*/} +## Počnite sa mockup-om {/*start-with-the-mockup*/} -Imagine that you already have a JSON API and a mockup from a designer. +Zamislite da već imate JSON API i mockup od dizajnera. + +JSON API vraća podatke koji ovako izgledaju: -The JSON API returns some data that looks like this: ```json [ - { category: "Fruits", price: "$1", stocked: true, name: "Apple" }, - { category: "Fruits", price: "$1", stocked: true, name: "Dragonfruit" }, - { category: "Fruits", price: "$2", stocked: false, name: "Passionfruit" }, - { category: "Vegetables", price: "$2", stocked: true, name: "Spinach" }, - { category: "Vegetables", price: "$4", stocked: false, name: "Pumpkin" }, - { category: "Vegetables", price: "$1", stocked: true, name: "Peas" } + { category: "Voće", price: "$1", stocked: true, name: "Jabuka" }, + { category: "Voće", price: "$1", stocked: true, name: "Zmajevo voće" }, + { category: "Voće", price: "$2", stocked: false, name: "Marakuja" }, + { category: "Povrće", price: "$2", stocked: true, name: "Španat" }, + { category: "Povrće", price: "$4", stocked: false, name: "Bundeva" }, + { category: "Povrće", price: "$1", stocked: true, name: "Grašak" } ] ``` -The mockup looks like this: +Mockup izgleda ovako: -To implement a UI in React, you will usually follow the same five steps. +Da biste implementirali UI u React-u, uglavnom ćete pratiti istih pet koraka. -## Step 1: Break the UI into a component hierarchy {/*step-1-break-the-ui-into-a-component-hierarchy*/} +## Korak 1: Podeliti UI u hijerarhiju komponenata {/*step-1-break-the-ui-into-a-component-hierarchy*/} -Start by drawing boxes around every component and subcomponent in the mockup and naming them. If you work with a designer, they may have already named these components in their design tool. Ask them! +Započnite crtanjem granica oko svake komponente i subkomponente na mockup-u i pravilno ih imenujte. Ako radite sa dizajnerom, on je možda već imenovao komponente u svom alatu. Pitajte ga! -Depending on your background, you can think about splitting up a design into components in different ways: +U zavisnosti od vašeg znanja, možete razmišljati o podeli dizajna na komponente na više načina: -* **Programming**--use the same techniques for deciding if you should create a new function or object. One such technique is the [single responsibility principle](https://en.wikipedia.org/wiki/Single_responsibility_principle), that is, a component should ideally only do one thing. If it ends up growing, it should be decomposed into smaller subcomponents. -* **CSS**--consider what you would make class selectors for. (However, components are a bit less granular.) -* **Design**--consider how you would organize the design's layers. +* **Programiranje**--koristite iste tehnike odlučivanja kao da trebate kreirati novu funkciju ili objekat. Jedna takva tehnika je [princip jedne odgovornosti (single responsibility principle)](https://en.wikipedia.org/wiki/Single_responsibility_principle), što znači da bi komponenta idealno trebala raditi samo jednu stvar. Ako se komponenta povećava, trebalo bi je rasparčati na manje subkomponente. +* **CSS**--razmotrite za šta biste kreirali class selector-e. (Ipak, komponente su malo granularnije.) +* **Dizajn**--razmotrite kako biste organizovali slojeve dizajna. -If your JSON is well-structured, you'll often find that it naturally maps to the component structure of your UI. That's because UI and data models often have the same information architecture--that is, the same shape. Separate your UI into components, where each component matches one piece of your data model. +Ako je vaš JSON dobro struktuiran, često ćete primetiti da se prirodno mapira na strukturu komponenti na vašem UI-u. To je zato što UI i modeli podataka često imaju istu arhitekturu informacija, odnosno isti oblik. Podelite UI na komponente tako da svaka komponenta odgovara jednom delu modela podataka. -There are five components on this screen: +Na ovom ekranu imamo pet komponenti: @@ -51,19 +52,19 @@ There are five components on this screen: -1. `FilterableProductTable` (grey) contains the entire app. -2. `SearchBar` (blue) receives the user input. -3. `ProductTable` (lavender) displays and filters the list according to the user input. -4. `ProductCategoryRow` (green) displays a heading for each category. -5. `ProductRow` (yellow) displays a row for each product. +1. `FilterableProductTable` (sivo) sadrži celu aplikaciju. +2. `SearchBar` (plavo) prima koristički input. +3. `ProductTable` (ljubičasto) prikazuje i filtrira listu na osnovu korisničkog input-a. +4. `ProductCategoryRow` (zeleno) prikazuje naslov za svaku kategoriju. +5. `ProductRow` (žuto) prikazuje red za svaki proizvod. -If you look at `ProductTable` (lavender), you'll see that the table header (containing the "Name" and "Price" labels) isn't its own component. This is a matter of preference, and you could go either way. For this example, it is a part of `ProductTable` because it appears inside the `ProductTable`'s list. However, if this header grows to be complex (e.g., if you add sorting), you can move it into its own `ProductTableHeader` component. +Ako pogledate `ProductTable` (ljubičasto), videćete da naslov tabele (sadrži "Name" i "Price" labele) nije zasebna komponenta. To je stvar preferenci, tako da možete uraditi na oba načina. U ovom primeru on je deo `ProductTable`-a, jer se nalazi unutar `ProductTable` liste. Međutim, ako se ovaj naslov zakomplikuje (npr. ako dodate sortiranje), možete ga izdvojiti u `ProductTableHeader` komponentu. -Now that you've identified the components in the mockup, arrange them into a hierarchy. Components that appear within another component in the mockup should appear as a child in the hierarchy: +Kada ste identifikovali komponente na mockup-u, organizujte ih u hijerarhiju. Komponente koje se u mockup-u nalaze unutar druge komponente trebalo bi da budu deca (children) u hijerarhiji: * `FilterableProductTable` * `SearchBar` @@ -71,13 +72,13 @@ Now that you've identified the components in the mockup, arrange them into a hie * `ProductCategoryRow` * `ProductRow` -## Step 2: Build a static version in React {/*step-2-build-a-static-version-in-react*/} +## Korak 2: Napraviti statičku verziju u React-u {/*step-2-build-a-static-version-in-react*/} -Now that you have your component hierarchy, it's time to implement your app. The most straightforward approach is to build a version that renders the UI from your data model without adding any interactivity... yet! It's often easier to build the static version first and add interactivity later. Building a static version requires a lot of typing and no thinking, but adding interactivity requires a lot of thinking and not a lot of typing. +Pošto imate hijerarhiju komponenata, vreme je da implementirate vašu aplikaciju. Najbolji pristup je da napravite verziju koja renderuje UI na osnovu modela podataka bez dodavanja interaktivnosti... još uvek! Često je lakše da se prvo napravi statička verzija, a da se interaktivnost doda naknadno. Pravljenje statičke verzije zahteva dosta kucanja bez mozganja, dok dodavanje interaktivnosti zahteva dosta mozganja i ne tako mnogo kucanja. -To build a static version of your app that renders your data model, you'll want to build [components](/learn/your-first-component) that reuse other components and pass data using [props.](/learn/passing-props-to-a-component) Props are a way of passing data from parent to child. (If you're familiar with the concept of [state](/learn/state-a-components-memory), don't use state at all to build this static version. State is reserved only for interactivity, that is, data that changes over time. Since this is a static version of the app, you don't need it.) +Da biste napravili statičku verziju aplikacije koja renderuje vaš model podataka, želećete da napravite [komponente](/learn/your-first-component) koje koriste druge komponente i šalju podatke kroz [props](/learn/passing-props-to-a-component). Props je način prosleđivanja podataka od roditelja (parent) ka detetu (child). (Ako ste upoznati sa konceptom [state](/learn/state-a-components-memory)-a, uopšte ga nemojte koristiti za pravljenje ove statičke verzije. State je rezervisan samo za interaktivnost, odnosno podatke koji se menjaju vremenom. Pošto je ovo statička verzija aplikacije, state vam neće trebati.) -You can either build "top down" by starting with building the components higher up in the hierarchy (like `FilterableProductTable`) or "bottom up" by working from components lower down (like `ProductRow`). In simpler examples, it’s usually easier to go top-down, and on larger projects, it’s easier to go bottom-up. +Možete graditi aplikaciju "od gore ka dole", pravljenjem prvo komponenti koje su više u hijerarhiji (npr. `FilterableProductTable`) ili "od dole ka gore", pravljenjem komponenti koje su na dnu hijerarhije (npr. `ProductRow`). U jednostavnijim primerima, često je lakše koristiti "od gore ka dole", dok je na većim projektima lakše koristiti "od dole ka gore". @@ -130,8 +131,8 @@ function ProductTable({ products }) { - - + + {rows} @@ -142,11 +143,11 @@ function ProductTable({ products }) { function SearchBar() { return ( - + ); @@ -162,12 +163,12 @@ function FilterableProductTable({ products }) { } const PRODUCTS = [ - {category: "Fruits", price: "$1", stocked: true, name: "Apple"}, - {category: "Fruits", price: "$1", stocked: true, name: "Dragonfruit"}, - {category: "Fruits", price: "$2", stocked: false, name: "Passionfruit"}, - {category: "Vegetables", price: "$2", stocked: true, name: "Spinach"}, - {category: "Vegetables", price: "$4", stocked: false, name: "Pumpkin"}, - {category: "Vegetables", price: "$1", stocked: true, name: "Peas"} + {category: "Voće", price: "$1", stocked: true, name: "Jabuka"}, + {category: "Voće", price: "$1", stocked: true, name: "Zmajevo voće"}, + {category: "Voće", price: "$2", stocked: false, name: "Marakuja"}, + {category: "Povrće", price: "$2", stocked: true, name: "Španat"}, + {category: "Povrće", price: "$4", stocked: false, name: "Bundeva"}, + {category: "Povrće", price: "$1", stocked: true, name: "Grašak"} ]; export default function App() { @@ -195,85 +196,85 @@ td { -(If this code looks intimidating, go through the [Quick Start](/learn/) first!) +(Ako vam ovaj kod deluje zastrašujuće, prvo prođite kroz [Brzi Uvod](/learn/)!) -After building your components, you'll have a library of reusable components that render your data model. Because this is a static app, the components will only return JSX. The component at the top of the hierarchy (`FilterableProductTable`) will take your data model as a prop. This is called _one-way data flow_ because the data flows down from the top-level component to the ones at the bottom of the tree. +Nakon što napravite komponente, imaćete biblioteku komponenata koje renderuju model podataka i mogu se iskoristiti na više mesta. Pošto je ovo statička aplikacija, komponente će vraćati samo JSX. Komponenta na vrhu hijerarhije (`FilterableProductTable`) uzeće vaš model podataka kao prop. To se zove _jednosmerni data flow_ zato što se podaci prosleđuju od komponente na vrhu ka komponentama na dnu stabla. -At this point, you should not be using any state values. That’s for the next step! +Ne biste trebali da koristite nijednu state vrednost u ovom trenutku. To je naredni korak! -## Step 3: Find the minimal but complete representation of UI state {/*step-3-find-the-minimal-but-complete-representation-of-ui-state*/} +## Korak 3: Pronaći minimalan, ali kompletan prikaz UI state-a {/*step-3-find-the-minimal-but-complete-representation-of-ui-state*/} -To make the UI interactive, you need to let users change your underlying data model. You will use *state* for this. +Da bi vaš UI bio interaktivan, neophodno je dopustiti korisnicima da menjaju model podataka. Za to ćete upotrebiti *state*. -Think of state as the minimal set of changing data that your app needs to remember. The most important principle for structuring state is to keep it [DRY (Don't Repeat Yourself).](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself) Figure out the absolute minimal representation of the state your application needs and compute everything else on-demand. For example, if you're building a shopping list, you can store the items as an array in state. If you want to also display the number of items in the list, don't store the number of items as another state value--instead, read the length of your array. +State bi trebao biti najmanji skup promenljivih podataka koji su neophodni vašoj aplikaciji. Najbitnija stavka za definisanje state-a je da poštujete [DRY (Don't Repeat Yourself)](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself) princip. Pokušajte da shvatite apsolutno minimalan state koji je potreban vašoj aplikaciji, a sve ostalo računajte po potrebi. Na primer, ako pravite spisak za kupovinu, možete držati listu proizvoda kao state. Ako želite da prikažete i broj proizvoda u listi, ne morate čuvati broj proizvoda u state-u, već ga možete izračunati kao dužinu liste. -Now think of all of the pieces of data in this example application: +Sada razmislite o svim podacima u našoj aplikaciji: -1. The original list of products -2. The search text the user has entered -3. The value of the checkbox -4. The filtered list of products +1. Originalna lista proizvoda +2. Tekst za pretragu koji je uneo korisnik +3. Vrednost checkbox-a +4. Filtrirana lista proizvoda -Which of these are state? Identify the ones that are not: +Šta je od ovoga state? Identifikujte ono što nije: -* Does it **remain unchanged** over time? If so, it isn't state. -* Is it **passed in from a parent** via props? If so, it isn't state. -* **Can you compute it** based on existing state or props in your component? If so, it *definitely* isn't state! +* Da li **ostaje nepromenjeno** tokom vremena? Ako je tako, to nije state. +* Da li je **prosleđeno od roditelja** kao props? Ako je tako, to nije state. +* **Da li možete izračunati** na osnovu state-a ili props-a unutar komponente? Ako je tako, to *definitivno* nije state! -What's left is probably state. +Ono što ostaje je verovatno state. -Let's go through them one by one again: +Prođimo kroz podatke još jednom: -1. The original list of products is **passed in as props, so it's not state.** -2. The search text seems to be state since it changes over time and can't be computed from anything. -3. The value of the checkbox seems to be state since it changes over time and can't be computed from anything. -4. The filtered list of products **isn't state because it can be computed** by taking the original list of products and filtering it according to the search text and value of the checkbox. +1. Originalna lista proizvoda je **prosleđena kao props, tako da nije state**. +2. Tekst za pretragu deluje kao state zato što se vremenom menja i ne može biti izračunat. +3. Vrednost checkbox-a deluje kao state zato što se vremenom menja i ne može biti izračunata. +4. Filtrirana lista proizvoda **nije state zato što može biti izračunata** filtriranjem originalne liste proizvoda pomoću teksta za pretragu i vrednosti checkbox-a. -This means only the search text and the value of the checkbox are state! Nicely done! +Ovo znači da su samo tekst za pretragu i vrednost checkbox-a state-ovi! Dobar posao! #### Props vs State {/*props-vs-state*/} -There are two types of "model" data in React: props and state. The two are very different: +Postoje dva tipa "modela" podataka u React-u: props i state. Veoma su različiti: -* [**Props** are like arguments you pass](/learn/passing-props-to-a-component) to a function. They let a parent component pass data to a child component and customize its appearance. For example, a `Form` can pass a `color` prop to a `Button`. -* [**State** is like a component’s memory.](/learn/state-a-components-memory) It lets a component keep track of some information and change it in response to interactions. For example, a `Button` might keep track of `isHovered` state. +* [**Props** je poput argumenata koje prosledite](/learn/passing-props-to-a-component) funkciji. Oni omogućavaju roditeljskoj (parent) komponenti da prosledi podatke detetu (child) komponenti i izmeni joj izgled. Na primer, `Form` može proslediti `color` prop `Button` komponenti. +* [**State** je nalik na memoriju komponente](/learn/state-a-components-memory). Omogućava komponenti da prati neku informaciju i menja je u zavisnosti od interakcije. Na primer, `Button` može pratiti `isHovered` state. -Props and state are different, but they work together. A parent component will often keep some information in state (so that it can change it), and *pass it down* to child components as their props. It's okay if the difference still feels fuzzy on the first read. It takes a bit of practice for it to really stick! +Props i state su različiti, ali rade zajedno. Roditeljska (parent) komponenta će često čuvati neku informaciju kao state (kako bi mogla da je menja), i *proslediće je* deci (children) komponentama kao njihov props. U redu je da vam je ova razlika nejasna na prvo čitanje. Potrebno je malo iskustva kako biste je savladali! -## Step 4: Identify where your state should live {/*step-4-identify-where-your-state-should-live*/} +## Korak 4: Identifikovati gde state treba da živi {/*step-4-identify-where-your-state-should-live*/} -After identifying your app’s minimal state data, you need to identify which component is responsible for changing this state, or *owns* the state. Remember: React uses one-way data flow, passing data down the component hierarchy from parent to child component. It may not be immediately clear which component should own what state. This can be challenging if you’re new to this concept, but you can figure it out by following these steps! +Nakon identifikacije minimalnog skupa podataka za state-ove, potrebno je da identifikujete koja komponenta je zadužena za koji state, tj. koja komponenta *poseduje* state. Upamtite: React koristi jednosmerni data flow gde se podaci hijerarhijski prosleđuju od roditelja ka detetu. Možda vam ne bude odmah očigledno koja komponenta poseduje koji state. To može biti izazovno ako se tek upoznajete sa ovim konceptom, ali shvatićete ako pratite naredne korake! -For each piece of state in your application: +Za svaki state u vašoj aplikaciji: -1. Identify *every* component that renders something based on that state. -2. Find their closest common parent component--a component above them all in the hierarchy. -3. Decide where the state should live: - 1. Often, you can put the state directly into their common parent. - 2. You can also put the state into some component above their common parent. - 3. If you can't find a component where it makes sense to own the state, create a new component solely for holding the state and add it somewhere in the hierarchy above the common parent component. +1. Identifikujte *svaku* komponentu koja renderuje nešto na osnovu state-a. +2. Nađite najbližu roditeljsku komponentu koja iz sve sadrži--komponenta koja je iznad svih njih u hijerarhiji. +3. Odlučite gde state treba da živi: + 1. Najčešće state možete ubaciti direktno u zajedničkog roditelja. + 2. Takođe, state možete ubaciti u neku komponentu iznad zajedničkog roditelja. + 3. Ako ne možete pronaći komponentu u kojoj ima smisla čuvati state, kreirajte novu komponentu isključivo za čuvanje state-a i dodajte je negde u hijerarhiju iznad zajedničke roditeljske komponente. -In the previous step, you found two pieces of state in this application: the search input text, and the value of the checkbox. In this example, they always appear together, so it makes sense to put them into the same place. +U prethodnom koraku, pronašli ste dva state-a u aplikaciji: tekst za pretragu i vrednost checkbox-a. U ovom primeru se oba pojavljuju zajedno, tako da ima smisla staviti ih na isto mesto. -Now let's run through our strategy for them: +Primenimo našu strategiju za njih: -1. **Identify components that use state:** - * `ProductTable` needs to filter the product list based on that state (search text and checkbox value). - * `SearchBar` needs to display that state (search text and checkbox value). -1. **Find their common parent:** The first parent component both components share is `FilterableProductTable`. -2. **Decide where the state lives**: We'll keep the filter text and checked state values in `FilterableProductTable`. +1. **Identifikovati komponente koje koriste state:** + * `ProductTable` treba da filtrira listu proizvoda na osnovu state-a (tekst za pretragu i vrednost checkbox-a). + * `SearchBar` treba da prikaže state (tekst za pretragu i vrednost checkbox-a). +2. **Pronaći zajedničkog roditelja:** Prva komponenta koja sadrži obe komponente je `FilterableProductTable`. +3. **Odlučiti gde živi state:** Držaćemo tekst za pretragu i vrednost checkbox-a u `FilterableProductTable`. -So the state values will live in `FilterableProductTable`. +Znači, state vrednosti će živeti u `FilterableProductTable`. -Add state to the component with the [`useState()` Hook.](/reference/react/useState) Hooks are special functions that let you "hook into" React. Add two state variables at the top of `FilterableProductTable` and specify their initial state: +Dodajte state u komponentu pomoću [`useState()` Hook](/reference/react/useState)-a. Hook-ovi su posebne funkcije koje vam omogućavaju da "se zakačite" za React. Dodajte dve state promenljive na vrh `FilterableProductTable` i zadajte njihov početni state: ```js function FilterableProductTable({ products }) { @@ -281,7 +282,7 @@ function FilterableProductTable({ products }) { const [inStockOnly, setInStockOnly] = useState(false); ``` -Then, pass `filterText` and `inStockOnly` to `ProductTable` and `SearchBar` as props: +Zatim, prosledite `filterText` i `inStockOnly` u `ProductTable` i `SearchBar` kao props: ```js
@@ -295,7 +296,7 @@ Then, pass `filterText` and `inStockOnly` to `ProductTable` and `SearchBar` as p
``` -You can start seeing how your application will behave. Edit the `filterText` initial value from `useState('')` to `useState('fruit')` in the sandbox code below. You'll see both the search input text and the table update: +Gledajte kako će se vaša aplikacija ponašati. Promenite početnu vrednost `filterText`-a sa `useState('')` na `useState('voće')` u sandbox-u ispod. Videćete da su se tekst za pretragu i tabela promenili: @@ -377,8 +378,8 @@ function ProductTable({ products, filterText, inStockOnly }) {
NamePriceNazivCena
- - + + {rows} @@ -392,25 +393,25 @@ function SearchBar({ filterText, inStockOnly }) { + placeholder="Pretraži..."/> ); } const PRODUCTS = [ - {category: "Fruits", price: "$1", stocked: true, name: "Apple"}, - {category: "Fruits", price: "$1", stocked: true, name: "Dragonfruit"}, - {category: "Fruits", price: "$2", stocked: false, name: "Passionfruit"}, - {category: "Vegetables", price: "$2", stocked: true, name: "Spinach"}, - {category: "Vegetables", price: "$4", stocked: false, name: "Pumpkin"}, - {category: "Vegetables", price: "$1", stocked: true, name: "Peas"} + {category: "Voće", price: "$1", stocked: true, name: "Jabuka"}, + {category: "Voće", price: "$1", stocked: true, name: "Zmajevo voće"}, + {category: "Voće", price: "$2", stocked: false, name: "Marakuja"}, + {category: "Povrće", price: "$2", stocked: true, name: "Španat"}, + {category: "Povrće", price: "$4", stocked: false, name: "Bundeva"}, + {category: "Povrće", price: "$1", stocked: true, name: "Grašak"} ]; export default function App() { @@ -437,7 +438,7 @@ td { -Notice that editing the form doesn't work yet. There is a console error in the sandbox above explaining why: +Primetićete da promena forme još uvek ne radi. Pojavio se problem u konzoli u sandbox-u iznad koji objašnjava zašto: @@ -445,7 +446,13 @@ You provided a \`value\` prop to a form field without an \`onChange\` handler. T -In the sandbox above, `ProductTable` and `SearchBar` read the `filterText` and `inStockOnly` props to render the table, the input, and the checkbox. For example, here is how `SearchBar` populates the input value: + + +Prosledili ste \`value\` prop u polje forme bez \`onChange\` handler-a. To će renderovati read-only polje. + + + +U sandbox-u iznad, `ProductTable` i `SearchBar` čitaju `filterText` i `inStockOnly` props da bi renderovali tabelu, tekst za pretragu i checkbox. Na primer, ovako `SearchBar` konstruiše vrednost teksta za pretragu: ```js {1,6} function SearchBar({ filterText, inStockOnly }) { @@ -454,19 +461,19 @@ function SearchBar({ filterText, inStockOnly }) { + placeholder="Pretraži..."/> ``` -However, you haven't added any code to respond to the user actions like typing yet. This will be your final step. +Međutim, još uvek niste dodali kod koji bi odgovarao na korisničke akcije poput kucanja. To će biti naš poslednji korak. -## Step 5: Add inverse data flow {/*step-5-add-inverse-data-flow*/} +## Korak 5: Dodati inverzni data flow {/*step-5-add-inverse-data-flow*/} -Currently your app renders correctly with props and state flowing down the hierarchy. But to change the state according to user input, you will need to support data flowing the other way: the form components deep in the hierarchy need to update the state in `FilterableProductTable`. +Trenutno, vaša aplikacija korektno renderuje props-e i state-ove koje komponente dobijaju od roditelja. Ali, da biste promenili state na osnovu korisničkog input-a, morate podržati data flow na drugačiji način: komponente duboko u hijerarhiji trebaju promeniti state u `FilterableProductTable`. -React makes this data flow explicit, but it requires a little more typing than two-way data binding. If you try to type or check the box in the example above, you'll see that React ignores your input. This is intentional. By writing ``, you've set the `value` prop of the `input` to always be equal to the `filterText` state passed in from `FilterableProductTable`. Since `filterText` state is never set, the input never changes. +React eksplicitno podržava ovakav data flow, ali je potrebno malo više od dvosmernog data binding-a. Ako pokušate da kucate ili promenite vrednost checkbox-a u primeru iznad, videćete da React ignoriše vaš input. To je namerno urađeno. Kada napišete ``, setovaćete `value` prop `input`-a da uvek bude jednak `filterText` state-u prosleđenom iz `FilterableProductTable`. Pošto se `filterText` state nikad ne menja, ni input se ne menja. -You want to make it so whenever the user changes the form inputs, the state updates to reflect those changes. The state is owned by `FilterableProductTable`, so only it can call `setFilterText` and `setInStockOnly`. To let `SearchBar` update the `FilterableProductTable`'s state, you need to pass these functions down to `SearchBar`: +Želite da kad god korisnik promeni input u formi, da se state takođe promeni. Pošto se state nalazi u `FilterableProductTable`, samo tamo možete pozvati funkcije `setFilterText` i `setInStockOnly`. Da biste omogućili `SearchBar`-u da promeni state iz `FilterableProductTable`, te funkcije morate proslediti u `SearchBar`: ```js {2,3,10,11} function FilterableProductTable({ products }) { @@ -482,7 +489,7 @@ function FilterableProductTable({ products }) { onInStockOnlyChange={setInStockOnly} /> ``` -Inside the `SearchBar`, you will add the `onChange` event handlers and set the parent state from them: +Unutar `SearchBar`-a dodaćete `onChange` event handler-e i setovaćete state roditelja u njima: ```js {4,5,13,19} function SearchBar({ @@ -496,7 +503,7 @@ function SearchBar({ onFilterTextChange(e.target.value)} />
NamePriceNazivCena
- - + + {rows} @@ -609,7 +616,7 @@ function SearchBar({ onFilterTextChange(e.target.value)} /> ); } const PRODUCTS = [ - {category: "Fruits", price: "$1", stocked: true, name: "Apple"}, - {category: "Fruits", price: "$1", stocked: true, name: "Dragonfruit"}, - {category: "Fruits", price: "$2", stocked: false, name: "Passionfruit"}, - {category: "Vegetables", price: "$2", stocked: true, name: "Spinach"}, - {category: "Vegetables", price: "$4", stocked: false, name: "Pumpkin"}, - {category: "Vegetables", price: "$1", stocked: true, name: "Peas"} + {category: "Voće", price: "$1", stocked: true, name: "Jabuka"}, + {category: "Voće", price: "$1", stocked: true, name: "Zmajevo voće"}, + {category: "Voće", price: "$2", stocked: false, name: "Marakuja"}, + {category: "Povrće", price: "$2", stocked: true, name: "Španat"}, + {category: "Povrće", price: "$4", stocked: false, name: "Bundeva"}, + {category: "Povrće", price: "$1", stocked: true, name: "Grašak"} ]; export default function App() { @@ -656,8 +663,8 @@ td { -You can learn all about handling events and updating state in the [Adding Interactivity](/learn/adding-interactivity) section. +Možete naučiti sve o event handling-u i promeni state-a u sekciji [Dodavanje interaktivnosti](/learn/adding-interactivity). -## Where to go from here {/*where-to-go-from-here*/} +## Gde ići nakon ovoga {/*where-to-go-from-here*/} -This was a very brief introduction to how to think about building components and applications with React. You can [start a React project](/learn/installation) right now or [dive deeper on all the syntax](/learn/describing-the-ui) used in this tutorial. +Ovo je bio veoma kratak uvod o tome kako da razmišljate o pravljenju komponenata i aplikacija pomoću React-a. Možete [započeti React projekat](/learn/installation) odmah ili [zaroniti dublje u sintaksu](/learn/describing-the-ui) upotrebljenu u ovom tutorijalu.
NamePriceNazivCena