From 2e4cff504e28f69da58f818b9f2e730de24b1d27 Mon Sep 17 00:00:00 2001 From: cvijandj Date: Wed, 24 May 2023 15:21:18 +0200 Subject: [PATCH] Installation + Start a New React Project translation --- src/components/MDX/ExpandableCallout.tsx | 2 +- src/components/MDX/ExpandableExample.tsx | 6 +- src/components/MDX/MDXComponents.tsx | 2 +- src/content/learn/installation.md | 41 +++++----- .../learn/start-a-new-react-project.md | 82 +++++++++---------- 5 files changed, 67 insertions(+), 66 deletions(-) diff --git a/src/components/MDX/ExpandableCallout.tsx b/src/components/MDX/ExpandableCallout.tsx index 1fb1ea0ce..f3f6d9f85 100644 --- a/src/components/MDX/ExpandableCallout.tsx +++ b/src/components/MDX/ExpandableCallout.tsx @@ -26,7 +26,7 @@ const variantMap = { 'linear-gradient(rgba(249, 247, 243, 0), rgba(249, 247, 243, 1)', }, note: { - title: 'Note', + title: 'Napomena', Icon: IconNote, containerClasses: 'bg-green-5 dark:bg-green-60 dark:bg-opacity-20 text-primary dark:text-primary-dark text-lg', diff --git a/src/components/MDX/ExpandableExample.tsx b/src/components/MDX/ExpandableExample.tsx index 1ad1e0313..c4d46960b 100644 --- a/src/components/MDX/ExpandableExample.tsx +++ b/src/components/MDX/ExpandableExample.tsx @@ -71,13 +71,13 @@ function ExpandableExample({children, excerpt, type}: ExpandableExampleProps) { {isDeepDive && ( <> - Deep Dive + Istražite dublje )} {isExample && ( <> - Example + Primer )} @@ -101,7 +101,7 @@ function ExpandableExample({children, excerpt, type}: ExpandableExampleProps) { - {isExpanded ? 'Hide Details' : 'Show Details'} + {isExpanded ? 'Sakrij Detaljnije' : 'Prikaži detaljnije'}
{children}; } diff --git a/src/content/learn/installation.md b/src/content/learn/installation.md index c5426ea94..2a18e0efb 100644 --- a/src/content/learn/installation.md +++ b/src/content/learn/installation.md @@ -1,57 +1,58 @@ --- -title: Installation +title: Instalacija --- -React has been designed from the start for gradual adoption. You can use as little or as much React as you need. Whether you want to get a taste of React, add some interactivity to an HTML page, or start a complex React-powered app, this section will help you get started. +React je dizajniran od početka za postepeno usvajanje. Možete koristiti koliko god React-a želite. Bez obzira da li želite da probate React, dodate neku interaktivnost na HTML stranicu, ili da započnete kompleksnu React aplikaciju, ova sekcija će vam pomoći da počnete. + -* [How to start a new React project](/learn/start-a-new-react-project) -* [How to add React to an existing project](/learn/add-react-to-an-existing-project) -* [How to set up your editor](/learn/editor-setup) -* [How to install React Developer Tools](/learn/react-developer-tools) +* [Kako započeti novi React projekat](/learn/start-a-new-react-project) +* [Kako dodati React na postojeći projekat](/learn/add-react-to-an-existing-project) +* [Kako da konfigurišete vaš editor](/learn/editor-setup) +* [Kako da instalirate React Developer tools](/learn/react-developer-tools) -## Try React {/*try-react*/} +## Isprobajte React {/*try-react*/} -You don't need to install anything to play with React. Try editing this sandbox! +Ne morate ništa instalirati da bi ste se igrali sa React-om. Probajte da izmenite ovaj sandbox! ```js function Greeting({ name }) { - return

Hello, {name}

; + return

Zdravo, {name}

; } export default function App() { - return + return } ``` -You can edit it directly or open it in a new tab by pressing the "Fork" button in the upper right corner. +Možete ga direktno menjati ili otvoriti u novom tabu pritiskom na "Fork" dugme u gornjem desnom uglu. -Most pages in the React documentation contain sandboxes like this. Outside of the React documentation, there are many online sandboxes that support React: for example, [CodeSandbox](https://codesandbox.io/s/new), [StackBlitz](https://stackblitz.com/fork/react), or [CodePen.](https://codepen.io/pen?&editors=0010&layout=left&prefill_data_id=3f4569d1-1b11-4bce-bd46-89090eed5ddb) +Većina stranica u React dokumentaciji sadrži sandbokse kao ovaj. Van React dokumentacije, postoje mnogi online sandboksi koji podržavaju React: na primer, [CodeSandbox](https://codesandbox.io/s/new), [StackBlitz](https://stackblitz.com/fork/react), ili [CodePen.](https://codepen.io/pen?&editors=0010&layout=left&prefill_data_id=3f4569d1-1b11-4bce-bd46-89090eed5ddb) -### Try React locally {/*try-react-locally*/} +### Isprobajte React lokalno {/*try-react-locally*/} -To try React locally on your computer, [download this HTML page.](https://gist.githubusercontent.com/gaearon/0275b1e1518599bbeafcde4722e79ed1/raw/db72dcbf3384ee1708c4a07d3be79860db04bff0/example.html) Open it in your editor and in your browser! +Da isprobate React lokalno na vašem računaru, [preuzmite ovu HTML stranicu.](https://gist.githubusercontent.com/gaearon/0275b1e1518599bbeafcde4722e79ed1/raw/db72dcbf3384ee1708c4a07d3be79860db04bff0/example.html) Otvorite je u vašem editoru i u vašem pretraživaču! -## Start a new React project {/*start-a-new-react-project*/} +## Započnite novi React projekat {/*start-a-new-react-project*/} -If you want to build an app or a website fully with React, [start a new React project.](/learn/start-a-new-react-project) +Ako želite da napravite aplikaciju ili sajt koristeći samo React, [zapocnite novi React projekat.](/learn/start-a-new-react-project) -## Add React to an existing project {/*add-react-to-an-existing-project*/} +## Dodajte React u postojeći projekat {/*add-react-to-an-existing-project*/} -If want to try using React in your existing app or a website, [add React to an existing project.](/learn/add-react-to-an-existing-project) +Ako žeite da isprobate React u vašem postojećem sajtu ili aplikaciji, [dodajte React u postojeći projekat.](/learn/add-react-to-an-existing-project) -## Next steps {/*next-steps*/} +## Sledeći koraci {/*next-steps*/} -Head to the [Quick Start](/learn) guide for a tour of the most important React concepts you will encounter every day. +Idite na [Brzi Start](/learn) vodič za turu najvažnijih React koncepta sa kojima ćete se susretati svakodnevno. diff --git a/src/content/learn/start-a-new-react-project.md b/src/content/learn/start-a-new-react-project.md index 280a1378e..9dadb05b9 100644 --- a/src/content/learn/start-a-new-react-project.md +++ b/src/content/learn/start-a-new-react-project.md @@ -1,126 +1,127 @@ --- -title: Start a New React Project +title: Započnite novi React projekat --- -If you want to build a new app or a new website fully with React, we recommend picking one of the React-powered frameworks popular in the community. Frameworks provide features that most apps and sites eventually need, including routing, data fetching, and generating HTML. +Ako želite da napravite novu aplikaciju ili novi sajt koristeći samo React, preporučujemo da izaberete jedan od React framework-ova popularnih u zajednici. Framework-ovi pružaju funkcionalnosti koje većina aplikacija i sajtova na kraju treba da imaju, uključujući rutiranje, dohvatanje podataka i generisanje HTML-a. -**You need to install [Node.js](https://nodejs.org/en/) for local development.** You can *also* choose to use Node.js in production, but you don't have to. Many React frameworks support export to a static HTML/CSS/JS folder. +**Morate da instalirate [Node.js](https://nodejs.org/en/) za lokalni development.** Možete "takođe" da izaberete da koristite Node.js u produkciji, ali ne morate. Mnogi React framework-ovi podržavaju eksport u statički HTML/CSS/JS folder. -## Production-grade React frameworks {/*production-grade-react-frameworks*/} +## React framework-ovi za produkciju {/*production-grade-react-frameworks*/} ### Next.js {/*nextjs*/} -**[Next.js](https://nextjs.org/) is a full-stack React framework.** It's versatile and lets you create React apps of any size--from a mostly static blog to a complex dynamic application. To create a new Next.js project, run in your terminal: +**[Next.js](https://nextjs.org/) je full-stack React framework.** On je veoma svestran i omogućava vam da kreirate React aplikacije bilo koje veličine--od uglavnom statičkog bloga do kompleksne dinamičke aplikacije. Da biste kreirali novi Next.js projekat, pokrenite u vašem terminalu: npx create-next-app -If you're new to Next.js, check out the [Next.js tutorial.](https://nextjs.org/learn/foundations/about-nextjs) +Ako vam je Next.js nepoynat, proverite ovaj [Next.js tutorijal.](https://nextjs.org/learn/foundations/about-nextjs) -Next.js is maintained by [Vercel](https://vercel.com/). You can [deploy a Next.js app](https://nextjs.org/docs/deployment) to any Node.js or serverless hosting, or to your own server. [Fully static Next.js apps](https://nextjs.org/docs/advanced-features/static-html-export) can be deployed to any static hosting. +Next.js je održavan od strane [Vercel](https://vercel.com/). Možete [deploy-ovati Next.js aplikaciju](https://nextjs.org/docs/deployment) na bilo koji Node.js ili hosting bey servera, ili na vaš sopstveni server. [Potpuno statičke Next.js aplikacije](https://nextjs.org/docs/advanced-features/static-html-export) mogu biti deploy-ovane na bilo koji statički hosting. ### Remix {/*remix*/} -**[Remix](https://remix.run/) is a full-stack React framework with nested routing.** It lets you break your app into nested parts that can load data in parallel and refresh in response to the user actions. To create a new Remix project, run: +**[Remix](https://remix.run/) je full-stack React framework sa ugneždenim rutiranjem.** On vam omogućava da podelite vašu aplikaciju na ugneždene delove koji mogu da učitavaju podatke paralelno i da se osvežavaju u odgovoru na korisničke akcije. Da biste kreirali novi Remix projekat, pokrenite u vašem terminalu: npx create-remix -If you're new to Remix, check out the Remix [blog tutorial](https://remix.run/docs/en/main/tutorials/blog) (short) and [app tutorial](https://remix.run/docs/en/main/tutorials/jokes) (long). +Ako vam je Remix nepoznat, pogledajte Remix [blog tutorijal](https://remix.run/docs/en/main/tutorials/blog) (kratak) i [app tutorijal](https://remix.run/docs/en/main/tutorials/jokes) (dugačak). -Remix is maintained by [Shopify](https://www.shopify.com/). When you create a Remix project, you need to [pick your deployment target](https://remix.run/docs/en/main/guides/deployment). You can deploy a Remix app to any Node.js or serverless hosting by using or writing an [adapter](https://remix.run/docs/en/main/other-api/adapter). +Remix je održavan od strane [Shopify](https://www.shopify.com/). Kada kreirate Remix projekat, morate [izabrati vaš deployment target](https://remix.run/docs/en/main/guides/deployment). Možete deploy-ovati Remix aplikaciju na bilo koji Node.js ili serverless hosting korišćenjem ili pisanjem [adaptera](https://remix.run/docs/en/main/other-api/adapter). ### Gatsby {/*gatsby*/} -**[Gatsby](https://www.gatsbyjs.com/) is a React framework for fast CMS-backed websites.** Its rich plugin ecosystem and its GraphQL data layer simplify integrating content, APIs, and services into one website. To create a new Gatsby project, run: +**[Gatsby](https://www.gatsbyjs.com/) je React framework za brze CMS sajtove.** Njegov bogat ekosistem plugina i GraphQL data sloj pojednostavljuju integraciju sadržaja, API-ja i servisa u jedan sajt. Da biste kreirali novi Gatsby projekat, pokrenite u vašem terminalu: npx create-gatsby -If you're new to Gatsby, check out the [Gatsby tutorial.](https://www.gatsbyjs.com/docs/tutorial/) +Ako niste upoznati sa Gatsby, pogledajte [Gatsby tutorijal.](https://www.gatsbyjs.com/docs/tutorial/) -Gatsby is maintained by [Netlify](https://www.netlify.com/). You can [deploy a fully static Gatsby site](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting) to any static hosting. If you opt into using server-only features, make sure your hosting provider supports them for Gatsby. +Gatsby je održavan od strane [Netlify](https://www.netlify.com/). Možete [deploy-ovati potpuno statički Gatsby sajt](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting) na bilo koji statički hosting. Ako se odlučite za korišćenje server-only funkcionalnosti, pobrinite se da vaš hosting provider podržava Gatsby. -### Expo (for native apps) {/*expo*/} +### Expo (za native aplikacije) {/*expo*/} -**[Expo](https://expo.dev/) is a React framework that lets you create universal Android, iOS, and web apps with truly native UIs.** It provides an SDK for [React Native](https://reactnative.dev/) that makes the native parts easier to use. To create a new Expo project, run: + +**[Expo](https://expo.dev/) je React framework koji vam omogućava da kreirate univerzalne Android, iOS i web aplikacije sa zaista native korisničkim interfejsima.** On pruža SDK za [React Native](https://reactnative.dev/) koji olakšava korišćenje native delova. Da biste kreirali novi Expo projekat, pokrenite u vašem terminalu: npx create-expo-app -If you're new to Expo, check out the [Expo tutorial](https://docs.expo.dev/tutorial/introduction/). +Ako niste upoznati sa Expo, pogledajte [Expo tutorijal.](https://docs.expo.dev/tutorial/introduction/) -Expo is maintained by [Expo (the company)](https://expo.dev/about). Building apps with Expo is free, and you can submit them to the Google and Apple app stores without restrictions. Expo additionally provides opt-in paid cloud services. +Expo je održavan od strane [Expo (kompanije)](https://expo.dev/about). Kreiranje aplikacija sa Expo-om je besplatno, i možete ih submit-ovati na Google i Apple app store bez ograničenja. Expo dodatno pruža opt-in plaćene cloud servise. -#### Can I use React without a framework? {/*can-i-use-react-without-a-framework*/} +#### Mogu li da koristim React bez framework-a? {/*can-i-use-react-without-a-framework*/} -You can definitely use React without a framework--that's how you'd [use React for a part of your page.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) **However, if you're building a new app or a site fully with React, we recommend using a framework.** +Naravno da možete koristiti React bez framework-a--kako biste [koristili React za deo vaše stranice.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) **Međutim, ako kreirate novu aplikaciju ili sajt koristeći samo React, preporučujemo da koristite framework.** -Here's why. +Evo i zašto. -Even if you don't need routing or data fetching at first, you'll likely want to add some libraries for them. As your JavaScript bundle grows with every new feature, you might have to figure out how to split code for every route individually. As your data fetching needs get more complex, you are likely to encounter server-client network waterfalls that make your app feel very slow. As your audience includes more users with poor network conditions and low-end devices, you might need to generate HTML from your components to display content early--either on the server, or during the build time. Changing your setup to run some of your code on the server or during the build can be very tricky. +Čak i ako vam ne treba rutiranje ili dohvatanje podataka na početku, verovatno ćete želeti da dodate neke biblioteke za njih. Kako vaš JavaScript bundle raste sa svakom novom funkcionalnošću, možda ćete morati da podelite kod za svaku rutu pojedinačno. Kako vaše potrebe za dohvatanjem podataka postaju složenije, verovatno ćete naići na server-client mrežne vodopade koji čine da vaša aplikacija deluje veoma sporo. Kako vaša publika uključuje više korisnika sa lošim mrežnim uslovima i uređajima niske klase, možda ćete morati da generišete HTML iz vaših komponenti da biste prikazali sadržaj ranije--ili na serveru, ili tokom vremena izgradnje. Menjanje vašeg setup-a da bi se pokrenuo neki od vašeg koda na serveru ili tokom vremena izgradnje može biti veoma komplikovano. -**These problems are not React-specific. This is why Svelte has SvelteKit, Vue has Nuxt, and so on.** To solve these problems on your own, you'll need to integrate your bundler with your router and with your data fetching library. It's not hard to get an initial setup working, but there are a lot of subtleties involved in making an app that loads quickly even as it grows over time. You'll want to send down the minimal amount of app code but do so in a single client–server roundtrip, in parallel with any data required for the page. You'll likely want the page to be interactive before your JavaScript code even runs, to support progressive enhancement. You may want to generate a folder of fully static HTML files for your marketing pages that can be hosted anywhere and still work with JavaScript disabled. Building these capabilities yourself takes real work. +**Ovi problemi nisu specifični za React. Zato Svelte ima SvelteKit, Vue ima Nuxt, i tako dalje.** Da biste rešili ove probleme sami, moraćete da integrišete vaš bundler sa vašim router-om i sa vašom bibliotekom za dohvatanje podataka. Nije teško napraviti početni setup, ali postoji mnogo suptilnosti u pravljenju aplikacije koja se brzo učitava čak i dok raste tokom vremena. Želećete da pošaljete minimalnu količinu koda aplikacije ali da to uradite u jednom client-server roundtrip-u, paralelno sa bilo kojim podacima potrebnim za stranicu. Verovatno ćete želeti da stranica bude interaktivna pre nego što se vaš JavaScript kod pokrene, da biste podržali progresivno poboljšanje. Možda ćete želeti da generišete folder potpuno statičkih HTML fajlova za vaše marketing stranice koje mogu biti hostovane bilo gde i da i dalje rade sa isključenim JavaScript-om. Izgradnja ovih mogućnosti sami zahteva pravi posao. -**React frameworks on this page solve problems like these by default, with no extra work from your side.** They let you start very lean and then scale your app with your needs. Each React framework has a community, so finding answers to questions and upgrading tooling is easier. Frameworks also give structure to your code, helping you and others retain context and skills between different projects. Conversely, with a custom setup it's easier to get stuck on unsupported dependency versions, and you'll essentially end up creating your own framework—albeit one with no community or upgrade path (and if it's anything like the ones we've made in the past, more haphazardly designed). +**React frejmveorkovi na ovoj stranici rešavaju probleme kao što su ovi automatski, bez dodatnog posla sa vaše strane.** Oni vam omogućavaju da počnete veoma jednostavno i da onda skalirate vašu aplikaciju sa vašim potrebama. Svaki React framework ima zajednicu, tako da je lakše naći odgovore na pitanja i nadograditi alate. Framework-ovi takođe daju strukturu vašem kodu, pomažući vam i drugima da zadržite kontekst i veštine između različitih projekata. Nasuprot tome, sa custom setup-om je lakše zaglaviti se na nepodržanim verzijama zavisnosti, i na kraju ćete zapravo kreirati vaš sopstveni framework--iako bez zajednice ili putanju za nadogradnju (i ako je išta kao oni koje smo pravili u prošlosti, više haotično dizajnirani). -If you're still not convinced, or your app has unusual constraints not served well by these frameworks and you'd like to roll your own custom setup, we can't stop you--go for it! Grab `react` and `react-dom` from npm, set up your custom build process with a bundler like [Vite](https://vitejs.dev/) or [Parcel](https://parceljs.org/), and add other tools as you need them for routing, static generation or server-side rendering, and more. +Ako i dalje niste ubedjeni, ili vaša aplikacija ima neobične zahteve koji nisu dobro podržani od strane ovih framework-ova i želite da napravite vaš sopstveni custom setup, ne možemo vas zaustaviti--krenite! Uzmite `react` i `react-dom` sa npm-a, napravite vaš custom build proces sa bundler-om kao što je [Vite](https://vitejs.dev/) ili [Parcel](https://parceljs.org/), i dodajte druge alate kada vam budu potrebni za rutiranje, statičku generaciju ili server-side rendering, i tako dalje. -## Bleeding-edge React frameworks {/*bleeding-edge-react-frameworks*/} +## Najnoviji React framework-ovi {/*bleeding-edge-react-frameworks*/} -As we've explored how to continue improving React, we realized that integrating React more closely with frameworks (specifically, with routing, bundling, and server technologies) is our biggest opportunity to help React users build better apps. The Next.js team has agreed to collaborate with us in researching, developing, integrating, and testing framework-agnostic bleeding-edge React features like [React Server Components.](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components) +kako smo i dalje istraživali kako da nastavimo da poboljšavamo React, shvatili smo da je integracija React-a bliže sa framework-ovima (specifično, sa rutiranjem, bundler-ima, i server tehnologijama) naša najveća prilika da pomognemo React korisnicima da kreiraju bolje aplikacije. Next.js tim se složio da sarađuje sa nama u istraživanju, razvoju, integraciji, i testiranju framework-agnostičnih bleeding-edge React mogućnosti kao što su [React Server Components.](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components) -These features are getting closer to being production-ready every day, and we've been in talks with other bundler and framework developers about integrating them. Our hope is that in a year or two, all frameworks listed on this page will have full support for these features. (If you're a framework author interested in partnering with us to experiment with these features, please let us know!) +Ove mogućnosti su sve bliže da budu spremne za produkciju svakog dana, i bili smo u razgovorima sa drugim bundler i framework developerima o njihovoj integraciji. Naša nada je da će za godinu ili dve, svi framework-ovi navedeni na ovoj stranici imati punu podršku za ove mogućnosti. (Ako ste autor framework-a zainteresovan za saradnju sa nama u eksperimentisanju sa ovim mogućnostima, molimo vas javite nam se!) ### Next.js (App Router) {/*nextjs-app-router*/} -**[Next.js's App Router](https://beta.nextjs.org/docs/getting-started) is a redesign of the Next.js APIs aiming to fulfill the React team’s full-stack architecture vision.** It lets you fetch data in asynchronous components that run on the server or even during the build. +**[Next.js's App Router](https://beta.nextjs.org/docs/getting-started) je redesign Next.js API-ja koji ima za cilj da ispuni React timovu full-stack arhitekturu.** On vam omogućava da dohvatite podatke u asinhronim komponentama koje se izvršavaju na serveru ili čak tokom vremena izgradnje. -Next.js is maintained by [Vercel](https://vercel.com/). You can [deploy a Next.js app](https://nextjs.org/docs/deployment) to any Node.js or serverless hosting, or to your own server. Next.js also supports [static export](https://beta.nextjs.org/docs/configuring/static-export) which doesn't require a server. +Next.js je održavan od strane [Vercel](https://vercel.com/). Možete [deploy-ovati Next.js aplikaciju](https://nextjs.org/docs/deployment) na bilo koji Node.js ili serverless hosting, ili na vaš sopstveni server. Next.js takođe podržava [static export](https://beta.nextjs.org/docs/configuring/static-export) koji ne zahteva server. -Next.js's App Router is **currently in beta and is not yet recommended for production** (as of Mar 2023). To experiment with it in an existing Next.js project, [follow this incremental migration guide](https://beta.nextjs.org/docs/upgrade-guide#migrating-from-pages-to-app). - +Next.js-ov App Router je **trenutno u beta fazi i još uvek nije preporučen za produkciju** (kao od Mar 2023). Da biste eksperimentisali sa njim u postojećem Next.js projektu, [pratite ovaj inkrementalni vodič za migraciju.](https://beta.nextjs.org/docs/upgrade-guide#migrating-from-pages-to-app) -#### Which features make up the React team’s full-stack architecture vision? {/*which-features-make-up-the-react-teams-full-stack-architecture-vision*/} +#### Koje mogućnosti čine full-stack arhitekturu React-ovog tima? {/*which-features-make-up-the-react-teams-full-stack-architecture-vision*/} -Next.js's App Router bundler fully implements the official [React Server Components specification](https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md). This lets you mix build-time, server-only, and interactive components in a single React tree. +Next.js-ov App Router bundler potpuno implementira zvaničnu [React Server Components specifikaciju](). Ovo vam omogućava da pomešate komponente koje se izvršavaju tokom vremena izgradnje, komponente koje se izvršavaju samo na serveru, i interaktivne komponente u jednom React stablu. -For example, you can write a server-only React component as an `async` function that reads from a database or from a file. Then you can pass data down from it to your interactive components: +Na primer, možete napisati server-only React komponentu kao `async` funkciju koja čita iz baze podataka ili iz fajla. Zatim možete proslediti podatke iz nje vašim interaktivnim komponentama: ```js -// This component runs *only* on the server (or during the build). +// Ova komponenta se izvršava *samo* na serveru (ili tokom vremena izgradnje). async function Talks({ confId }) { - // 1. You're on the server, so you can talk to your data layer. API endpoint not required. + + // 1. Vi ste na serveru, tako da možete da komunicirate sa vašom bazom podataka. API pristupna tačka nije potreban. const talks = await db.Talks.findAll({ confId }); - // 2. Add any amount of rendering logic. It won't make your JavaScript bundle larger. + // 2. Dodajte bilo koju količinu rendering logike. To neće učiniti vaš JavaScript bundle većim. const videos = talks.map(talk => talk.video); - // 3. Pass the data down to the components that will run in the browser. + // 3. Prosledite podatke komponentama koje će se izvršavati u pretraživaču. return ; } ``` -Next.js's App Router also integrates [data fetching with Suspense](/blog/2022/03/29/react-v18#suspense-in-data-frameworks). This lets you specify a loading state (like a skeleton placeholder) for different parts of your user interface directly in your React tree: +Router Next.js aplikacije je takođe integrisan sa [dohvatanjem podataka pomoću Suspense-a](/blog/2022/03/29/react-v18#suspense-in-data-frameworks). Ovo vam omogućava da specificirate stanje učitavanja (kao što je skeleton placeholder) za različite delove vašeg korisničkog interfejsa direktno u vašem React stablu: ```js }> @@ -128,6 +129,5 @@ Next.js's App Router also integrates [data fetching with Suspense](/blog/2022/03 ``` -Server Components and Suspense are React features rather than Next.js features. However, adopting them at the framework level requires buy-in and non-trivial implementation work. At the moment, the Next.js App Router is the most complete implementation. The React team is working with bundler developers to make these features easier to implement in the next generation of frameworks. - +Server Komponente i Suspense su fičeri React-a, a ne Next.js fičeri. Međutim, njihovo usvajanje na nivou framework-a zahteva podršku i ne-trivijalan rad na implementaciji. Trenutno, Next.js App Router je najkompletnija implementacija. React tim sarađuje sa developerima bundler-a da bi ove mogućnosti bile lakše za implementaciju u sledećoj generaciji framework-ova.