From 4bbc223ea94b1c990d33787e8a70214476a2727b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Haukur=20P=C3=A1ll=20Hallvar=C3=B0sson?= Date: Sat, 29 Apr 2023 17:12:00 +0000 Subject: [PATCH 1/3] =?UTF-8?q?Fyrstu=20=C3=BE=C3=BD=C3=B0ingar=20=C3=A1?= =?UTF-8?q?=20innsetningarkafla?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/content/learn/installation.md | 45 +++++++++++++++---------------- src/sidebarHome.json | 2 +- src/sidebarLearn.json | 10 +++---- 3 files changed, 28 insertions(+), 29 deletions(-) diff --git a/src/content/learn/installation.md b/src/content/learn/installation.md index c5426ea94..c98336434 100644 --- a/src/content/learn/installation.md +++ b/src/content/learn/installation.md @@ -1,57 +1,56 @@ --- -title: Installation +title: Innsetning --- -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 var hannað þannig að hægt sé að byrja að nota það hægt og rólega. Þú getur notað React eins lítið eða eins mikið og þú þarft. Hvort sem þig langar bara að finna smjörþefinn af React, bæta við gagnvirkni á HTML síðu, eða byrja á flóknu React verkefni, þá er þetta svæði fyrir þig. -* [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) +* [Byrjaðu á nýju React verkefni](/learn/start-a-new-react-project) +* [Innsetning á React í tiltæku verkefni](/learn/add-react-to-an-existing-project) +* [Uppsetning á ritli](/learn/editor-setup) +* [Þróunartól fyrir React](/learn/react-developer-tools) -## Try React {/*try-react*/} +## Prófaðu React {/*try-react*/} -You don't need to install anything to play with React. Try editing this sandbox! +Þú þarft ekki að innsetja neitt til að byrja að fikta í React. Prófaðu að breyta kóðanum í þessum sandkassa! ```js -function Greeting({ name }) { - return

Hello, {name}

