From 156ead69faf0031eef3bc67d61b7d73bb15dbf7a Mon Sep 17 00:00:00 2001 From: Vlad Kovaliov Date: Mon, 12 Jun 2023 00:43:24 +0300 Subject: [PATCH 01/11] Belarusian translation: Start a new React project --- .../learn/start-a-new-react-project.md | 85 ++++++++++--------- 1 file changed, 44 insertions(+), 41 deletions(-) diff --git a/src/content/learn/start-a-new-react-project.md b/src/content/learn/start-a-new-react-project.md index 280a1378e..50c0198fc 100644 --- a/src/content/learn/start-a-new-react-project.md +++ b/src/content/learn/start-a-new-react-project.md @@ -1,126 +1,130 @@ --- -title: Start a New React Project +title: Пачнанне новы React праект --- -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. +Калі вы хочаце стварыць новую праграму або новы вэб-сайт цалкам на React, мы рэкамендуем выбраць адзін з фрэймворкаў на базе React, папулярных у абшыны. Фрэймворк забяспечваюць функцыі, якія ў патрэбны большасці праграм і сайтаў, уключаючы маршрутызацыю, выбарку даных і генерацыю 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. +**Вам трэба ўсталяваць [Node.js](https://nodejs.org/en/) для лакальнага развіцця.** Вы можаце *таксама* выкарыстоўваць Node.js у вытворчасці, але гэта неабавязкова. Многія React фрэймворкі падтрымліваюць экспарт у статычны HTML/CSS/JS. + +[//]: <> (TODO: Many React frameworks support export to a static HTML/CSS/JS folder.?) +[//]: <> (TODO: ???) ## Production-grade React frameworks {/*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/) гэта поўны стэк React фрэймворка.** Ён разнабокавы і дазваляе ствараць React програму любога памеру - ад статычнага блога да складанай дынамічнай програмы. Каб стварыць новы Next.js праект, запусціце ў вашым тэрмінале: npx create-next-app -If you're new to Next.js, check out the [Next.js tutorial.](https://nextjs.org/learn/foundations/about-nextjs) +[//]: <> (TODO: tutorial Next.js?) +Калі вы новы у Next.js, азнаёмцеся з [падручнікам па Next.js.](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 падтрымліваецца [Vercel](https://vercel.com/). Вы можаце [разгортваць праграму Next.js](https://nextjs.org/docs/deployment) на любым Node.js або бессерверным хостынгу, або на вашым уласным серверы. [Цалкам статычныя праграма на Next.js](https://nextjs.org/docs/advanced-features/static-html-export) можна разгарнуць на любым статычным хостынгу. ### 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/) гэта React фрэймворк з поўным стэкам і ўкладзенай маршрутызацыяй.** Ён дазваляе разбіваць вашу праграму на ўкладзеныя часткі, якія могуць загружаць дадзеныя паралельна і абнаўляць у адказ на дэеянні карыстальніка. Каб стварыць новы Remix праект, запусціце: 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). +Калі вы новы у Remix, азнаёмцеся з [падручнікам па блогу](https://remix.run/docs/en/main/tutorials/blog) (кароткі) і [падручнікам па праграме] (https://remix. run/docs/en/main/tutorials/jokes) (доўгі). -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). +[//]: <> (TODO: развіцця або разгортвання?) +Remix падтрымліваецца [Shopify](https://www.shopify.com/). Калі вы ствараеце Remix праект, вам трэба [выбраць мішень развіцця](https://remix.run/docs/en/main/guides/deployment). Вы можаце разгарнуць Remix праграму на любым Node.js або бессерверным хостынгу, выкарыстоўваючы або напісаўшы [адаптар](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/) гэта React фрэймворк для хуткіх CMS вэб-сайтаў.** У яго багатая экасістэма плагінаў і ўзровень GraphQL даных спрашчаюць інтэграцыю змесціва, API і сэрвісаў на адным вэб-сайце. Каб стварыць новы Gatsby праект, запусціце: npx create-gatsby -If you're new to Gatsby, check out the [Gatsby tutorial.](https://www.gatsbyjs.com/docs/tutorial/) +Калі вы новы у Gatsby, азнаёмцеся з [падручнікам па Гэтсбі.](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 падтрымліваецца [Netlify](https://www.netlify.com/). Вы можаце [разгарнуць цалкам статычны Gatsby сайт](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting) на любым статычным хостынгу. Калі вы выкарыстоўваеце функцый толькі для сервера, пераканайцеся, што ваш правайдэр хостынгу падтрымлівае іх для Gatsby. ### Expo (for native apps) {/*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/) гэта React фрэймворк, які дазваляе ствараць універсальныя праграмы для Android, iOS і вэб-праграмы з сапраўды ўласнымі інтэрфейсам.** Ён забяспечвае SDK для [React Native](https://reactnative.dev/), што палягчае выкарыстанне натыўных частак. Каб стварыць новы Expo праект, запусціце: npx create-expo-app -If you're new to Expo, check out the [Expo tutorial](https://docs.expo.dev/tutorial/introduction/). +Калі вы новы у Expo, азнаёмцеся з [падручнікам Expo](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 падтрымліваецца [Expo (кампаніі)](https://expo.dev/about). Стварэнне праграм з дапамогай Expo бясплатнае, і вы можаце адпраўляць іх у крамы прыкладанняў Google і Apple без абмежаванні. Expo дадаткова прадастаўляе платныя воблачныя паслугі. -#### Can I use React without a framework? {/*can-i-use-react-without-a-framework*/} +#### Ці могу я выкарыстоўваць React без фрэймворка? {/*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.** +Вы можаце выкарыстоўваць React без фрэймворка - як бы вы [выкарыстоўвалі React для часткі вашай старонкі.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) **Аднак, калі вы ствараеце новую праграму або сайт цалкам з React, мы рэкамендуем выкарыстоўваць фрэймворк.** -Here's why. +Вось чаму. -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. +[//]: <> (TODO: new feature?) +Нават калі спачатку вам не патрэбна маршрутызацыя або выбарка даных, вы, верагодна, захочаце дадаць для іх некаторыя бібліятэкі. Як ваш JavaScript расце з кожнай новай функцыяй, вам магчыма прыйдзецца разабрацца, як падзяліць код для кожнага маршруту асобна. Па меры таго, як вашыя патрэбы ў выбарцы даных становяцца складанымі, вы, верагодна, сутыкнецеся з вадаспадамі сеткі сервер-кліент, якія робяць вашу праграму вельмі павольнай. Паколькі ваша аўдыторыя ўключае больш карыстальнікаў з дрэнным падключэннем сеткі і прыладамі нізкага класа, вам можа спатрэбіцца згенераваць HTML з вашых кампанентаў для ранняга адлюстравання кантэнту - альбо на серверы, або падчас зборкі. Змяніць налады для выканання часткі вашага кода на серверы або падчас зборкі можа быць вельмі складана. -**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. +**Гэтыя праблемы не звязаны з React. Вось чаму ў Svelte ёсць SvelteKit, а у Vue ёсць Nuxt і далей.** Каб самастойна вырашыць гэтыя праблемы, вам спатрэбіцца інтэграваць зборшчык з маршрутызатарам і бібліятэкай выбарцы даных. Нескладана усталявать першапачатковую наладу, але ёсць шмат тонкасці, звязаных з стварэннем праграмы, якая хутка загружаецца, нават калі яна расце з цягам часу. Вы захочаце адправіць мінімальны аб'ём кода прыкладання, але зрабіць гэта за адзін раз кліент-сервер, паралельна з любымі дадзенымі, неабходнымі для старонкі. Верагодна, вы захочаце, каб старонка была інтэрактыўнай яшчэ да запуску кода JavaScript, каб падтрымліваць прагрэсіўнае паляпшэнне. Магчыма, вы захочаце стварыць цалкую папку з статычнымі файламі HTML для вашэго маркетынгавых старонак, якія можна размясціць дзе заўгодна і пры гэтым працаваць з адключаным JavaScript. Стварэнне гэтых магчымасцей самастойна патрабуе сур'ёзнай працы. -**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 фреймворкі на гэтай старонцы вырашаюць гэтыя праблемы па змаўчанні, без дадатковай працы з вашага боку.** Яны дазваляюць вам пачаць вельмі эканомна, а потым маштабаваць праграму ў адпаведнасці з вашымі патрэбамі. Кожны React фрэймворк мае суполку, таму знаходзіць адказы на пытанні і абнаўляць інструменты прасцей. Фреймворкі таксама надае структуру вашаму коду, дапамагаючы вам і іншым захоўваць кантэкст і навыкі паміж рознымі праектамі. Наадварот, пры карыстальнай наладзе гэта лягчэй затрымацца на непадтрымоўваных залежнасцяў, і вы, па сутнасці, створыце ваш ўласный фреймворк без супольнасці або абнаўлення (і калі гэта нешта падобнае да тых, якія мы зрабілі ў мінулае, больш бессістэмна). -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. +Калі вы яшчэ не перакананыя, або ваша праграма мае незвычайныя абмежаванні, якія не абслугоўваюцца добра гэтымі фрэймворкамі, і вы хочаце запусціць сваю ўласную наладу, мы не можам вас спыніць - дерзайте! Вазьміце `react` і `react-dom` з npm, наладзьце свой уласны працэс зборкі з дапамогай зборшчыка, напрыклад [Vite](https://vitejs.dev/) або [Parcel](https://parceljs.org/), і па меры неабходнасці дадавайце іншыя інструменты для маршрутызацыі, статычнай генерацыі або візуалізацыі на баку сервера і далей. -## Bleeding-edge React frameworks {/*bleeding-edge-react-frameworks*/} +## Перадавыя React фрэймворкі {/*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 удасканальваць, мы зразумелі, што больш цесная інтэграцыя React з фрэймворкамі (у прыватнасці, з маршрутызацыяй, групаваннем і сервернымі тэхналогіямі) - гэта наша самая вялікая магчымасць дапамагчы React карыстальнікам ствараць лепшыя прыкладанні. Каманда Next.js пагадзілася супрацоўнічаць з намі ў даследаванні, распрацоўцы, інтэграцыі і тэсціраванні сучасных функцый React, якія не залежаць ад фрэймворка, такіх як [Кампаненты сервера React.](/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!) +Гэтыя функцыі з кожным днём набліжаюцца да вытворчасці, і мы вялі перамовы з іншымі распрацоўшчыкамі зборшчыкаў і фрэймворкаў аб іх інтэграцыі. Мы спадзяемся, што праз год але два ўсе фрэймворкі, пералічаныя на гэтай старонцы, будуць мець поўную падтрымку гэтых функцый. (Калі вы аўтар фрэймворка і зацікаўлены ў супрацоўніцтве з намі для эксперыментаў з гэтымі функцыямі, паведаміце нам аб гэтым!) -### Next.js (App Router) {/*nextjs-app-router*/} +### Маршрутызатар Next.js прыкладанняў {/*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 прыкладанняў](https://beta.nextjs.org/docs/getting-started) гэта рэдызайн запуску Next.js API, які выконвае бачанне архітэктуры поўнага стэка React каманды.** Гэта дазваляе вам атрымліваць дадзеныя ў сінхронных кампанентах, якія працуюць на серверы або нават падчас зборкі. -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 падтрымліваецца [Vercel](https://vercel.com/). Вы можаце [разгарнуць Next.js праграму](https://nextjs.org/docs/deployment) на любым Node.js або бессерверным хостынгу, або на вашым уласным серверы. Next.js таксама падтрымлівае [статычны экспарт](https://beta.nextjs.org/docs/configuring/static-export), які не патрабуе сервера. -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 прыкладанняў **у цяперашні час знаходзіцца ў бэта-версіі і пакуль не рэкамендуецца для вытворчасці** (па стане на сакавік 2023 году). Каб паэксперыментаваць з ім у існуючым праекце Next.js, [прытрымлівайцеся гэтага кіраўніцтва па паступовай міграцыі](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*/} +#### Якія функцыі складаюць бачанне поўнай архітэктуры React каманды? {/*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 цалкам рэалізуе афіцыйную [React Server спецыфікацыя кампанентаў](https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md). Гэта дазваляе змяшаць кампаненты часу зборкі, серверныя і інтэрактыўныя кампаненты ў адным дрэве React. -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: +Напрыклад, вы можаце напісаць толькі серверны кампанент React як `async` функцыю, якая чытае з базы дадзеных або з файла. Затым вы можаце перадаваць дадзеныя з яго ў інтэрактыўныя кампаненты: ```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. + // 1. Вы знаходзіцеся на серверы, таму можаце размаўляць са сваім узроўнем дадзеных. API не патрабуецца. const talks = await db.Talks.findAll({ confId }); - // 2. Add any amount of rendering logic. It won't make your JavaScript bundle larger. + // 2. Дадайце любую колькасць логікі рэндэрынгу. Гэта не павялічыць ваш JavaScript пакет. const videos = talks.map(talk => talk.video); - // 3. Pass the data down to the components that will run in the browser. + // 3. Перадайце дадзеныя кампанентам, якія будуць працаваць у браўзеры. 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: +Маршрутызатар прыкладанняў Next.js таксама інтэгруе [атрыманне даных з Suspense](/blog/2022/03/29/react-v18#suspense-in-data-frameworks). Гэта дазваляе вам вызначаць стан загрузкі (напрыклад, запаўняльнік шкілета) для розных частак вашага карыстальніцкага інтэрфейсу непасрэдна ў вашым дрэве React: ```js }> @@ -128,6 +132,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. - +Серверныя кампаненты і Suspense - гэта React функцыі, а не Next.js функцыі. Аднак іх прыняцце на рамачным узроўні патрабуе ўдзелу і нетрывіяльнай працы па рэалізацыі. На дадзены момант Маршрутызацыя Next.js прыкладання з'яўляецца найбольш поўнай рэалізацыяй. Каманда React працуе з распрацоўшчыкамі зборнікаў, каб палегчыць укараненне гэтых функцый у фрэймворкі наступнага пакалення. From 443246eadae2e5c024d1e6f5417ba9466223cae1 Mon Sep 17 00:00:00 2001 From: Vlad Kovaliov Date: Sun, 18 Jun 2023 21:47:03 +0300 Subject: [PATCH 02/11] updates --- .../learn/start-a-new-react-project.md | 21 +++++++------------ 1 file changed, 7 insertions(+), 14 deletions(-) diff --git a/src/content/learn/start-a-new-react-project.md b/src/content/learn/start-a-new-react-project.md index 50c0198fc..f61d5b08c 100644 --- a/src/content/learn/start-a-new-react-project.md +++ b/src/content/learn/start-a-new-react-project.md @@ -10,14 +10,11 @@ title: Пачнанне новы React праект -**Вам трэба ўсталяваць [Node.js](https://nodejs.org/en/) для лакальнага развіцця.** Вы можаце *таксама* выкарыстоўваць Node.js у вытворчасці, але гэта неабавязкова. Многія React фрэймворкі падтрымліваюць экспарт у статычны HTML/CSS/JS. - -[//]: <> (TODO: Many React frameworks support export to a static HTML/CSS/JS folder.?) +**Вам трэба ўсталяваць [Node.js](https://nodejs.org/en/) для лакальнага разгортванне.** Вы можаце *таксама* выкарыстоўваць Node.js у вытворчасці, але гэта неабавязкова. Многія React фрэймворкі падтрымліваюць экспарт у статычны HTML/CSS/JS. -[//]: <> (TODO: ???) -## Production-grade React frameworks {/*production-grade-react-frameworks*/} +## React фрэймворкі, гатовыя для выкарыстання ў працоўным асяроддзі {/*production-grade-react-frameworks*/} ### Next.js {/*nextjs*/} @@ -27,10 +24,7 @@ title: Пачнанне новы React праект npx create-next-app -[//]: <> (TODO: tutorial Next.js?) -Калі вы новы у Next.js, азнаёмцеся з [падручнікам па Next.js.](https://nextjs.org/learn/foundations/about-nextjs) - -Next.js падтрымліваецца [Vercel](https://vercel.com/). Вы можаце [разгортваць праграму Next.js](https://nextjs.org/docs/deployment) на любым Node.js або бессерверным хостынгу, або на вашым уласным серверы. [Цалкам статычныя праграма на Next.js](https://nextjs.org/docs/advanced-features/static-html-export) можна разгарнуць на любым статычным хостынгу. +Next.js падтрымліваецца [Vercel](https://vercel.com/). Вы можаце [пачытаць інструкцыю па Next.js](https://nextjs.org/docs/deployment) на любым Node.js або бессерверным хостынгу, або на вашым уласным серверы. [Цалкам статычныя праграма на Next.js](https://nextjs.org/docs/advanced-features/static-html-export) можна разгарнуць на любым статычным хостынгу. ### Remix {/*remix*/} @@ -40,10 +34,9 @@ Next.js падтрымліваецца [Vercel](https://vercel.com/). Вы мо npx create-remix -Калі вы новы у Remix, азнаёмцеся з [падручнікам па блогу](https://remix.run/docs/en/main/tutorials/blog) (кароткі) і [падручнікам па праграме] (https://remix. run/docs/en/main/tutorials/jokes) (доўгі). +Калі вы новы у Remix, азнаёмцеся з [інструкцыя па блогу](https://remix.run/docs/en/main/tutorials/blog) (кароткі) і [інструкцыя па праграме](https://remix. run/docs/en/main/tutorials/jokes) (доўгі). -[//]: <> (TODO: развіцця або разгортвання?) -Remix падтрымліваецца [Shopify](https://www.shopify.com/). Калі вы ствараеце Remix праект, вам трэба [выбраць мішень развіцця](https://remix.run/docs/en/main/guides/deployment). Вы можаце разгарнуць Remix праграму на любым Node.js або бессерверным хостынгу, выкарыстоўваючы або напісаўшы [адаптар](https://remix.run/docs/en/main/other-api/adapter). +Remix падтрымліваецца [Shopify](https://www.shopify.com/). Калі вы ствараеце Remix праект, вам трэба [выбраць мішень разгортванне](https://remix.run/docs/en/main/guides/deployment). Вы можаце разгарнуць Remix праграму на любым Node.js або бессерверным хостынгу, выкарыстоўваючы або напісаўшы [адаптар](https://remix.run/docs/en/main/other-api/adapter). ### Gatsby {/*gatsby*/} @@ -53,7 +46,7 @@ Remix падтрымліваецца [Shopify](https://www.shopify.com/). Кал npx create-gatsby -Калі вы новы у Gatsby, азнаёмцеся з [падручнікам па Гэтсбі.](https://www.gatsbyjs.com/docs/tutorial/) +Калі вы новы у Gatsby, азнаёмцеся з [інструкцыя па Гэтсбі.](https://www.gatsbyjs.com/docs/tutorial/) Gatsby падтрымліваецца [Netlify](https://www.netlify.com/). Вы можаце [разгарнуць цалкам статычны Gatsby сайт](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting) на любым статычным хостынгу. Калі вы выкарыстоўваеце функцый толькі для сервера, пераканайцеся, што ваш правайдэр хостынгу падтрымлівае іх для Gatsby. @@ -65,7 +58,7 @@ Gatsby падтрымліваецца [Netlify](https://www.netlify.com/). Вы npx create-expo-app -Калі вы новы у Expo, азнаёмцеся з [падручнікам Expo](https://docs.expo.dev/tutorial/introduction/). +Калі вы новы у Expo, азнаёмцеся з [інструкцыя Expo](https://docs.expo.dev/tutorial/introduction/). Expo падтрымліваецца [Expo (кампаніі)](https://expo.dev/about). Стварэнне праграм з дапамогай Expo бясплатнае, і вы можаце адпраўляць іх у крамы прыкладанняў Google і Apple без абмежаванні. Expo дадаткова прадастаўляе платныя воблачныя паслугі. From 4751d3cf1a4f3211a001772cf9eb49e614b5f720 Mon Sep 17 00:00:00 2001 From: Vladislav Kovaliov Date: Mon, 19 Jun 2023 13:59:45 +0300 Subject: [PATCH 03/11] fixes --- .idea/.gitignore | 5 +++ .idea/be.react.dev.iml | 12 +++++++ .idea/inspectionProfiles/Project_Default.xml | 6 ++++ .idea/modules.xml | 8 +++++ .idea/vcs.xml | 6 ++++ .../learn/start-a-new-react-project.md | 33 ++++++++++--------- 6 files changed, 54 insertions(+), 16 deletions(-) create mode 100644 .idea/.gitignore create mode 100644 .idea/be.react.dev.iml create mode 100644 .idea/inspectionProfiles/Project_Default.xml create mode 100644 .idea/modules.xml create mode 100644 .idea/vcs.xml diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 000000000..b58b603fe --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,5 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Editor-based HTTP Client requests +/httpRequests/ diff --git a/.idea/be.react.dev.iml b/.idea/be.react.dev.iml new file mode 100644 index 000000000..0c8867d7e --- /dev/null +++ b/.idea/be.react.dev.iml @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml new file mode 100644 index 000000000..03d9549ea --- /dev/null +++ b/.idea/inspectionProfiles/Project_Default.xml @@ -0,0 +1,6 @@ + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 000000000..31872a628 --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 000000000..35eb1ddfb --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/src/content/learn/start-a-new-react-project.md b/src/content/learn/start-a-new-react-project.md index f61d5b08c..cc9787c30 100644 --- a/src/content/learn/start-a-new-react-project.md +++ b/src/content/learn/start-a-new-react-project.md @@ -1,10 +1,10 @@ ---- -title: Пачнанне новы React праект +****--- +title: Пачаць новы React праект --- -Калі вы хочаце стварыць новую праграму або новы вэб-сайт цалкам на React, мы рэкамендуем выбраць адзін з фрэймворкаў на базе React, папулярных у абшыны. Фрэймворк забяспечваюць функцыі, якія ў патрэбны большасці праграм і сайтаў, уключаючы маршрутызацыю, выбарку даных і генерацыю HTML. +Калі вы хочаце стварыць новую праграму або новы вэб-сайт цалкам на React, мы рэкамендуем выбраць адзін з фрэймворкаў на базе React, папулярных у супольнасці. Фрэймворкі забяспечваюць функцыі, якія ў патрэбны большасці праграм і сайтаў, уключаючы маршрутызацыю, выбарку даных і генерацыю HTML. @@ -18,37 +18,39 @@ title: Пачнанне новы React праект ### Next.js {/*nextjs*/} -**[Next.js](https://nextjs.org/) гэта поўны стэк React фрэймворка.** Ён разнабокавы і дазваляе ствараць React програму любога памеру - ад статычнага блога да складанай дынамічнай програмы. Каб стварыць новы Next.js праект, запусціце ў вашым тэрмінале: +**[Next.js](https://nextjs.org/) гэта ўніверсальны стэк React фрэймворка.** Ён разнабокавы і дазваляе ствараць React програму любога памеру - ад статычнага блога да складанай дынамічнай програмы. Каб стварыць новы Next.js праект, запусціце ў вашым тэрмінале: npx create-next-app -Next.js падтрымліваецца [Vercel](https://vercel.com/). Вы можаце [пачытаць інструкцыю па Next.js](https://nextjs.org/docs/deployment) на любым Node.js або бессерверным хостынгу, або на вашым уласным серверы. [Цалкам статычныя праграма на Next.js](https://nextjs.org/docs/advanced-features/static-html-export) можна разгарнуць на любым статычным хостынгу. +Для знаёмства з Next.js вы можаце азнаёміцца з іх [падручнікам па Next.js.](https://nextjs.org/learn/foundations/about-nextjs) + +Next.js падтрымліваецца [Vercel](https://vercel.com/). Вы можаце [разгарнуць Next.js](https://nextjs.org/docs/deployment) на любым бессерверный хостынг, хостынгу з Node.js або на вашым уласным серверы. [Цалкам статычную праграмму на Next.js](https://nextjs.org/docs/advanced-features/static-html-export) можна разгарнуць на любым статычным хостынгу. ### Remix {/*remix*/} -**[Remix](https://remix.run/) гэта React фрэймворк з поўным стэкам і ўкладзенай маршрутызацыяй.** Ён дазваляе разбіваць вашу праграму на ўкладзеныя часткі, якія могуць загружаць дадзеныя паралельна і абнаўляць у адказ на дэеянні карыстальніка. Каб стварыць новы Remix праект, запусціце: +**[Remix](https://remix.run/) гэта React фрэймворк з ўніверсальным стэкам і ўкладзенай маршрутызацыяй.** Ён дазваляе разбіваць вашу праграму на ўкладзеныя часткі, якія могуць загружаць даныя паралельна і абнаўляць у адказ на дзеянні карыстальніка. Каб стварыць новы Remix праект, запусціце: npx create-remix -Калі вы новы у Remix, азнаёмцеся з [інструкцыя па блогу](https://remix.run/docs/en/main/tutorials/blog) (кароткі) і [інструкцыя па праграме](https://remix. run/docs/en/main/tutorials/jokes) (доўгі). +Для знаёмства з Remix вы можаце азнаёміцца з іх інструкцыямі па стварэнні блога (кароткая) і [праграмы](https://remix.run/docs/ru/main/tutorials/jokes) (доўгая). -Remix падтрымліваецца [Shopify](https://www.shopify.com/). Калі вы ствараеце Remix праект, вам трэба [выбраць мішень разгортванне](https://remix.run/docs/en/main/guides/deployment). Вы можаце разгарнуць Remix праграму на любым Node.js або бессерверным хостынгу, выкарыстоўваючы або напісаўшы [адаптар](https://remix.run/docs/en/main/other-api/adapter). +Remix падтрымліваецца [Shopify](https://www.shopify.com/). Калі вы ствараеце Remix праект, вам трэба [выбраць мішень разгортванне](https://remix.run/docs/en/main/guides/deployment). Вы можаце разгарнуць Remix праграму на любым бессерверным хостынгу або хостынгу з Node.js, выкарыстоўваючы або напісаўшы [адаптар](https://remix.run/docs/en/main/other-api/adapter). ### Gatsby {/*gatsby*/} -**[Gatsby](https://www.gatsbyjs.com/) гэта React фрэймворк для хуткіх CMS вэб-сайтаў.** У яго багатая экасістэма плагінаў і ўзровень GraphQL даных спрашчаюць інтэграцыю змесціва, API і сэрвісаў на адным вэб-сайце. Каб стварыць новы Gatsby праект, запусціце: +**[Gatsby](https://www.gatsbyjs.com/) гэта фрэймворк React для стварэння хуткіх сайтаў з падтрымкай CMS.** Багатая экасістэма плагінаў і слой даных GraphQL спрашчаюць інтэграцыю змесціва, API і сэрвісаў на адным вэб-сайце. Каб стварыць новы Gatsby праект, запусціце: npx create-gatsby -Калі вы новы у Gatsby, азнаёмцеся з [інструкцыя па Гэтсбі.](https://www.gatsbyjs.com/docs/tutorial/) +Для хуткага знаёмства з Gatsby, азнаёмцеся з яго [інструкцыяй](https://www.gatsbyjs.com/docs/tutorial/) -Gatsby падтрымліваецца [Netlify](https://www.netlify.com/). Вы можаце [разгарнуць цалкам статычны Gatsby сайт](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting) на любым статычным хостынгу. Калі вы выкарыстоўваеце функцый толькі для сервера, пераканайцеся, што ваш правайдэр хостынгу падтрымлівае іх для Gatsby. +Gatsby падтрымліваецца [Netlify](https://www.netlify.com/). Вы можаце [разгарнуць цалкам статычны Gatsby сайт](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting) на любым статычным хостынгу. Калі вы жадаеце выкарыстоўваць толькі серверныя магчымасці Gatsby, пераканаецеся што ваш хостынг іх падтрымлівае. ### Expo (for native apps) {/*expo*/} @@ -58,7 +60,7 @@ Gatsby падтрымліваецца [Netlify](https://www.netlify.com/). Вы npx create-expo-app -Калі вы новы у Expo, азнаёмцеся з [інструкцыя Expo](https://docs.expo.dev/tutorial/introduction/). +Для знаёмства з Expo вы можаце азнаёміцца з іх [інструкцыя Expo](https://docs.expo.dev/tutorial/introduction/). Expo падтрымліваецца [Expo (кампаніі)](https://expo.dev/about). Стварэнне праграм з дапамогай Expo бясплатнае, і вы можаце адпраўляць іх у крамы прыкладанняў Google і Apple без абмежаванні. Expo дадаткова прадастаўляе платныя воблачныя паслугі. @@ -70,7 +72,6 @@ Expo падтрымліваецца [Expo (кампаніі)](https://expo.dev/a Вось чаму. -[//]: <> (TODO: new feature?) Нават калі спачатку вам не патрэбна маршрутызацыя або выбарка даных, вы, верагодна, захочаце дадаць для іх некаторыя бібліятэкі. Як ваш JavaScript расце з кожнай новай функцыяй, вам магчыма прыйдзецца разабрацца, як падзяліць код для кожнага маршруту асобна. Па меры таго, як вашыя патрэбы ў выбарцы даных становяцца складанымі, вы, верагодна, сутыкнецеся з вадаспадамі сеткі сервер-кліент, якія робяць вашу праграму вельмі павольнай. Паколькі ваша аўдыторыя ўключае больш карыстальнікаў з дрэнным падключэннем сеткі і прыладамі нізкага класа, вам можа спатрэбіцца згенераваць HTML з вашых кампанентаў для ранняга адлюстравання кантэнту - альбо на серверы, або падчас зборкі. Змяніць налады для выканання часткі вашага кода на серверы або падчас зборкі можа быць вельмі складана. **Гэтыя праблемы не звязаны з React. Вось чаму ў Svelte ёсць SvelteKit, а у Vue ёсць Nuxt і далей.** Каб самастойна вырашыць гэтыя праблемы, вам спатрэбіцца інтэграваць зборшчык з маршрутызатарам і бібліятэкай выбарцы даных. Нескладана усталявать першапачатковую наладу, але ёсць шмат тонкасці, звязаных з стварэннем праграмы, якая хутка загружаецца, нават калі яна расце з цягам часу. Вы захочаце адправіць мінімальны аб'ём кода прыкладання, але зрабіць гэта за адзін раз кліент-сервер, паралельна з любымі дадзенымі, неабходнымі для старонкі. Верагодна, вы захочаце, каб старонка была інтэрактыўнай яшчэ да запуску кода JavaScript, каб падтрымліваць прагрэсіўнае паляпшэнне. Магчыма, вы захочаце стварыць цалкую папку з статычнымі файламі HTML для вашэго маркетынгавых старонак, якія можна размясціць дзе заўгодна і пры гэтым працаваць з адключаным JavaScript. Стварэнне гэтых магчымасцей самастойна патрабуе сур'ёзнай працы. @@ -86,14 +87,14 @@ Expo падтрымліваецца [Expo (кампаніі)](https://expo.dev/a Гэтыя функцыі з кожным днём набліжаюцца да вытворчасці, і мы вялі перамовы з іншымі распрацоўшчыкамі зборшчыкаў і фрэймворкаў аб іх інтэграцыі. Мы спадзяемся, што праз год але два ўсе фрэймворкі, пералічаныя на гэтай старонцы, будуць мець поўную падтрымку гэтых функцый. (Калі вы аўтар фрэймворка і зацікаўлены ў супрацоўніцтве з намі для эксперыментаў з гэтымі функцыямі, паведаміце нам аб гэтым!) -### Маршрутызатар Next.js прыкладанняў {/*nextjs-app-router*/} +### Next.js (маршрутызатар праграм) {/*nextjs-app-router*/} -**[Маршрутызатар Next.js прыкладанняў](https://beta.nextjs.org/docs/getting-started) гэта рэдызайн запуску Next.js API, які выконвае бачанне архітэктуры поўнага стэка React каманды.** Гэта дазваляе вам атрымліваць дадзеныя ў сінхронных кампанентах, якія працуюць на серверы або нават падчас зборкі. +**[Маршрутызатар праграм Next.js](https://beta.nextjs.org/docs/getting-started) гэта абноўлены API Next.js, які адпавядае таму, як каманда React бачыць архітэктуру фулстэк-праграм сёння.** Маршрутызатар дазваляе загружаць даныя ў асінхронных кампанентах на серверы або нават падчас зборкі. Next.js падтрымліваецца [Vercel](https://vercel.com/). Вы можаце [разгарнуць Next.js праграму](https://nextjs.org/docs/deployment) на любым Node.js або бессерверным хостынгу, або на вашым уласным серверы. Next.js таксама падтрымлівае [статычны экспарт](https://beta.nextjs.org/docs/configuring/static-export), які не патрабуе сервера. -Маршрутызатар Next.js прыкладанняў **у цяперашні час знаходзіцца ў бэта-версіі і пакуль не рэкамендуецца для вытворчасці** (па стане на сакавік 2023 году). Каб паэксперыментаваць з ім у існуючым праекце Next.js, [прытрымлівайцеся гэтага кіраўніцтва па паступовай міграцыі](https://beta.nextjs.org/docs/upgrade-guide#migrating-from-pages-to-app). +Маршрутызатар праграм Next.js **у цяперашні час знаходзіцца ў бэта-версіі і пакуль не рэкамендуецца для вытворчасці** (па стане на сакавік 2023 году). Каб паэксперыментаваць з ім у існуючым праекце Next.js, [прытрымлівайцеся гэтага кіраўніцтва па паступовай міграцыі](https://beta.nextjs.org/docs/upgrade-guide#migrating-from-pages-to-app). From e4a4e934397c4366baeadfe0edefcb31563a3aae Mon Sep 17 00:00:00 2001 From: Vladislav Kovaliov Date: Tue, 20 Jun 2023 14:28:18 +0300 Subject: [PATCH 04/11] fixes --- .gitignore | 3 +++ .idea/.gitignore | 5 ---- .idea/be.react.dev.iml | 12 --------- .idea/inspectionProfiles/Project_Default.xml | 6 ----- .idea/modules.xml | 8 ------ .idea/vcs.xml | 6 ----- .../learn/start-a-new-react-project.md | 26 +++++++++---------- 7 files changed, 16 insertions(+), 50 deletions(-) delete mode 100644 .idea/.gitignore delete mode 100644 .idea/be.react.dev.iml delete mode 100644 .idea/inspectionProfiles/Project_Default.xml delete mode 100644 .idea/modules.xml delete mode 100644 .idea/vcs.xml diff --git a/.gitignore b/.gitignore index d8bec488b..204b14d33 100644 --- a/.gitignore +++ b/.gitignore @@ -36,3 +36,6 @@ yarn-error.log* # external fonts public/fonts/**/Optimistic_*.woff2 + +# IntellijIdea files +.idea diff --git a/.idea/.gitignore b/.idea/.gitignore deleted file mode 100644 index b58b603fe..000000000 --- a/.idea/.gitignore +++ /dev/null @@ -1,5 +0,0 @@ -# Default ignored files -/shelf/ -/workspace.xml -# Editor-based HTTP Client requests -/httpRequests/ diff --git a/.idea/be.react.dev.iml b/.idea/be.react.dev.iml deleted file mode 100644 index 0c8867d7e..000000000 --- a/.idea/be.react.dev.iml +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - - \ No newline at end of file diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml deleted file mode 100644 index 03d9549ea..000000000 --- a/.idea/inspectionProfiles/Project_Default.xml +++ /dev/null @@ -1,6 +0,0 @@ - - - - \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml deleted file mode 100644 index 31872a628..000000000 --- a/.idea/modules.xml +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml deleted file mode 100644 index 35eb1ddfb..000000000 --- a/.idea/vcs.xml +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/src/content/learn/start-a-new-react-project.md b/src/content/learn/start-a-new-react-project.md index cc9787c30..ceeb625ad 100644 --- a/src/content/learn/start-a-new-react-project.md +++ b/src/content/learn/start-a-new-react-project.md @@ -18,7 +18,7 @@ title: Пачаць новы React праект ### Next.js {/*nextjs*/} -**[Next.js](https://nextjs.org/) гэта ўніверсальны стэк React фрэймворка.** Ён разнабокавы і дазваляе ствараць React програму любога памеру - ад статычнага блога да складанай дынамічнай програмы. Каб стварыць новы Next.js праект, запусціце ў вашым тэрмінале: +**[Next.js](https://nextjs.org/) гэта ўніверсальны фулстэк React фрэймворка.** З яго дапамогай вы можаце ствараць сайты любога памеру ад простага статычнага блога да складанага дынамічнага сайта. Каб стварыць новы Next.js праект, запусціце ў вашым тэрмінале: npx create-next-app @@ -26,23 +26,23 @@ npx create-next-app Для знаёмства з Next.js вы можаце азнаёміцца з іх [падручнікам па Next.js.](https://nextjs.org/learn/foundations/about-nextjs) -Next.js падтрымліваецца [Vercel](https://vercel.com/). Вы можаце [разгарнуць Next.js](https://nextjs.org/docs/deployment) на любым бессерверный хостынг, хостынгу з Node.js або на вашым уласным серверы. [Цалкам статычную праграмму на Next.js](https://nextjs.org/docs/advanced-features/static-html-export) можна разгарнуць на любым статычным хостынгу. +Next.js падтрымліваецца [Vercel](https://vercel.com/). Вы можаце [разгарнуць Next.js](https://nextjs.org/docs/deployment) на любым бессерверный хостынгу, хостынгу з Node.js або на вашым уласным серверы. [Цалкам статычную праграмму на Next.js](https://nextjs.org/docs/advanced-features/static-html-export) можна разгарнуць на любым статычным хостынгу. ### Remix {/*remix*/} -**[Remix](https://remix.run/) гэта React фрэймворк з ўніверсальным стэкам і ўкладзенай маршрутызацыяй.** Ён дазваляе разбіваць вашу праграму на ўкладзеныя часткі, якія могуць загружаць даныя паралельна і абнаўляць у адказ на дзеянні карыстальніка. Каб стварыць новы Remix праект, запусціце: +**[Remix](https://remix.run/) гэта фулстэк React фрэймворк з укладзенай маршрутызацыяй.** Ён дазваляе разбіваць вашу праграму на ўкладзеныя часткі, якія могуць загружаць даныя паралельна і абнаўляць у адказ на дзеянні карыстальніка. Каб стварыць новы Remix праект, запусціце: npx create-remix -Для знаёмства з Remix вы можаце азнаёміцца з іх інструкцыямі па стварэнні блога (кароткая) і [праграмы](https://remix.run/docs/ru/main/tutorials/jokes) (доўгая). +Для знаёмства з Remix вы можаце азнаёміцца з іх інструкцыямі па [стварэнні блога](https://remix.run/docs/en/main/tutorials/blog) (кароткая) і [праграмы](https://remix.run/docs/en/main/tutorials/jokes) (доўгая). -Remix падтрымліваецца [Shopify](https://www.shopify.com/). Калі вы ствараеце Remix праект, вам трэба [выбраць мішень разгортванне](https://remix.run/docs/en/main/guides/deployment). Вы можаце разгарнуць Remix праграму на любым бессерверным хостынгу або хостынгу з Node.js, выкарыстоўваючы або напісаўшы [адаптар](https://remix.run/docs/en/main/other-api/adapter). +Remix падтрымліваецца [Shopify](https://www.shopify.com/). Калі вы ствараеце Remix праект, вам трэба [выбраць шаблон для разгортвання праграмы](https://remix.run/docs/en/main/guides/deployment). Вы можаце разгарнуць Remix праграму на любым бессерверным хостынгу або хостынгу з Node.js, выкарыстоўваючы або напісаўшы [адаптар](https://remix.run/docs/en/main/other-api/adapter). ### Gatsby {/*gatsby*/} -**[Gatsby](https://www.gatsbyjs.com/) гэта фрэймворк React для стварэння хуткіх сайтаў з падтрымкай CMS.** Багатая экасістэма плагінаў і слой даных GraphQL спрашчаюць інтэграцыю змесціва, API і сэрвісаў на адным вэб-сайце. Каб стварыць новы Gatsby праект, запусціце: +**[Gatsby](https://www.gatsbyjs.com/) гэта React фрэймворк для стварэння хуткіх сайтаў з падтрымкай CMS.** Багатая экасістэма плагінаў і слой даных GraphQL спрашчаюць інтэграцыю змесціва, API і сэрвісаў на адным вэб-сайце. Каб стварыць новы Gatsby праект, запусціце: npx create-gatsby @@ -50,11 +50,11 @@ npx create-gatsby Для хуткага знаёмства з Gatsby, азнаёмцеся з яго [інструкцыяй](https://www.gatsbyjs.com/docs/tutorial/) -Gatsby падтрымліваецца [Netlify](https://www.netlify.com/). Вы можаце [разгарнуць цалкам статычны Gatsby сайт](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting) на любым статычным хостынгу. Калі вы жадаеце выкарыстоўваць толькі серверныя магчымасці Gatsby, пераканаецеся што ваш хостынг іх падтрымлівае. +Gatsby падтрымліваецца [Netlify](https://www.netlify.com/). Вы можаце [разгарнуць цалкам статычны Gatsby сайт](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting) на любым статычным хостынгу. Калі вы жадаеце выкарыстоўваць толькі серверныя магчымасці Gatsby, пераканайцеся што ваш хостынг іх падтрымлівае. -### Expo (for native apps) {/*expo*/} +### Expo (для натыўных праграм) {/*expo*/} -**[Expo](https://expo.dev/) гэта React фрэймворк, які дазваляе ствараць універсальныя праграмы для Android, iOS і вэб-праграмы з сапраўды ўласнымі інтэрфейсам.** Ён забяспечвае SDK для [React Native](https://reactnative.dev/), што палягчае выкарыстанне натыўных частак. Каб стварыць новы Expo праект, запусціце: +**[Expo](https://expo.dev/) гэта React фрэймворк, які дазваляе ствараць універсальныя праграмы для Android, iOS і вэб-праграмы з натыўным карыстальніцкім інтэрфейсам.** Ён пастаўляецца разам з SDK для [React Native](https://reactnative.dev/), што палягчае распрацоўку натыўных частак. Каб стварыць новы Expo праект, запусціце: npx create-expo-app @@ -62,17 +62,17 @@ npx create-expo-app Для знаёмства з Expo вы можаце азнаёміцца з іх [інструкцыя Expo](https://docs.expo.dev/tutorial/introduction/). -Expo падтрымліваецца [Expo (кампаніі)](https://expo.dev/about). Стварэнне праграм з дапамогай Expo бясплатнае, і вы можаце адпраўляць іх у крамы прыкладанняў Google і Apple без абмежаванні. Expo дадаткова прадастаўляе платныя воблачныя паслугі. +Expo падтрымліваецца [Expo (кампанія)](https://expo.dev/about). Вы можаце бясплатна ствараць праграмы з дапамогай Expo і дадаваць іх у крамы Google і Apple без абмежаванняў. Дадаткова Expo прапануе платныя воблачныя паслугі. -#### Ці могу я выкарыстоўваць React без фрэймворка? {/*can-i-use-react-without-a-framework*/} +#### Ці можна выкарыстоўваць React без фрэймворка? {/*can-i-use-react-without-a-framework*/} -Вы можаце выкарыстоўваць React без фрэймворка - як бы вы [выкарыстоўвалі React для часткі вашай старонкі.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) **Аднак, калі вы ствараеце новую праграму або сайт цалкам з React, мы рэкамендуем выкарыстоўваць фрэймворк.** +React дакладна можна выкарыстоўваць без фрэймворка. Напрыклад, вы можаце [выкарыстоўваць React толькі для пэўнай часткі старонкі.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) **Аднак, калі вы ствараеце новую праграму або сайт цалкам з React, мы рэкамендуем выкарыстоўваць фрэймворк.** Вось чаму. -Нават калі спачатку вам не патрэбна маршрутызацыя або выбарка даных, вы, верагодна, захочаце дадаць для іх некаторыя бібліятэкі. Як ваш JavaScript расце з кожнай новай функцыяй, вам магчыма прыйдзецца разабрацца, як падзяліць код для кожнага маршруту асобна. Па меры таго, як вашыя патрэбы ў выбарцы даных становяцца складанымі, вы, верагодна, сутыкнецеся з вадаспадамі сеткі сервер-кліент, якія робяць вашу праграму вельмі павольнай. Паколькі ваша аўдыторыя ўключае больш карыстальнікаў з дрэнным падключэннем сеткі і прыладамі нізкага класа, вам можа спатрэбіцца згенераваць HTML з вашых кампанентаў для ранняга адлюстравання кантэнту - альбо на серверы, або падчас зборкі. Змяніць налады для выканання часткі вашага кода на серверы або падчас зборкі можа быць вельмі складана. +Нават калі спачатку вам не патрэбна маршрутызацыя або атрыманне даных, вы, верагодна, захочаце пазней дадаць некаторыя бібліятэкі для гэтага. С кожнай новай функцыяй памер вашага JavaScript кода будзе расці і вам давядзецца задумацца аб тым, як падзяляць код для розных маршрутаў. Па меры таго, як ваша праграма будзе атрымліваць усё больш даных, вы можаце сутыкнуцца з каскаднымі запытамі, якія запаволяць вашу праграму. Сярод вашых карыстальнікаў з'явяцца тыя, хто карыстаецца нізкахуткасным інтэрнэтам або старымі прыладамі, і вы захочаце генерыраваць HTML на серверы або падчас зборкі. Змяніць налады вялікага праекту так, каб запускаць код на серверы або падчас зборкі, можа аказацца складанай задачай. **Гэтыя праблемы не звязаны з React. Вось чаму ў Svelte ёсць SvelteKit, а у Vue ёсць Nuxt і далей.** Каб самастойна вырашыць гэтыя праблемы, вам спатрэбіцца інтэграваць зборшчык з маршрутызатарам і бібліятэкай выбарцы даных. Нескладана усталявать першапачатковую наладу, але ёсць шмат тонкасці, звязаных з стварэннем праграмы, якая хутка загружаецца, нават калі яна расце з цягам часу. Вы захочаце адправіць мінімальны аб'ём кода прыкладання, але зрабіць гэта за адзін раз кліент-сервер, паралельна з любымі дадзенымі, неабходнымі для старонкі. Верагодна, вы захочаце, каб старонка была інтэрактыўнай яшчэ да запуску кода JavaScript, каб падтрымліваць прагрэсіўнае паляпшэнне. Магчыма, вы захочаце стварыць цалкую папку з статычнымі файламі HTML для вашэго маркетынгавых старонак, якія можна размясціць дзе заўгодна і пры гэтым працаваць з адключаным JavaScript. Стварэнне гэтых магчымасцей самастойна патрабуе сур'ёзнай працы. From a6d38cacb04bd7672f10ae76c067ab977bfbccd6 Mon Sep 17 00:00:00 2001 From: Vladislav Kovaliov Date: Tue, 20 Jun 2023 14:35:26 +0300 Subject: [PATCH 05/11] fixes --- src/content/learn/start-a-new-react-project.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/start-a-new-react-project.md b/src/content/learn/start-a-new-react-project.md index ceeb625ad..84c000149 100644 --- a/src/content/learn/start-a-new-react-project.md +++ b/src/content/learn/start-a-new-react-project.md @@ -1,4 +1,4 @@ -****--- +--- title: Пачаць новы React праект --- From b566d2fbcfdc0567ee050abebb0ec95492d14b06 Mon Sep 17 00:00:00 2001 From: Vladislav Kovaliov Date: Fri, 23 Jun 2023 13:38:21 +0300 Subject: [PATCH 06/11] fixes --- src/content/learn/start-a-new-react-project.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/content/learn/start-a-new-react-project.md b/src/content/learn/start-a-new-react-project.md index 84c000149..eb967dd86 100644 --- a/src/content/learn/start-a-new-react-project.md +++ b/src/content/learn/start-a-new-react-project.md @@ -74,9 +74,9 @@ React дакладна можна выкарыстоўваць без фрэйм Нават калі спачатку вам не патрэбна маршрутызацыя або атрыманне даных, вы, верагодна, захочаце пазней дадаць некаторыя бібліятэкі для гэтага. С кожнай новай функцыяй памер вашага JavaScript кода будзе расці і вам давядзецца задумацца аб тым, як падзяляць код для розных маршрутаў. Па меры таго, як ваша праграма будзе атрымліваць усё больш даных, вы можаце сутыкнуцца з каскаднымі запытамі, якія запаволяць вашу праграму. Сярод вашых карыстальнікаў з'явяцца тыя, хто карыстаецца нізкахуткасным інтэрнэтам або старымі прыладамі, і вы захочаце генерыраваць HTML на серверы або падчас зборкі. Змяніць налады вялікага праекту так, каб запускаць код на серверы або падчас зборкі, можа аказацца складанай задачай. -**Гэтыя праблемы не звязаны з React. Вось чаму ў Svelte ёсць SvelteKit, а у Vue ёсць Nuxt і далей.** Каб самастойна вырашыць гэтыя праблемы, вам спатрэбіцца інтэграваць зборшчык з маршрутызатарам і бібліятэкай выбарцы даных. Нескладана усталявать першапачатковую наладу, але ёсць шмат тонкасці, звязаных з стварэннем праграмы, якая хутка загружаецца, нават калі яна расце з цягам часу. Вы захочаце адправіць мінімальны аб'ём кода прыкладання, але зрабіць гэта за адзін раз кліент-сервер, паралельна з любымі дадзенымі, неабходнымі для старонкі. Верагодна, вы захочаце, каб старонка была інтэрактыўнай яшчэ да запуску кода JavaScript, каб падтрымліваць прагрэсіўнае паляпшэнне. Магчыма, вы захочаце стварыць цалкую папку з статычнымі файламі HTML для вашэго маркетынгавых старонак, якія можна размясціць дзе заўгодна і пры гэтым працаваць з адключаным JavaScript. Стварэнне гэтых магчымасцей самастойна патрабуе сур'ёзнай працы. +**Гэтыя праблемы не з'яўляюцца спецыфічнымі для React. Вось чаму ў Svelte ёсць SvelteKit, у Vue ёсць Nuxt і гэтак далей.** Каб іх вырашыць, вам давядзецца інтэграваць ваш зборшчык з абранымі бібліятэкамі для маршрутызацыі і атрымання даных. Зрабіць першасную наладу і прымусіць усё гэта працаваць разам можа аказацца не так складана, але існуе шмат падводных камянёў аб якіх вам прыйдзецца даведацца, каб падтрымліваць прадукцыйнасць праграмы па меры яе росту. Вы захочаце адпраўляць як мага менш кода, але зрабіць гэта за адзін раўнд запытаў паміж кліентам і серверам, пры гэтым паралельна атрымліваючы неабходныя для старонкі даныя. Верагодна, вы захочаце, каб са старонка можна было працаваць яшчэ да запуску JavaScript кода, каб падтрымліваць прагрэсіўнае паляпшэнне. Магчыма, вам спатрэбіцца дадаць папку статычных HTML файлаў для маркетынгавых старонак, якія могуць працаваць з адключаным на старонцы Javascript. Самастойнае стварэнне і падтрымка ўсіх гэтых магчымасцей патрабуе вельмі вялікай і сур'ёзнай працы. -**React фреймворкі на гэтай старонцы вырашаюць гэтыя праблемы па змаўчанні, без дадатковай працы з вашага боку.** Яны дазваляюць вам пачаць вельмі эканомна, а потым маштабаваць праграму ў адпаведнасці з вашымі патрэбамі. Кожны React фрэймворк мае суполку, таму знаходзіць адказы на пытанні і абнаўляць інструменты прасцей. Фреймворкі таксама надае структуру вашаму коду, дапамагаючы вам і іншым захоўваць кантэкст і навыкі паміж рознымі праектамі. Наадварот, пры карыстальнай наладзе гэта лягчэй затрымацца на непадтрымоўваных залежнасцяў, і вы, па сутнасці, створыце ваш ўласный фреймворк без супольнасці або абнаўлення (і калі гэта нешта падобнае да тых, якія мы зрабілі ў мінулае, больш бессістэмна). +**React фреймворкі на гэтай старонцы вырашаюць усе гэтыя праблемы і не патрабуюць ад вас дадатковых намаганняў.** Вы можаце пачаць з малога і дадаваць неабходную функцыянальнасць па меры неабходнасці. Кожны React фрэймворк мае суполку, таму знаходзіць адказы на пытанні і абнаўляць інструменты з іх дапамогай прасцей. Акрамя таго, фрэймворкі дапамагаюць структураваць ваш код і робяць яго зразумелым для іншых распрацоўшчыкаў. Правільна і адваротнае, зрабіўшы ўласнае рашэнне, ёсць рызыка захраснуць на версіі залежнасці, якая ўжо не падтрымліваецца і ў выніку стварыць свой уласны фрэймворк без суполкі і развіцця (і, хутчэй за ўсё, ён акажацца спраектаваны горш чым ужо існуючыя рашэнні ад каманд, якія прысвяцілі гэтым праблемам вялікую колькасць часу). Калі вы яшчэ не перакананыя, або ваша праграма мае незвычайныя абмежаванні, якія не абслугоўваюцца добра гэтымі фрэймворкамі, і вы хочаце запусціць сваю ўласную наладу, мы не можам вас спыніць - дерзайте! Вазьміце `react` і `react-dom` з npm, наладзьце свой уласны працэс зборкі з дапамогай зборшчыка, напрыклад [Vite](https://vitejs.dev/) або [Parcel](https://parceljs.org/), і па меры неабходнасці дадавайце іншыя інструменты для маршрутызацыі, статычнай генерацыі або візуалізацыі на баку сервера і далей. @@ -108,17 +108,17 @@ Next.js падтрымліваецца [Vercel](https://vercel.com/). Вы мо ```js // Гэты кампанент працуе *толькі* на серверы (або падчас зборкі). async function Talks({ confId }) { - // 1. Вы знаходзіцеся на серверы, таму можаце размаўляць са сваім узроўнем дадзеных. API не патрабуецца. + // 1. Вы знаходзіцеся на серверы, таму можаце напрамую звярнуцца да вашай базы даных без запытаў да API. const talks = await db.Talks.findAll({ confId }); - // 2. Дадайце любую колькасць логікі рэндэрынгу. Гэта не павялічыць ваш JavaScript пакет. + // 2. Дадайце любую колькасць логікі рэндэрынгу. Гэта не павялічыць памер вашага JavaScript бандла. const videos = talks.map(talk => talk.video); // 3. Перадайце дадзеныя кампанентам, якія будуць працаваць у браўзеры. return ; } ``` -Маршрутызатар прыкладанняў Next.js таксама інтэгруе [атрыманне даных з Suspense](/blog/2022/03/29/react-v18#suspense-in-data-frameworks). Гэта дазваляе вам вызначаць стан загрузкі (напрыклад, запаўняльнік шкілета) для розных частак вашага карыстальніцкага інтэрфейсу непасрэдна ў вашым дрэве React: +Маршрутызатар праграм Next.js таксама падтрымлівае [атрыманне даных з затрымкай (Suspense)](/blog/2022/03/29/react-v18#suspense-in-data-frameworks). Так вы можаце задаць стан розных частак вашай праграмы пры загрузцы (напрыклад, паказаць заглушкі) непасрэдна ў вашым дрэве React: ```js }> @@ -126,5 +126,5 @@ async function Talks({ confId }) { ``` -Серверныя кампаненты і Suspense - гэта React функцыі, а не Next.js функцыі. Аднак іх прыняцце на рамачным узроўні патрабуе ўдзелу і нетрывіяльнай працы па рэалізацыі. На дадзены момант Маршрутызацыя Next.js прыкладання з'яўляецца найбольш поўнай рэалізацыяй. Каманда React працуе з распрацоўшчыкамі зборнікаў, каб палегчыць укараненне гэтых функцый у фрэймворкі наступнага пакалення. +Серверныя кампаненты і затрымка (Suspense) - гэта хутчэй магчымасці React, чым Next.js. Аднак іх прыняцце на ўзроўні фрэймворка патрабуе згоды на гэта ад каманды распрацоўкі і нетрывіяльнай працы па рэалізацыі. На дадзены момант маршрутызатар праграм Next.js з'яўляецца найбольш поўнай рэалізацыяй гэтых магчымасцей. Каманда React працуе разам з распрацоўшчыкамі зборшчыкаў, каб палегчыць рэалізацыю гэтых функцый у фрэймворках наступнага пакалення. From c6a4ca77ed75185304648742b7ead99f8e18fb4f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aliaksiej=20Razuma=C5=AD?= Date: Sat, 24 Jun 2023 23:19:31 +0300 Subject: [PATCH 07/11] Some spell check and other little fixes. See PR comment for more. --- .../learn/start-a-new-react-project.md | 42 +++++++++---------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/src/content/learn/start-a-new-react-project.md b/src/content/learn/start-a-new-react-project.md index eb967dd86..ec45dcf25 100644 --- a/src/content/learn/start-a-new-react-project.md +++ b/src/content/learn/start-a-new-react-project.md @@ -4,13 +4,13 @@ title: Пачаць новы React праект -Калі вы хочаце стварыць новую праграму або новы вэб-сайт цалкам на React, мы рэкамендуем выбраць адзін з фрэймворкаў на базе React, папулярных у супольнасці. Фрэймворкі забяспечваюць функцыі, якія ў патрэбны большасці праграм і сайтаў, уключаючы маршрутызацыю, выбарку даных і генерацыю HTML. +Калі вы хочаце стварыць новую праграму або новы вэб-сайт цалкам на React, мы рэкамендуем выбраць адзін з фрэймворкаў на базе React, папулярных у супольнасці. Фрэймворкі забяспечваюць функцыі, якія патрэбны большасці праграм і сайтаў, уключаючы маршрутызацыю, выбарку даных і генерацыю HTML. -**Вам трэба ўсталяваць [Node.js](https://nodejs.org/en/) для лакальнага разгортванне.** Вы можаце *таксама* выкарыстоўваць Node.js у вытворчасці, але гэта неабавязкова. Многія React фрэймворкі падтрымліваюць экспарт у статычны HTML/CSS/JS. +**Вам трэба ўсталяваць [Node.js](https://nodejs.org/en/) для лакальнага разгортвання.** Вы можаце *таксама* выкарыстоўваць Node.js у вытворчасці, але гэта неабавязкова. Многія React фрэймворкі падтрымліваюць экспарт у статычны HTML/CSS/JS. @@ -18,7 +18,7 @@ title: Пачаць новы React праект ### Next.js {/*nextjs*/} -**[Next.js](https://nextjs.org/) гэта ўніверсальны фулстэк React фрэймворка.** З яго дапамогай вы можаце ствараць сайты любога памеру ад простага статычнага блога да складанага дынамічнага сайта. Каб стварыць новы Next.js праект, запусціце ў вашым тэрмінале: +**[Next.js](https://nextjs.org/) — гэта ўніверсальны фулстэк React фрэймворк.** З яго дапамогай вы можаце ствараць сайты любога памеру ад простага статычнага блога да складанага дынамічнага сайта. Каб стварыць новы Next.js праект, запусціце ў вашым тэрмінале: npx create-next-app @@ -26,11 +26,11 @@ npx create-next-app Для знаёмства з Next.js вы можаце азнаёміцца з іх [падручнікам па Next.js.](https://nextjs.org/learn/foundations/about-nextjs) -Next.js падтрымліваецца [Vercel](https://vercel.com/). Вы можаце [разгарнуць Next.js](https://nextjs.org/docs/deployment) на любым бессерверный хостынгу, хостынгу з Node.js або на вашым уласным серверы. [Цалкам статычную праграмму на Next.js](https://nextjs.org/docs/advanced-features/static-html-export) можна разгарнуць на любым статычным хостынгу. +Next.js падтрымліваецца [Vercel](https://vercel.com/). Вы можаце [разгарнуць Next.js](https://nextjs.org/docs/deployment) на любым бессерверным хостынгу, Node.js хостынгу або на вашым уласным серверы. [Цалкам статычную праграму на Next.js](https://nextjs.org/docs/advanced-features/static-html-export) можна разгарнуць на любым статычным хостынгу. ### Remix {/*remix*/} -**[Remix](https://remix.run/) гэта фулстэк React фрэймворк з укладзенай маршрутызацыяй.** Ён дазваляе разбіваць вашу праграму на ўкладзеныя часткі, якія могуць загружаць даныя паралельна і абнаўляць у адказ на дзеянні карыстальніка. Каб стварыць новы Remix праект, запусціце: +**[Remix](https://remix.run/) — гэта фулстэк React фрэймворк з укладзенай маршрутызацыяй.** Ён дазваляе разбіваць вашу праграму на ўкладзеныя часткі, якія могуць загружаць даныя паралельна і абнаўляць у адказ на дзеянні карыстальніка. Каб стварыць новы Remix праект, запусціце: npx create-remix @@ -38,11 +38,11 @@ npx create-remix Для знаёмства з Remix вы можаце азнаёміцца з іх інструкцыямі па [стварэнні блога](https://remix.run/docs/en/main/tutorials/blog) (кароткая) і [праграмы](https://remix.run/docs/en/main/tutorials/jokes) (доўгая). -Remix падтрымліваецца [Shopify](https://www.shopify.com/). Калі вы ствараеце Remix праект, вам трэба [выбраць шаблон для разгортвання праграмы](https://remix.run/docs/en/main/guides/deployment). Вы можаце разгарнуць Remix праграму на любым бессерверным хостынгу або хостынгу з Node.js, выкарыстоўваючы або напісаўшы [адаптар](https://remix.run/docs/en/main/other-api/adapter). +Remix падтрымліваецца [Shopify](https://www.shopify.com/). Калі вы ствараеце Remix праект, вам трэба [выбраць шаблон для разгортвання праграмы](https://remix.run/docs/en/main/guides/deployment). Вы можаце разгарнуць Remix праграму на любым бессерверным хостынгу або Node.js хостынгу, выкарыстоўваючы або напісаўшы [адаптар](https://remix.run/docs/en/main/other-api/adapter). ### Gatsby {/*gatsby*/} -**[Gatsby](https://www.gatsbyjs.com/) гэта React фрэймворк для стварэння хуткіх сайтаў з падтрымкай CMS.** Багатая экасістэма плагінаў і слой даных GraphQL спрашчаюць інтэграцыю змесціва, API і сэрвісаў на адным вэб-сайце. Каб стварыць новы Gatsby праект, запусціце: +**[Gatsby](https://www.gatsbyjs.com/) — гэта React фрэймворк для стварэння хуткіх сайтаў з падтрымкай CMS.** Багатая экасістэма плагінаў і слой даных GraphQL спрашчаюць інтэграцыю змесціва, API і сэрвісаў на адным вэб-сайце. Каб стварыць новы Gatsby праект, запусціце: npx create-gatsby @@ -54,7 +54,7 @@ Gatsby падтрымліваецца [Netlify](https://www.netlify.com/). Вы ### Expo (для натыўных праграм) {/*expo*/} -**[Expo](https://expo.dev/) гэта React фрэймворк, які дазваляе ствараць універсальныя праграмы для Android, iOS і вэб-праграмы з натыўным карыстальніцкім інтэрфейсам.** Ён пастаўляецца разам з SDK для [React Native](https://reactnative.dev/), што палягчае распрацоўку натыўных частак. Каб стварыць новы Expo праект, запусціце: +**[Expo](https://expo.dev/) — гэта React фрэймворк, які дазваляе ствараць універсальныя праграмы для Android, iOS і вэб-праграмы з натыўным карыстальніцкім інтэрфейсам.** Ён пастаўляецца разам з SDK для [React Native](https://reactnative.dev/), што палягчае распрацоўку натыўных частак. Каб стварыць новы Expo праект, запусціце: npx create-expo-app @@ -70,40 +70,40 @@ Expo падтрымліваецца [Expo (кампанія)](https://expo.dev/a React дакладна можна выкарыстоўваць без фрэймворка. Напрыклад, вы можаце [выкарыстоўваць React толькі для пэўнай часткі старонкі.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) **Аднак, калі вы ствараеце новую праграму або сайт цалкам з React, мы рэкамендуем выкарыстоўваць фрэймворк.** -Вось чаму. +Вось чаму: Нават калі спачатку вам не патрэбна маршрутызацыя або атрыманне даных, вы, верагодна, захочаце пазней дадаць некаторыя бібліятэкі для гэтага. С кожнай новай функцыяй памер вашага JavaScript кода будзе расці і вам давядзецца задумацца аб тым, як падзяляць код для розных маршрутаў. Па меры таго, як ваша праграма будзе атрымліваць усё больш даных, вы можаце сутыкнуцца з каскаднымі запытамі, якія запаволяць вашу праграму. Сярод вашых карыстальнікаў з'явяцца тыя, хто карыстаецца нізкахуткасным інтэрнэтам або старымі прыладамі, і вы захочаце генерыраваць HTML на серверы або падчас зборкі. Змяніць налады вялікага праекту так, каб запускаць код на серверы або падчас зборкі, можа аказацца складанай задачай. **Гэтыя праблемы не з'яўляюцца спецыфічнымі для React. Вось чаму ў Svelte ёсць SvelteKit, у Vue ёсць Nuxt і гэтак далей.** Каб іх вырашыць, вам давядзецца інтэграваць ваш зборшчык з абранымі бібліятэкамі для маршрутызацыі і атрымання даных. Зрабіць першасную наладу і прымусіць усё гэта працаваць разам можа аказацца не так складана, але існуе шмат падводных камянёў аб якіх вам прыйдзецца даведацца, каб падтрымліваць прадукцыйнасць праграмы па меры яе росту. Вы захочаце адпраўляць як мага менш кода, але зрабіць гэта за адзін раўнд запытаў паміж кліентам і серверам, пры гэтым паралельна атрымліваючы неабходныя для старонкі даныя. Верагодна, вы захочаце, каб са старонка можна было працаваць яшчэ да запуску JavaScript кода, каб падтрымліваць прагрэсіўнае паляпшэнне. Магчыма, вам спатрэбіцца дадаць папку статычных HTML файлаў для маркетынгавых старонак, якія могуць працаваць з адключаным на старонцы Javascript. Самастойнае стварэнне і падтрымка ўсіх гэтых магчымасцей патрабуе вельмі вялікай і сур'ёзнай працы. -**React фреймворкі на гэтай старонцы вырашаюць усе гэтыя праблемы і не патрабуюць ад вас дадатковых намаганняў.** Вы можаце пачаць з малога і дадаваць неабходную функцыянальнасць па меры неабходнасці. Кожны React фрэймворк мае суполку, таму знаходзіць адказы на пытанні і абнаўляць інструменты з іх дапамогай прасцей. Акрамя таго, фрэймворкі дапамагаюць структураваць ваш код і робяць яго зразумелым для іншых распрацоўшчыкаў. Правільна і адваротнае, зрабіўшы ўласнае рашэнне, ёсць рызыка захраснуць на версіі залежнасці, якая ўжо не падтрымліваецца і ў выніку стварыць свой уласны фрэймворк без суполкі і развіцця (і, хутчэй за ўсё, ён акажацца спраектаваны горш чым ужо існуючыя рашэнні ад каманд, якія прысвяцілі гэтым праблемам вялікую колькасць часу). +**React фреймворкі на гэтай старонцы вырашаюць усе гэтыя праблемы і не патрабуюць ад вас дадатковых намаганняў.** Вы можаце пачаць з малога і дадаваць неабходную функцыянальнасць па меры неабходнасці. Кожны React фрэймворк мае суполку, таму знаходзіць адказы на пытанні і абнаўляць інструменты з іх дапамогай прасцей. Акрамя таго, фрэймворкі дапамагаюць структураваць ваш код і робяць яго зразумелым для іншых распрацоўшчыкаў. Правільна і адваротнае, зрабіўшы ўласнае рашэнне, ёсць рызыка захраснуць на версіі залежнасці, якая ўжо не падтрымліваецца і ў выніку стварыць свой уласны фрэймворк без суполкі і развіцця (і, хутчэй за ўсё, ён акажацца спраектаваны горш за ўжо існуючыя рашэнні ад каманд, якія прысвяцілі гэтым праблемам вялікую колькасць часу). -Калі вы яшчэ не перакананыя, або ваша праграма мае незвычайныя абмежаванні, якія не абслугоўваюцца добра гэтымі фрэймворкамі, і вы хочаце запусціць сваю ўласную наладу, мы не можам вас спыніць - дерзайте! Вазьміце `react` і `react-dom` з npm, наладзьце свой уласны працэс зборкі з дапамогай зборшчыка, напрыклад [Vite](https://vitejs.dev/) або [Parcel](https://parceljs.org/), і па меры неабходнасці дадавайце іншыя інструменты для маршрутызацыі, статычнай генерацыі або візуалізацыі на баку сервера і далей. +Калі вы яшчэ не перакананыя, або ваша праграма мае незвычайныя абмежаванні, якія не абслугоўваюцца добра гэтымі фрэймворкамі, і вы хочаце запусціць сваю ўласную наладу, мы не можам вас спыніць — дзейнічайце! Вазьміце `react` і `react-dom` з npm, наладзьце свой уласны працэс зборкі з дапамогай зборшчыка, напрыклад [Vite](https://vitejs.dev/) або [Parcel](https://parceljs.org/), і па меры неабходнасці дадавайце іншыя інструменты для маршрутызацыі, статычнай генерацыі або візуалізацыі на баку сервера і далей. ## Перадавыя React фрэймворкі {/*bleeding-edge-react-frameworks*/} -Калі мы разведалі, як працягваць React удасканальваць, мы зразумелі, што больш цесная інтэграцыя React з фрэймворкамі (у прыватнасці, з маршрутызацыяй, групаваннем і сервернымі тэхналогіямі) - гэта наша самая вялікая магчымасць дапамагчы React карыстальнікам ствараць лепшыя прыкладанні. Каманда Next.js пагадзілася супрацоўнічаць з намі ў даследаванні, распрацоўцы, інтэграцыі і тэсціраванні сучасных функцый React, якія не залежаць ад фрэймворка, такіх як [Кампаненты сервера React.](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components) +Калі мы разведалі, як працягваць React удасканальваць, мы зразумелі, што больш цесная інтэграцыя React з фрэймворкамі (у прыватнасці, з маршрутызацыяй, групаваннем і сервернымі тэхналогіямі) — гэта наша самая вялікая магчымасць дапамагчы React карыстальнікам ствараць лепшыя праграмы. Каманда Next.js пагадзілася супрацоўнічаць з намі ў даследаванні, распрацоўцы, інтэграцыі і тэсціраванні сучасных функцый React, якія не залежаць ад фрэймворка, такіх як [серверныя кампаненты React.](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components) -Гэтыя функцыі з кожным днём набліжаюцца да вытворчасці, і мы вялі перамовы з іншымі распрацоўшчыкамі зборшчыкаў і фрэймворкаў аб іх інтэграцыі. Мы спадзяемся, што праз год але два ўсе фрэймворкі, пералічаныя на гэтай старонцы, будуць мець поўную падтрымку гэтых функцый. (Калі вы аўтар фрэймворка і зацікаўлены ў супрацоўніцтве з намі для эксперыментаў з гэтымі функцыямі, паведаміце нам аб гэтым!) +Гэтыя функцыі з кожным днём набліжаюцца да вытворчасці, і мы вялі перамовы з іншымі распрацоўшчыкамі зборшчыкаў і фрэймворкаў аб іх інтэграцыі. Мы спадзяемся, праз год ці два ўсе фрэймворкі, пералічаныя на гэтай старонцы, будуць мець поўную падтрымку гэтых функцый. (Калі вы аўтар фрэймворка і зацікаўлены ў супрацоўніцтве з намі для эксперыментаў з гэтымі функцыямі, паведаміце нам аб гэтым!) -### Next.js (маршрутызатар праграм) {/*nextjs-app-router*/} +### Next.js (App Router) {/*nextjs-app-router*/} -**[Маршрутызатар праграм Next.js](https://beta.nextjs.org/docs/getting-started) гэта абноўлены API Next.js, які адпавядае таму, як каманда React бачыць архітэктуру фулстэк-праграм сёння.** Маршрутызатар дазваляе загружаць даныя ў асінхронных кампанентах на серверы або нават падчас зборкі. +**[Next.js App Router](https://beta.nextjs.org/docs/getting-started) — гэта абноўлены API Next.js, які адпавядае таму, як каманда React бачыць архітэктуру фулстэк-праграм сёння.** Маршрутызатар дазваляе загружаць даныя ў асінхронных кампанентах на серверы або нават падчас зборкі. Next.js падтрымліваецца [Vercel](https://vercel.com/). Вы можаце [разгарнуць Next.js праграму](https://nextjs.org/docs/deployment) на любым Node.js або бессерверным хостынгу, або на вашым уласным серверы. Next.js таксама падтрымлівае [статычны экспарт](https://beta.nextjs.org/docs/configuring/static-export), які не патрабуе сервера. -Маршрутызатар праграм Next.js **у цяперашні час знаходзіцца ў бэта-версіі і пакуль не рэкамендуецца для вытворчасці** (па стане на сакавік 2023 году). Каб паэксперыментаваць з ім у існуючым праекце Next.js, [прытрымлівайцеся гэтага кіраўніцтва па паступовай міграцыі](https://beta.nextjs.org/docs/upgrade-guide#migrating-from-pages-to-app). +Next.js App Router **у цяперашні час знаходзіцца ў бэта-версіі і пакуль не рэкамендуецца для вытворчасці** (па стане на сакавік 2023 году). Каб паэксперыментаваць з ім у існуючым праекце Next.js, [прытрымлівайцеся гэтага кіраўніцтва па паступовай міграцыі](https://beta.nextjs.org/docs/upgrade-guide#migrating-from-pages-to-app). #### Якія функцыі складаюць бачанне поўнай архітэктуры React каманды? {/*which-features-make-up-the-react-teams-full-stack-architecture-vision*/} -Зборнік маршрутызатараў прыкладанняў Next.js цалкам рэалізуе афіцыйную [React Server спецыфікацыя кампанентаў](https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md). Гэта дазваляе змяшаць кампаненты часу зборкі, серверныя і інтэрактыўныя кампаненты ў адным дрэве React. +Зборнік Next.js App Router цалкам рэалізуе афіцыйную [спецыфікацыю серверных кампанентаў React](https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md). Гэта дазваляе змяшаць кампаненты часу зборкі, серверныя і інтэрактыўныя кампаненты ў адным дрэве React. -Напрыклад, вы можаце напісаць толькі серверны кампанент React як `async` функцыю, якая чытае з базы дадзеных або з файла. Затым вы можаце перадаваць дадзеныя з яго ў інтэрактыўныя кампаненты: +Напрыклад, вы можаце напісаць толькі серверны кампанент React як `async` функцыю, якая чытае з базы даных або з файла. Затым вы можаце перадаваць даныя з яго ў інтэрактыўныя кампаненты: ```js // Гэты кампанент працуе *толькі* на серверы (або падчас зборкі). @@ -114,11 +114,11 @@ async function Talks({ confId }) { // 2. Дадайце любую колькасць логікі рэндэрынгу. Гэта не павялічыць памер вашага JavaScript бандла. const videos = talks.map(talk => talk.video); - // 3. Перадайце дадзеныя кампанентам, якія будуць працаваць у браўзеры. + // 3. Перадайце даныя кампанентам, якія будуць працаваць у браўзеры. return ; } ``` -Маршрутызатар праграм Next.js таксама падтрымлівае [атрыманне даных з затрымкай (Suspense)](/blog/2022/03/29/react-v18#suspense-in-data-frameworks). Так вы можаце задаць стан розных частак вашай праграмы пры загрузцы (напрыклад, паказаць заглушкі) непасрэдна ў вашым дрэве React: +Next.js App Router таксама падтрымлівае [атрыманне даных з затрымкай (Suspense)](/blog/2022/03/29/react-v18#suspense-in-data-frameworks). Так вы можаце задаць стан розных частак вашай праграмы пры загрузцы (напрыклад, паказаць заглушкі) непасрэдна ў вашым дрэве React: ```js }> @@ -126,5 +126,5 @@ async function Talks({ confId }) { ``` -Серверныя кампаненты і затрымка (Suspense) - гэта хутчэй магчымасці React, чым Next.js. Аднак іх прыняцце на ўзроўні фрэймворка патрабуе згоды на гэта ад каманды распрацоўкі і нетрывіяльнай працы па рэалізацыі. На дадзены момант маршрутызатар праграм Next.js з'яўляецца найбольш поўнай рэалізацыяй гэтых магчымасцей. Каманда React працуе разам з распрацоўшчыкамі зборшчыкаў, каб палегчыць рэалізацыю гэтых функцый у фрэймворках наступнага пакалення. +Серверныя кампаненты і затрымка (Suspense) — гэта хутчэй магчымасці React, чым Next.js. Аднак іх прыняцце на ўзроўні фрэймворка патрабуе згоды на гэта ад каманды распрацоўкі і нетрывіяльнай працы па рэалізацыі. На дадзены момант Next.js App Router з'яўляецца найбольш поўнай рэалізацыяй гэтых магчымасцей. Каманда React працуе разам з распрацоўшчыкамі зборшчыкаў, каб палегчыць рэалізацыю гэтых функцый у фрэймворках наступнага пакалення. From 792beab3839c2de950fdba7d8e72f3c1d5c8d624 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aliaksiej=20Razuma=C5=AD?= Date: Sat, 24 Jun 2023 23:29:01 +0300 Subject: [PATCH 08/11] Fix --- src/content/learn/start-a-new-react-project.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/start-a-new-react-project.md b/src/content/learn/start-a-new-react-project.md index ec45dcf25..e67c6941f 100644 --- a/src/content/learn/start-a-new-react-project.md +++ b/src/content/learn/start-a-new-react-project.md @@ -101,7 +101,7 @@ Next.js App Router **у цяперашні час знаходзіцца ў бэ #### Якія функцыі складаюць бачанне поўнай архітэктуры React каманды? {/*which-features-make-up-the-react-teams-full-stack-architecture-vision*/} -Зборнік Next.js App Router цалкам рэалізуе афіцыйную [спецыфікацыю серверных кампанентаў React](https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md). Гэта дазваляе змяшаць кампаненты часу зборкі, серверныя і інтэрактыўныя кампаненты ў адным дрэве React. +Зборшчык Next.js App Router цалкам рэалізуе афіцыйную [спецыфікацыю серверных кампанентаў React](https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md). Гэта дазваляе змяшаць кампаненты часу зборкі, серверныя і інтэрактыўныя кампаненты ў адным дрэве React. Напрыклад, вы можаце напісаць толькі серверны кампанент React як `async` функцыю, якая чытае з базы даных або з файла. Затым вы можаце перадаваць даныя з яго ў інтэрактыўныя кампаненты: From 27dbfdded6709e14ae18c82753209032ea24450f Mon Sep 17 00:00:00 2001 From: Vlad Kovaliov Date: Sun, 25 Jun 2023 17:03:59 +0300 Subject: [PATCH 09/11] fixes --- src/content/learn/start-a-new-react-project.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/start-a-new-react-project.md b/src/content/learn/start-a-new-react-project.md index e67c6941f..658d7bde7 100644 --- a/src/content/learn/start-a-new-react-project.md +++ b/src/content/learn/start-a-new-react-project.md @@ -50,7 +50,7 @@ npx create-gatsby Для хуткага знаёмства з Gatsby, азнаёмцеся з яго [інструкцыяй](https://www.gatsbyjs.com/docs/tutorial/) -Gatsby падтрымліваецца [Netlify](https://www.netlify.com/). Вы можаце [разгарнуць цалкам статычны Gatsby сайт](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting) на любым статычным хостынгу. Калі вы жадаеце выкарыстоўваць толькі серверныя магчымасці Gatsby, пераканайцеся што ваш хостынг іх падтрымлівае. +Gatsby падтрымліваецца [Netlify](https://www.netlify.com/). Вы можаце [разгарнуць цалкам статычны Gatsby сайт](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting) на любым статычным хостынгу. Калі вы жадаеце выкарыстоўваць толькі серверныя магчымасці Gatsby, пераканаецеся што ваш хостынг іх падтрымлівае. ### Expo (для натыўных праграм) {/*expo*/} From 69b553972b2736e2d357ab7d8d8df9cb3abbc626 Mon Sep 17 00:00:00 2001 From: Vlad Kovaliov Date: Sun, 25 Jun 2023 17:04:33 +0300 Subject: [PATCH 10/11] fixes --- src/content/learn/start-a-new-react-project.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/start-a-new-react-project.md b/src/content/learn/start-a-new-react-project.md index 658d7bde7..c1d7ee78b 100644 --- a/src/content/learn/start-a-new-react-project.md +++ b/src/content/learn/start-a-new-react-project.md @@ -111,7 +111,7 @@ async function Talks({ confId }) { // 1. Вы знаходзіцеся на серверы, таму можаце напрамую звярнуцца да вашай базы даных без запытаў да API. const talks = await db.Talks.findAll({ confId }); - // 2. Дадайце любую колькасць логікі рэндэрынгу. Гэта не павялічыць памер вашага JavaScript бандла. + // 2. Дадайце любую колькасць логікі рэндэрынгу. Гэта не павялічыць памер вашага JavaScript пакет. const videos = talks.map(talk => talk.video); // 3. Перадайце даныя кампанентам, якія будуць працаваць у браўзеры. From 513f5e630903a6b3e1c65a66f4a51b56d19cacb8 Mon Sep 17 00:00:00 2001 From: Vladislav Kovaliov Date: Wed, 28 Jun 2023 21:29:08 +0300 Subject: [PATCH 11/11] fixes --- src/content/learn/start-a-new-react-project.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/content/learn/start-a-new-react-project.md b/src/content/learn/start-a-new-react-project.md index c1d7ee78b..3cb281ea1 100644 --- a/src/content/learn/start-a-new-react-project.md +++ b/src/content/learn/start-a-new-react-project.md @@ -50,7 +50,7 @@ npx create-gatsby Для хуткага знаёмства з Gatsby, азнаёмцеся з яго [інструкцыяй](https://www.gatsbyjs.com/docs/tutorial/) -Gatsby падтрымліваецца [Netlify](https://www.netlify.com/). Вы можаце [разгарнуць цалкам статычны Gatsby сайт](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting) на любым статычным хостынгу. Калі вы жадаеце выкарыстоўваць толькі серверныя магчымасці Gatsby, пераканаецеся што ваш хостынг іх падтрымлівае. +Gatsby падтрымліваецца [Netlify](https://www.netlify.com/). Вы можаце [разгарнуць цалкам статычны Gatsby сайт](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting) на любым статычным хостынгу. Калі вы жадаеце выкарыстоўваць толькі серверныя магчымасці Gatsby, пераканайцеся, што ваш хостынг іх падтрымлівае. ### Expo (для натыўных праграм) {/*expo*/} @@ -78,23 +78,23 @@ React дакладна можна выкарыстоўваць без фрэйм **React фреймворкі на гэтай старонцы вырашаюць усе гэтыя праблемы і не патрабуюць ад вас дадатковых намаганняў.** Вы можаце пачаць з малога і дадаваць неабходную функцыянальнасць па меры неабходнасці. Кожны React фрэймворк мае суполку, таму знаходзіць адказы на пытанні і абнаўляць інструменты з іх дапамогай прасцей. Акрамя таго, фрэймворкі дапамагаюць структураваць ваш код і робяць яго зразумелым для іншых распрацоўшчыкаў. Правільна і адваротнае, зрабіўшы ўласнае рашэнне, ёсць рызыка захраснуць на версіі залежнасці, якая ўжо не падтрымліваецца і ў выніку стварыць свой уласны фрэймворк без суполкі і развіцця (і, хутчэй за ўсё, ён акажацца спраектаваны горш за ўжо існуючыя рашэнні ад каманд, якія прысвяцілі гэтым праблемам вялікую колькасць часу). -Калі вы яшчэ не перакананыя, або ваша праграма мае незвычайныя абмежаванні, якія не абслугоўваюцца добра гэтымі фрэймворкамі, і вы хочаце запусціць сваю ўласную наладу, мы не можам вас спыніць — дзейнічайце! Вазьміце `react` і `react-dom` з npm, наладзьце свой уласны працэс зборкі з дапамогай зборшчыка, напрыклад [Vite](https://vitejs.dev/) або [Parcel](https://parceljs.org/), і па меры неабходнасці дадавайце іншыя інструменты для маршрутызацыі, статычнай генерацыі або візуалізацыі на баку сервера і далей. +Калі мы вас яшчэ не пераканалі або фрэймворкі не рашаюць тую праблему, якая паўстала перад вашай праграмай і вы хочаце стварыць свой уласны фрэймворк - дзейнічайце! Усталюйце `react` і `react-dom` з npm, наладзьце свой уласны працэс зборкі з дапамогай зборшчыка, напрыклад [Vite](https://vitejs.dev/) або [Parcel](https://parceljs.org/), і па меры неабходнасці дадайце ўсе неабходныя інструменты для маршрутызацыі, статычнай генерацыі кода, сервернага рэндэрынгу і гэтак далей. ## Перадавыя React фрэймворкі {/*bleeding-edge-react-frameworks*/} -Калі мы разведалі, як працягваць React удасканальваць, мы зразумелі, што больш цесная інтэграцыя React з фрэймворкамі (у прыватнасці, з маршрутызацыяй, групаваннем і сервернымі тэхналогіямі) — гэта наша самая вялікая магчымасць дапамагчы React карыстальнікам ствараць лепшыя праграмы. Каманда Next.js пагадзілася супрацоўнічаць з намі ў даследаванні, распрацоўцы, інтэграцыі і тэсціраванні сучасных функцый React, якія не залежаць ад фрэймворка, такіх як [серверныя кампаненты React.](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components) +Па меры таго як мы развівалі React, мы зразумелі, што лепшая інтэграцыя з фрэймворкамі (асабліва ў пытаннях маршрутызацыі, зборкі і серверных тэхналогій) прынясе найбольшую карысць нашым карыстальнікам. Каманда Next.js пагадзілася ўзаемадзейнічаць з намі ў пошуку, распрацоўцы, інтэграцыі і тэсціраванні перадавых падыходаў, якія не залежаць ад канкрэтнага фрэймворка, напрыклад [серверныя кампаненты React.](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components) -Гэтыя функцыі з кожным днём набліжаюцца да вытворчасці, і мы вялі перамовы з іншымі распрацоўшчыкамі зборшчыкаў і фрэймворкаў аб іх інтэграцыі. Мы спадзяемся, праз год ці два ўсе фрэймворкі, пералічаныя на гэтай старонцы, будуць мець поўную падтрымку гэтых функцый. (Калі вы аўтар фрэймворка і зацікаўлены ў супрацоўніцтве з намі для эксперыментаў з гэтымі функцыямі, паведаміце нам аб гэтым!) +Мы працуем над тым, каб новыя магчымасці сталі прыдатнымі для працоўнага асяроддзя як мага хутчэй, і дамаўляемся з распрацоўшчыкамі зборшчыкаў і фрэймворкаў аб іх інтэграцыі. Мы разлічваем, праз год ці два ўсе пералічаныя фрэймворкі будуць поўнасцю падтрымліваць гэтыя магчымасці. (Калі вы распрацоўшчык фрэймворка і хочаце дапамагчы нам у эксперыментах, калі ласка, дайце нам ведаць!) ### Next.js (App Router) {/*nextjs-app-router*/} -**[Next.js App Router](https://beta.nextjs.org/docs/getting-started) — гэта абноўлены API Next.js, які адпавядае таму, як каманда React бачыць архітэктуру фулстэк-праграм сёння.** Маршрутызатар дазваляе загружаць даныя ў асінхронных кампанентах на серверы або нават падчас зборкі. +**[Next.js App Router](https://beta.nextjs.org/docs/getting-started) — гэта абноўлены API Next.js, які адпавядае таму, як каманда React бачыць архітэктуру фулстэк-праграм сёння.** Ён дазваляе загружаць даныя ў асінхронных кампанентах на серверы або нават падчас зборкі. Next.js падтрымліваецца [Vercel](https://vercel.com/). Вы можаце [разгарнуць Next.js праграму](https://nextjs.org/docs/deployment) на любым Node.js або бессерверным хостынгу, або на вашым уласным серверы. Next.js таксама падтрымлівае [статычны экспарт](https://beta.nextjs.org/docs/configuring/static-export), які не патрабуе сервера. -Next.js App Router **у цяперашні час знаходзіцца ў бэта-версіі і пакуль не рэкамендуецца для вытворчасці** (па стане на сакавік 2023 году). Каб паэксперыментаваць з ім у існуючым праекце Next.js, [прытрымлівайцеся гэтага кіраўніцтва па паступовай міграцыі](https://beta.nextjs.org/docs/upgrade-guide#migrating-from-pages-to-app). +Next.js App Router **у цяперашні час знаходзіцца ў бэта-версіі і пакуль не рэкамендуецца для выкарыстання ў працоўным асяроддзі** (па стане на сакавік 2023 году). Каб паэксперыментаваць з ім у існуючым праекце Next.js, [прытрымлівайцеся гэтага кіраўніцтва па паступовай міграцыі](https://beta.nextjs.org/docs/upgrade-guide#migrating-from-pages-to-app). @@ -103,7 +103,7 @@ Next.js App Router **у цяперашні час знаходзіцца ў бэ Зборшчык Next.js App Router цалкам рэалізуе афіцыйную [спецыфікацыю серверных кампанентаў React](https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md). Гэта дазваляе змяшаць кампаненты часу зборкі, серверныя і інтэрактыўныя кампаненты ў адным дрэве React. -Напрыклад, вы можаце напісаць толькі серверны кампанент React як `async` функцыю, якая чытае з базы даных або з файла. Затым вы можаце перадаваць даныя з яго ў інтэрактыўныя кампаненты: +Напрыклад, вы можаце напісаць серверны кампанент React як `async` функцыю, якая чытае з базы даных або з файла. Затым вы можаце перадаваць даныя з яго ў інтэрактыўныя кампаненты: ```js // Гэты кампанент працуе *толькі* на серверы (або падчас зборкі). @@ -111,7 +111,7 @@ async function Talks({ confId }) { // 1. Вы знаходзіцеся на серверы, таму можаце напрамую звярнуцца да вашай базы даных без запытаў да API. const talks = await db.Talks.findAll({ confId }); - // 2. Дадайце любую колькасць логікі рэндэрынгу. Гэта не павялічыць памер вашага JavaScript пакет. + // 2. Дадайце любую колькасць логікі рэндэрынгу. Гэта не павялічыць памер вашага JavaScript пакета. const videos = talks.map(talk => talk.video); // 3. Перадайце даныя кампанентам, якія будуць працаваць у браўзеры.