; +function Heilsun({ nafn }) { + return

Halló, {nafn}

; } -export default function App() { - return +export default function Forrit() { + return } ``` -You can edit it directly or open it in a new tab by pressing the "Fork" button in the upper right corner. +Þú getur breytt kóðanum beint eða opnað sandkassan í nýjum flipa með því að smella á „Fork“ hnappinn í efri hægri kantinum. -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) +Flestar síðurnar í React skjalbúnaðinum innihalda sandkassa eins og þennan. Fyrir utan þessa vefsíðu eru til aðrir sandkassar á veraldarvefnum sem styðja React: til dæmis [CodeSandbox](https://codesandbox.io/s/new), [StackBlitz](https://stackblitz.com/fork/react), og [CodePen.](https://codepen.io/pen?&editors=0010&layout=left&prefill_data_id=3f4569d1-1b11-4bce-bd46-89090eed5ddb) -### Try React locally {/*try-react-locally*/} +### Prófaðu React á eigin vél {/*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! +[Sæktu þessa HTML skrá](https://gist.githubusercontent.com/gaearon/0275b1e1518599bbeafcde4722e79ed1/raw/db72dcbf3384ee1708c4a07d3be79860db04bff0/example.html) til að prófa React staðbundið á eigin vél. Prófaðu að opna hana í eigin ritli og í vafranum þínum! -## Start a new React project {/*start-a-new-react-project*/} +## Byrjaðu á nýju React verkefni {/*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) +Skoðaðu [leiðbeiningar um uppsetningu á nýju React verkefni](/learn/start-a-new-react-project) ef þú vilt smíða vefforrit eða vefsíðu frá grunni með React. -## Add React to an existing project {/*add-react-to-an-existing-project*/} +## Bættu React við tiltækt verkefni {/*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) +Skoðaðu [leiðbeiningar um innsetningu á React í tiltæku verkefni](/learn/add-react-to-an-existing-project) ef þú vilt prófa að nota React í núverandi verkefni. -## Next steps {/*next-steps*/} - -Head to the [Quick Start](/learn) guide for a tour of the most important React concepts you will encounter every day. +## Næstu skref {/*next-steps*/} +Kíktu á [fyrstu skref](/learn) til að fá heildaryfirsýn á React og þeim hugtökum sem þú munt koma til með að nota dagsdaglega. diff --git a/src/sidebarHome.json b/src/sidebarHome.json index c1811009f..384b114bd 100644 --- a/src/sidebarHome.json +++ b/src/sidebarHome.json @@ -11,7 +11,7 @@ "path": "/learn" }, { - "title": "Installation", + "title": "Innsetning", "path": "/learn/installation" }, { diff --git a/src/sidebarLearn.json b/src/sidebarLearn.json index 5c6dd388f..a63c4142c 100644 --- a/src/sidebarLearn.json +++ b/src/sidebarLearn.json @@ -21,23 +21,23 @@ ] }, { - "title": "Installation", + "title": "Innsetning", "path": "/learn/installation", "routes": [ { - "title": "Start a New React Project", + "title": "Byrjaðu á nýju React verkefni", "path": "/learn/start-a-new-react-project" }, { - "title": "Add React to an Existing Project", + "title": "Innsetning á React í tiltæku verkefni", "path": "/learn/add-react-to-an-existing-project" }, { - "title": "Editor Setup", + "title": "Uppsetning á ritli", "path": "/learn/editor-setup" }, { - "title": "React Developer Tools", + "title": "Þróunartól fyrir React", "path": "/learn/react-developer-tools" } ] From a8955074dcf1f416823a92784eef0798adddf4c3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Haukur=20P=C3=A1ll=20Hallvar=C3=B0sson?= Date: Sat, 29 Apr 2023 22:08:00 +0000 Subject: [PATCH 2/3] =?UTF-8?q?Byrja=C3=B0u=20=C3=A1=20n=C3=BDju=20React?= =?UTF-8?q?=20verkefni?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/MDX/ExpandableCallout.tsx | 8 +- src/components/MDX/ExpandableExample.tsx | 6 +- .../learn/start-a-new-react-project.md | 92 ++++++++++--------- 3 files changed, 54 insertions(+), 52 deletions(-) diff --git a/src/components/MDX/ExpandableCallout.tsx b/src/components/MDX/ExpandableCallout.tsx index 1fb1ea0ce..e2cdc0f7e 100644 --- a/src/components/MDX/ExpandableCallout.tsx +++ b/src/components/MDX/ExpandableCallout.tsx @@ -18,7 +18,7 @@ interface ExpandableCalloutProps { const variantMap = { deprecated: { - title: 'Deprecated', + title: 'Óæskilegt', Icon: IconWarning, containerClasses: 'bg-red-5 dark:bg-red-60 dark:bg-opacity-20', textColor: 'text-red-50 dark:text-red-40', @@ -26,7 +26,7 @@ const variantMap = { 'linear-gradient(rgba(249, 247, 243, 0), rgba(249, 247, 243, 1)', }, note: { - title: 'Note', + title: 'Athugið', Icon: IconNote, containerClasses: 'bg-green-5 dark:bg-green-60 dark:bg-opacity-20 text-primary dark:text-primary-dark text-lg', @@ -35,7 +35,7 @@ const variantMap = { 'linear-gradient(rgba(245, 249, 248, 0), rgba(245, 249, 248, 1)', }, pitfall: { - title: 'Pitfall', + title: 'Gryfja', Icon: IconPitfall, containerClasses: 'bg-yellow-5 dark:bg-yellow-60 dark:bg-opacity-20', textColor: 'text-yellow-50 dark:text-yellow-40', @@ -43,7 +43,7 @@ const variantMap = { 'linear-gradient(rgba(249, 247, 243, 0), rgba(249, 247, 243, 1)', }, wip: { - title: 'Under Construction', + title: 'Í vinnslu', Icon: IconNote, containerClasses: 'bg-yellow-5 dark:bg-yellow-60 dark:bg-opacity-20', textColor: 'text-yellow-50 dark:text-yellow-40', diff --git a/src/components/MDX/ExpandableExample.tsx b/src/components/MDX/ExpandableExample.tsx index 1ad1e0313..7dfb7913a 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 + Köfum dýpra )} {isExample && ( <> - Example + Dæmi )} @@ -101,7 +101,7 @@ function ExpandableExample({children, excerpt, type}: ExpandableExampleProps) { - {isExpanded ? 'Hide Details' : 'Show Details'} + {isExpanded ? 'Fela' : 'Sjá smáatriði'}
-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. +Ef þig langar að smíða nýja vefsíðu með React frá grunni þá mælum við með að velja einn af þeim römmum (e. framework) sem byggja á React og eru vinsælir í React samfélaginu. Þessi forritasöfn veita þér aðgang að sérkennum sem flest forrit og vefsíður þurfa á endanum, til dæmis beiningu (e. routing), tól til að sækja og vinna með gögn, og verkfæri til að útbúa HTML. -**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. +**Þú þarft að innsetja [Node.js](https://nodejs.org/en/) fyrir staðbundna þróun.** Þú getur *líka* valið að nota Node.js í rekstrarumhverfi, en þú þarft þess ekki. Mörg React forritasöfn styðja útflutning yfir í kyrrlega HTML/CSS/JS möppu. -## Production-grade React frameworks {/*production-grade-react-frameworks*/} +## React rammar sem hægt er að reiða sig á í rekstri {/*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/) er svokallaður heilstafla (e. full-stack) React rammi.** Next.js er fjölhæfur rammi sem gerir þér kleift að smíða React forrit af hvaða stærð sem er--frá kyrrlegri pistlasíðu yfir í flókið og kviklegt forrit. Keyra má eftirfarandi skipun til að skapa nýtt Next.js verkefni frá grunni: npx create-next-app -If you're new to Next.js, check out the [Next.js tutorial.](https://nextjs.org/learn/foundations/about-nextjs) +Skoðaðu [Next.js inngangsleiðbeiningar](https://nextjs.org/learn/foundations/about-nextjs) ef þú hefur ekki notað Next.js áður. -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. +[Vercel](https://vercel.com) sér um þróun og viðhald á Next.js. Þú getur getur [keyrt Next.js vef](https://nextjs.org/docs/deployment) á Node.js vefþjóni, miðlaralausri hýsingu, eða á þínum eigin netþjóni. [Kyrrlega Next.js](https://nextjs.org/docs/advanced-features/static-html-export) vefi má keyra á hvaða kyrrlegri (e. static) hýsingu sem er. ### 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/) er heilstafla React rammi með faldaðri beiningu.** Það gerir þér kleift að skipta vefnum þínum í faldaða hluta sem geta svo hlaðið gögnum samhliða og endurglætt samskiptasvar við aðgerðum notenda. Keyra má eftirfarandi skipun til að skapa nýtt Remix verkefni: 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). +Skoðaðu [þenann stutta kynningarpistil](https://remix.run/docs/en/main/tutorials/blog) og þennan [lengri pistil](https://remix.run/docs/en/main/tutorials/jokes) ef þú hefur ekki áður notað Remix. -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). +[Shopify](https://www.shopify.com/) sér um þróun og viðhald á Remix. Þegar þú býrð til Remix verkefni þarftu að [velja þér hvers lags netþjón þú vilt keyra á](https://remix.run/docs/en/main/guides/deployment). Þú getur keyrt Remix vef á hvaða Node.js eða miðlaralausri hýsingu sem er með því að nota eða skrifa [millistykki](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/) er React rammi til að þróa hraðskreiðar síður sem byggja á gögnum úr CMS (e. content management system) kerfi.** Eitt höfuðmarkmið þess er að einfalda sameiningu efnis, forritaskila, og vefþjónustum í eina vefsíðu. Keyra má eftirfarandi skipun til að skapa Gatsby verkefni: npx create-gatsby -If you're new to Gatsby, check out the [Gatsby tutorial.](https://www.gatsbyjs.com/docs/tutorial/) +Kíktu á [Gatsby kynninguna](https://www.gatsbyjs.com/docs/tutorial/) ef þú hefur ekki prófað Gatsby áður. -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. +[Netlify](https://www.netlify.com) sér um þróun og viðhald Gatsby rammans. Þú getur [keyrt algjörlega kyrrlega Gatsby síðu](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting) á hvaða kyrrlegri hýsingu sem er. Ef þú kýst að nota sérkenni sem krefjast þess að þú notir vefjón þá skaltu ganga úr skugga um að hýsingaraðilinn þinn styðji þær fyrir Gatsby. -### Expo (for native apps) {/*expo*/} +### Expo (fyrir forrit á heimavangi) {/*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/) er React rammi sem gerir þér kleift að skapa alhliða forrit fyrir Android, iOS, og veraldarvefinn með viðmótum sem tilheyra í heimavangi.** Það veitir þér aðgang að SDK (e. software development kit) fyrir [React Native](https://reactnative.dev) sem gerir allt sem snertir inningu á heimavangi mun einfaldara í notkun. Keyra má eftirfarandi skipun til að skapa nýtt Expo verkefni: npx create-expo-app -If you're new to Expo, check out the [Expo tutorial](https://docs.expo.dev/tutorial/introduction/). +Skoðaðu [Expo kynninguna](https://docs.expo.dev/tutorial/introduction/) ef þú hefur aldrei notað Expo áður. -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 (fyrirtækið)](https://expo.dev/about) sér um þróun og viðhald á Expo. Þróun með Expo er ókeypis og þú getur sótt um að fá forritið þitt í Google og Apple forritaveiturnar án takmarkana. Expo býður einnig upp á valkvæðar skýjaþjónustur gegn greiðslu. -#### Can I use React without a framework? {/*can-i-use-react-without-a-framework*/} +#### Get ég notað React án ramma? {/*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.** +Þú getur algjörlega notað React án ramma--það er þannig sem þú mundir [nota React á smærri hluta vefsíðu](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page). **Þrátt fyrir það mælum við með því að þú notir ramma ef þú vilt notfæra þér það sem React hefur fram að færa til hins ýtrasta.** -Here's why. +Hér er nokkrar ástæður fyrir því: -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. +Jafnvel þó að þú þurfir ekki á beiningu (e. routing) að halda eða að tengjast forritaskilum þá muntu þó sennilega þurfa að bæta við einhverjum forritasöfnum fyrir þessar aðgerðir. Eftir því sem tíminn líður stækkar JavaScript knippið með hverju nýju sérkenni og þú munt mögulega þurfa að finna út úr því hvernig þú getur skipt knippinu í smærri búta (e. code splitting). Þá flækist tengingin þín gagnvart forritaskilum með tímanum, og þú gætir lent í „fyrirspurnafossum“ fram og til baka á milli biðlara og vefþjóns sem gera kerfið þitt hægt. Í tíð og tíma kann notendahópurinn þinn að stækka og innihalda fleiri notendur með lélegar nettengingar og ódýrari tölvubúnað, og þú þarft þá kannski að útbúa kyrrlegt HTML út frá íhlutunum þínum til að birta efni hraðar--annaðhvort á netþjóninum eða við smíði. Breytingar af þessu tagi, þ.e. á því hvar kóðinn keyrir, til dæmis þannig að hluti hans keyri á netþjóni eða við smíði, geta verið mjög flóknar. -**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. +**Þetta eru ekki vandamál sem eiga bara við React. Þetta er ástæðan fyrir því að Svelte er með SvelteKit, Vue er með Nuxt, o.s.frv.** Til að leysa þessi vandamál þarf að skrifa kóða gagnvart knippiforriti (e. bundler), beiningu, og forritasafni til að sjá um samskipti við bakenda í gegnum forritaskil. Í upphafi er ekki erfitt að fá þessa hluti til að virka sæmilega saman, en það verður fljótt flóknara eftir því sem vefur vex og þarfir breytast. Þú gætir viljað senda minnsta mögulega kóðann en á sama tíma að gera það í einni brautartímaferð á milli framenda og bakenda, samhliða öðrum gögnum sem síðan þarf á að halda. Þá getur einnig verið mikilvægt að síðan sé nothæf áður en JavaScript kóðinn byrjar að keyra, til að styðja stighækkandi betrumbætur (e. progressive enhancement). Það kann að þurfa að útfæra möppu með kyrrlegum HTML skrám fyrir markaðssetningarsíðurnar sem er hægt að hýsa hvar sem er og virkar þó að JavaScript sé ekki leyft að keyra. Það tekur tíma að útfæra alla þessa virkni upp á eigin spýtur. -**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 rammakerfi sem eru útlistuð á þessari síðu leysa þessi vandamál sjálfvirkt svo að þú þurfir ekki að endurskapa þessa virkni.** Þau gera þér kleift að byrja smátt og þau stækka með þörfum þínum. Hver rammi er með sitt eigið samfélag og það er auðveldara að finna svör og uppfæra tól. Rammakerfi veita verkefninu líka traust burðarvirki, sem hjálpar þér og öðrum að viðhalda samhengi og þekkingu á milli verkefna. Í samanburði er auðvelt að festast í því að þurfa að nota óstuddar útgáfur af forritasöfnum og þú endar í raun á að skapa þitt eigið rammakerfi--en þó ramma sem enginn annar notar og enginn mun uppfæra fyrir þig (og ef hann er eitthvað í líkingu við það sem við höfum þróað áður, verr skipulagðan). + +Ef þetta er ekki nóg til að sannfæra þig, eða ef forritið þitt er með óvenjulegar kröfur sem þessir rammar leysa ekki vel og þig langar að útfæra þína eigin lausn, þá getum við ekki stöðvað þig--gerðu þetta bara! Gríptu `react` og `react-dom` frá npm, smíðaðu forritið þitt með knippikerfi eins og [Vite](https://vitejs.dev/) eða [Parcel](https://parceljs.org/), og bættu öðrum tólum við eftir þörf, þ.e. beiningu, kyrrlega útfærslu eða bakendavörpun (e. server-side rendering), o.fl. -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. -## Bleeding-edge React frameworks {/*bleeding-edge-react-frameworks*/} +## Nýjasta nýtt í React rammakerfum {/*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) +React teymið hefur nýverið komist að því að nánari samhæfing á React og rammakerfum (sérstaklega í tengslum við beiningu, knippi og smíði, og bakendatækni) er okkar stærsta tækifæri til að hjálpa notendum að búa til betri vefsíður. Next.js teymið hefur samþykkt að starfa nánar með okkur í rannsóknum, þróun, sameiningu, og prófunum á nýjum sérkennum sem eru óháð einstökum rammakerfum eins og [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!) +Þessi virkni nálgast meir á hverjum degi að verða tilbúin í rekstrarumhverfi og við höfum rætt við önnur teymi sem stunda þróun á knippikerfum og römmum til að sameina þau. Við vonumst til þess að eftir eitt eða tvö ár séu öll kerfin sem eru útlistuð hér með beinan stuðning fyrir þessa virkni. (Láttu okkur vita ef þú ert að þróa rammakerfi og hefur áhuga á að sameina krafta okkar og prófa þessa virkni!) ### 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. +**[App Router tæknin í Next.js](https://beta.nextjs.org/docs/getting-started) er endurhönnun á forritaskilunum í Next.js með það að leiðarljósi að uppfylla draumsýn React teymisins um heilstafla högun.** Hún gerir þér kleift að sækja gögn í ósamstillt íhlutum sem keyra á netþjóninum eða jafnvel á meðan á smíði stendur. + +[Vercel](https://vercel.com) sér um þróun og viðhald á Next.js. Þú getur [keyrt Next.js vef](https://vercel.com/) á hvaða Node.js eða biðlaralausri hýsingu sem er, eða á þínum eigin netþjóni. Next.js styður einnig [kyrrlegan útflutning](https://beta.nextjs.org/docs/configuring/static-export) sem krefst ekki netþjóns. -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'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). +App Router tæknin í Next.js er **í betaprófunum eins og stendur og ekki er mælt með notkun hennar í rekstri** (mars 2023). Til að prófa þessa tækni í tiltæku Next.js verkefni má [fylgja þessum leiðbeiningum að þrepaskiptum kerfaskiptum](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*/} +#### Hver er framtíðarsýn React teymisins í tengslum við heilstafla (e. full-stack) arkítektúr? {/*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. +App Router knippikerfið í Next.js útfærir opinberu [React Server Components hönnunarlýsinguna](https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md). Þetta gerir þér kleift að blanda inningu við smíði, á netþjóni, og gagnvirkum íhlutum í sama React trénu. -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: +Þú getur til dæmis skrifað React íhlut sem keyrir aðeins á netþjóninum sem `async` fall sem les beint úr gagnagrunni eða skrá. Þá geturðu flutt þessi gögn niður tréð í gagnvirka íhluti: ```js -// This component runs *only* on the server (or during the build). -async function Talks({ confId }) { - // 1. You're on the server, so you can talk to your data layer. API endpoint not required. - const talks = await db.Talks.findAll({ confId }); +// Þessi íhluti keyrir *aðeins* á vefþjóninum (eða við smíði). +async function Fyrirlestrar({ kennimerkiRáðstefnu }) { + // 1. Þú ert á vefþjóninum, svo þú getur talað við gagnagrunninn beint. Forritaskil eru óþarfi. + const fyrirlestrar = await db.Fyrirlestrar.findAll({ kennimerkiRáðstefnu }); - // 2. Add any amount of rendering logic. It won't make your JavaScript bundle larger. - const videos = talks.map(talk => talk.video); + // 2. Bættu hvaða virkni við sem þörf er á. Það hefur ekki áhrif á stærð JavaScript knippisins. + const myndskeið = fyrirlestrar.map(fyrirlestur => fyrirlestur.myndskeið); - // 3. Pass the data down to the components that will run in the browser. - return ; + // 3. Flyttu gögnin niður í gegnum íhlutina sem inntir eru í vafranum. + 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: +App Router kerfið í Next.js sameinar einnig [gagnaflutning og Suspense](/blog/2022/03/29/react-v18#suspense-in-data-frameworks). Þetta gerir þér kleift að tilgreina tímabundna hleðslustöðu (e. loading state) fyrir mismunandi hluta af viðmótinu beint í React trénu: ```js -}> - +}> + ``` -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 Components og Suspense eru ekki Next.js sérkenni heldur React sérkenni. Á móti kemur að það er ekkert smáræði að útfæra þessa virkni í rammakerfi og krefur mikillar vinnu. Eins og staðan er nú þá er App Router útfærslan í Next.js sú sem er lengst komin. React teymið starfar náið með forriturunum sem vinna að knippiforritinu til að gera þessi sérkenni auðveldari að útfæra í síðari rammakerfum. From 9c550f3f6506a548a2d2195ab63430cabd40f8de Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Haukur=20P=C3=A1ll=20Hallvar=C3=B0sson?= Date: Mon, 1 May 2023 22:21:08 +0000 Subject: [PATCH 3/3] =?UTF-8?q?Fleiri=20s=C3=AD=C3=B0ur=20og=20uppf=C3=A6r?= =?UTF-8?q?slur?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Layout/HomeContent.js | 4 +- .../learn/add-react-to-an-existing-project.md | 113 +++++++++--------- src/content/learn/editor-setup.md | 64 +++++----- src/content/learn/index.md | 4 +- src/content/learn/react-developer-tools.md | 50 ++++---- src/sidebarHome.json | 4 +- src/sidebarLearn.json | 4 +- 7 files changed, 124 insertions(+), 119 deletions(-) diff --git a/src/components/Layout/HomeContent.js b/src/components/Layout/HomeContent.js index 6b85ba4dd..ba5891713 100644 --- a/src/components/Layout/HomeContent.js +++ b/src/components/Layout/HomeContent.js @@ -139,8 +139,8 @@ export function HomeContent() { type="primary" size="lg" className="w-full sm:w-auto justify-center" - label="Lærðu React"> - Lærðu React + label="Lærðu á React"> + Lærðu á React -If you want to add some interactivity to your existing project, you don't have to rewrite it in React. Add React to your existing stack, and render interactive React components anywhere. +Þú þarft ekki að endurskrifa tiltækt verkefni til að auka gagnvirknina. Þú getur bætt React við núverandi tæknistafla og birt React íhluti hvar sem er. -**You need to install [Node.js](https://nodejs.org/en/) for local development.** Although you can [try React](/learn/installation#try-react) online or with a simple HTML page, realistically most JavaScript tooling you'll want to use for development requires Node.js. +**Þú verður að innsetja [Node.js](https://nodejs.org/en/) fyrir staðbundna þróun.** Þrátt fyrir að þú getir [prófað React](/learn/installation#try-react) á Netinu eða með einfaldri HTML síðu þá munu flest tólin sem þú þarft í þróunarumhverfinu þurfa á Node.js að halda. -## Using React for an entire subroute of your existing website {/*using-react-for-an-entire-subroute-of-your-existing-website*/} +## Notkun á React fyrir undirsíðu á núverandi síðu {/*using-react-for-an-entire-subroute-of-your-existing-website*/} -Let's say you have an existing web app at `example.com` built with another server technology (like Rails), and you want to implement all routes starting with `example.com/some-app/` fully with React. +Gefum okkur að þú sért með tiltæka vefþjónustu á `example.com` sem var skrifuð með bakendaþjónustu eins og Rails, og þú viljir útfæra allar beiningar sem byrja á `example.com/eitthvað-forrit` með React. -Here's how we recommend to set it up: +Þá mælum við með þessari nálgun: -1. **Build the React part of your app** using one of the [React-based frameworks](/learn/start-a-new-react-project). -2. **Specify `/some-app` as the *base path*** in your framework's configuration (here's how: [Next.js](https://nextjs.org/docs/api-reference/next.config.js/basepath), [Gatsby](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/)). -3. **Configure your server or a proxy** so that all requests under `/some-app/` are handled by your React app. +1. **Smíðaðu React hlutann** með einhverju [React rammakerfi](/learn/start-a-new-react-project). +2. **Tilgreindu `/eitthvað-forrit` sem *grunnslóð*** í stillingum rammans sem þú valdir (sjá hér: [Next.js](https://nextjs.org/docs/api-reference/next.config.js/basepath) eða [Gatsby](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/)). +3. **Stilltu vefþjóninn eða vefselið** á þann veg að allar beiðnir sem hefjist á `/eitthvað-forrit/` séu birtar í React forritinu þínu. -This ensures the React part of your app can [benefit from the best practices](/learn/start-a-new-react-project#can-i-use-react-without-a-framework) baked into those frameworks. +Þetta tryggir að React hlutinn í vefsíðunni þinni [fylgi þróunarstöðlunum](/learn/start-a-new-react-project#can-i-use-react-without-a-framework) sem eru innbyggðir í þessum römmum. -Many React-based frameworks are full-stack and let your React app take advantage of the server. However, you can use the same approach even if you can't or don't want to run JavaScript on the server. In that case, serve the HTML/CSS/JS export ([`next export` output](https://nextjs.org/docs/advanced-features/static-html-export) for Next.js, default for Gatsby) at `/some-app/` instead. +Sum React rammakerfi eru heilstafla (e. full-stack) og gera þér kleift að skrifa bakendakóða líka. Hvort sem það er eitthvað sem þú vilt nýta þer eða ekki þá geturðu fylgt sömu nálgunum. Til dæmis er hægt að birta kyrrlegt HTML, CSS, og JS ([`next export` úttak](https://nextjs.org/docs/advanced-features/static-html-export) í Next.js, sjálfgefið í Gatsby) á síðunni `/eitthvað-forrit`. -## Using React for a part of your existing page {/*using-react-for-a-part-of-your-existing-page*/} +## Notkun React á hluta vefsíðu {/*using-react-for-a-part-of-your-existing-page*/} -Let's say you have an existing page built with another technology (either a server one like Rails, or a client one like Backbone), and you want to render interactive React components somewhere on that page. That's a common way to integrate React--in fact, it's how most React usage looked at Meta for many years! +Gefum okkur að þú sért með vefsíðu sem er skrifuð í annarri tækni (annaðvort bakendatækni eins og Rails eða framendatækni eins og Backbone), og að þú viljir birta gagnvirka React íhluti einhvers staðar á síðunni. Þetta er tiltölulega algeng nálgun til að nota React--í raun var það á tímabili nákvæmlega þannig sem Meta notaði React! -You can do this in two steps: +Þú getur gert þetta í tveimur skrefum: -1. **Set up a JavaScript environment** that lets you use the [JSX syntax](/learn/writing-markup-with-jsx), split your code into modules with the [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) / [`export`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export) syntax, and use packages (for example, React) from the [npm](https://www.npmjs.com/) package registry. -2. **Render your React components** where you want to see them on the page. +1. **Útbúðu JavaScript umhverfi** sem gerir þér kleift að nota [JSX málskipan](/learn/writing-markup-with-jsx), deila kóðanum þínum í einingar með [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) og [`export`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export) málskipan, og notaðu forritasöfn (til dæmis, React) frá [npm](https://www.npmjs.com/) pakkaskránni. +2. **Birtu React íhlutina þína** þar sem þú vilt hafa þá á síðunni. -The exact approach depends on your existing page setup, so let's walk through some details. +Nákvæm útfærsla á þessu veltur á núverandi uppsetningu hjá þér, svo við skulum fara aðeins nánar út í smáatriðin. -### Step 1: Set up a modular JavaScript environment {/*step-1-set-up-a-modular-javascript-environment*/} +### Fyrsta skref: Skiptu JavaScript umhverfinu þínu í einingar {/*step-1-set-up-a-modular-javascript-environment*/} -A modular JavaScript environment lets you write your React components in individual files, as opposed to writing all of your code in a single file. It also lets you use all the wonderful packages published by other developers on the [npm](https://www.npmjs.com/) registry--including React itself! How you do this depends on your existing setup: +Með því að skipta JavaScript kóða í einingar er hægt að nota margar skrár í stað þess að skrifa allan kóðann í eina skrá. Það gerir þér líka kleift að nota öll forritasöfnin sem eru aðgengileg á [npm](https://www.npmjs.com/) pakkaskránni--þar á meðal React sjálft! Nálgunin veltur á núverandi uppsetningu: -* **If your app is already split into files that use `import` statements,** try to use the setup you already have. Check whether writing `
` in your JS code causes a syntax error. If it causes a syntax error, you might need to [transform your JavaScript code with Babel](https://babeljs.io/setup), and enable the [Babel React preset](https://babeljs.io/docs/babel-preset-react) to use JSX. +* **Ef vefurinn þinn er nú þegar skiptur í mismunandi skrár sem nota `import` setningar** reyndu þá að halda áfram að nota sama kerfi. Athugaðu hvort það virki að skrifa `
` án þess að það komi málskipanvilla. Ef þetta veldur villu þá kann að vera að þú þurfir að [umbreyta JavaScript kóðanum með Babel](https://babeljs.io/setup), og virkja [Babel React forstillinguna](https://babeljs.io/docs/babel-preset-react) til að nota JSX. -* **If your app doesn't have an existing setup for compiling JavaScript modules,** set it up with [Vite](https://vitejs.dev/). The Vite community maintains [many integrations with backend frameworks](https://github.com/vitejs/awesome-vite#integrations-with-backends), including Rails, Django, and Laravel. If your backend framework is not listed, [follow this guide](https://vitejs.dev/guide/backend-integration.html) to manually integrate Vite builds with your backend. +* **Ef vefurinn þinn er ekki með neitt kerfi til að þýða JavaScript einingar** þá skaltu prófa að nota [Vite](https://vitejs.dev/) til þess. Vite samfélagið viðheldur [margs konar samtengingum við bakendaramma](https://github.com/vitejs/awesome-vite#integrations-with-backends), m.a. Rails, Django, og Laravel. Ef bakendaramminn þinn er ekki útlistaður þá skaltu [fylgja þessum leiðbeiningum](https://vitejs.dev/guide/backend-integration.html) til að tengja Vite við bakendann þinn handvirkt. -To check whether your setup works, run this command in your project folder: +Til að kanna hvort kerfið þitt virki geturðu keyrt eftirfarandi skipun í aðalmöppu verkefnisins: npm install react react-dom -Then add these lines of code at the top of your main JavaScript file (it might be called `index.js` or `main.js`): +Bættu svo þessum kóða efst í aðal JavaScript skránni (hún ætti að heita `index.js` eða kannski `main.js`): ```html index.html hidden - My app + Vefurinn minn - + ``` @@ -70,63 +70,64 @@ Then add these lines of code at the top of your main JavaScript file (it might b ```js index.js active import { createRoot } from 'react-dom/client'; -// Clear the existing HTML content +// Fjarlægjum núverandi efni. document.body.innerHTML = '
'; -// Render your React component instead +// Birtum React íhlut þess í stað. const root = createRoot(document.getElementById('app')); -root.render(

Hello, world

); +root.render(

Halló, heimur!

); ``` -If the entire content of your page was replaced by a "Hello, world!", everything worked! Keep reading. +Ef efnið á síðunni hvarf og „Halló, heimur!“ kom þess í stað þá virkaði breytingin og þú getur haldið áfram að lesa þessar leiðbeiningar. -Integrating a modular JavaScript environment into an existing project for the first time can feel intimidating, but it's worth it! If you get stuck, try our [community resources](/community) or the [Vite Chat](https://chat.vitejs.dev/). +Fyrst um sinn getur verið hálfógnvekjandi að reyna að útfæra einingamiðað JavaScript umhverfi, en það er þess virði! Prófaðu að skoða [efnið frá React samfélaginu](/community) eða [Vite Chat](https://chat.vitejs.dev/) ef þér finnst þú ekki ná árangri. -### Step 2: Render React components anywhere on the page {/*step-2-render-react-components-anywhere-on-the-page*/} +### Annað skref: Birtu React íhluti hvar sem er á síðunni {/*step-2-render-react-components-anywhere-on-the-page*/} -In the previous step, you put this code at the top of your main file: +Í skrefinu á undan settum við þennan kóða efst í aðalskránni: -```js +```js index.js active import { createRoot } from 'react-dom/client'; -// Clear the existing HTML content +// Fjarlægjum núverandi efni. document.body.innerHTML = '
'; -// Render your React component instead +// Birtum React íhlut þess í stað. const root = createRoot(document.getElementById('app')); -root.render(

Hello, world

); +root.render(

Halló, heimur!

); ``` -Of course, you don't actually want to clear the existing HTML content! +En að sjálfsögðu viljum við ekki henda öllu efninu af síðunni! -Delete this code. +Eyddu þessum kóða. Instead, you probably want to render your React components in specific places in your HTML. Open your HTML page (or the server templates that generate it) and add a unique [`id`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) attribute to any tag, for example: +Þess í stað viltu sennilega birta React íhluti á ákveðnum stöðum. Opnaðu HTML síðuna (eða sniðmátið sem bakendinn útbýr) og bættu við einstöku [`id`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) eigindi við hvaða merki sem er á síðunni, til dæmis: ```html - - - + + + ``` -This lets you find that HTML element with [`document.getElementById`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById) and pass it to [`createRoot`](/reference/react-dom/client/createRoot) so that you can render your own React component inside: +Með þessu móti geturðu fundið eininguna í HTML skránni með [`document.getElementById`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById) og fært [`createRoot`](/reference/react-dom/client/createRoot) hana til að birta React íhlut inni í henni: ```html index.html - My app + Vefurinn minn -

This paragraph is a part of HTML.

- -

This paragraph is also a part of HTML.

+

Þessi efnisgrein er hluti af HTML skránni.

+ +

Þessi efnisgrein er líka hluti af HTML skránni.

``` @@ -134,22 +135,22 @@ This lets you find that HTML element with [`document.getElementById`](https://de ```js index.js active import { createRoot } from 'react-dom/client'; -function NavigationBar() { - // TODO: Actually implement a navigation bar - return

Hello from React!

; +function Valmynd() { + // Síðar: útfærum raunverulegu valmyndina! + return

Halló frá React!

; } -const domNode = document.getElementById('navigation'); -const root = createRoot(domNode); -root.render(); +const domHnútur = document.getElementById('valmynd'); +const rót = createRoot(domHnútur); +rót.render(); ``` -Notice how the original HTML content from `index.html` is preserved, but your own `NavigationBar` React component now appears inside the `