|
1 |
| ---- |
2 |
| -title: Start a New React Project |
3 |
| ---- |
4 |
| - |
5 |
| -<Intro> |
6 |
| - |
7 |
| -If you're learning React or considering adding it to an existing project, you can get started quickly by [adding React to any HTML page with script tags](/learn/add-react-to-a-website). If your project will need many components and many files, it might be time to consider the options below! |
8 |
| - |
9 |
| -</Intro> |
10 |
| - |
11 |
| -## Choose your own adventure {/*choose-your-own-adventure*/} |
12 |
| - |
13 |
| -React is a library that lets you organize UI code by breaking it apart into pieces called components. React doesn't take care of routing or data management. For these features, you'll want to use third-party libraries or write your own solutions. This means there are several ways to start a new React project: |
14 |
| - |
15 |
| -* Start with a **minimal set up with just a toolchain,** adding features to your project as necessary. |
16 |
| -* Start with an **opinionated framework** with common functionality already built in. |
17 |
| - |
18 |
| -Whether you're just getting started, looking to build something big, or want to set up your own toolchain, this guide will set you on the right path. |
19 |
| - |
20 |
| -## Getting started with a React toolchain {/*getting-started-with-a-react-toolchain*/} |
21 |
| - |
22 |
| -If you're just getting started with React, we recommend [Create React App](https://create-react-app.dev/), the most popular way to try out React's features and a great way to build a new single-page, client-side application. Create React App is an unopinionated toolchain configured just for React. Toolchains help with things like: |
23 |
| - |
24 |
| -* Scaling to many files and components |
25 |
| -* Using third-party libraries from npm |
26 |
| -* Detecting common mistakes early |
27 |
| -* Live-editing CSS and JS in development |
28 |
| -* Optimizing the output for production |
29 |
| - |
30 |
| -You can get started building with Create React App with one line of code in your terminal! (**Be sure you have [Node.js](https://nodejs.org/) installed!**) |
31 |
| - |
32 |
| -<TerminalBlock> |
33 |
| - |
34 |
| -npx create-react-app my-app |
35 |
| - |
36 |
| -</TerminalBlock> |
37 |
| - |
38 |
| -Now you can run your app with: |
39 |
| - |
40 |
| -<TerminalBlock> |
41 |
| - |
42 |
| -cd my-app |
43 |
| -npm start |
44 |
| - |
45 |
| -</TerminalBlock> |
46 |
| - |
47 |
| -For more information, [check out the official guide](https://create-react-app.dev/docs/getting-started). |
48 |
| - |
49 |
| -> Create React App doesn't handle backend logic or databases; it just creates a frontend build pipeline. This means you can use it with any backend you want. But if you're looking for more features like routing and server-side logic, read on! |
50 |
| -
|
51 |
| -### Other options {/*other-options*/} |
52 |
| - |
53 |
| -Create React App is great to get started working with React, but if you'd like an even lighter toolchain, you might try one of these other popular toolchains: |
54 |
| - |
55 |
| -* [Vite](https://vitejs.dev/guide/) |
56 |
| -* [Parcel](https://parceljs.org/) |
57 |
| -* [Snowpack](https://www.snowpack.dev/tutorials/react) |
58 |
| - |
59 |
| -## Building with React and a framework {/*building-with-react-and-a-framework*/} |
60 |
| - |
61 |
| -If you're looking to start a bigger, production-ready project, [Next.js](https://nextjs.org/) is a great place to start. Next.js is a popular, lightweight framework for static and server‑rendered applications built with React. It comes pre-packaged with features like routing, styling, and server-side rendering, getting your project up and running quickly. |
62 |
| - |
63 |
| -[Get started building with Next.js](https://nextjs.org/docs/getting-started) with the official guide. |
64 |
| - |
65 |
| -### Other options {/*other-options-1*/} |
66 |
| - |
67 |
| -* [Gatsby](https://www.gatsbyjs.org/) lets you generate static websites with React with GraphQL. |
68 |
| -* [Razzle](https://razzlejs.org/) is a server-rendering framework that doesn't require any configuration, but offers more flexibility than Next.js. |
69 |
| - |
70 |
| -## Custom toolchains {/*custom-toolchains*/} |
71 |
| - |
72 |
| -You may prefer to create and configure your own toolchain. A JavaScript build toolchain typically consists of: |
73 |
| - |
74 |
| -* A **package manager**—lets you install, updated and manage third-party packages. [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) are two popular package managers. |
75 |
| -* A **bundler**—lets you write modular code and bundle it together into small packages to optimize load time. [Webpack](https://webpack.js.org/), [Snowpack](https://www.snowpack.dev/), [Parcel](https://parceljs.org/) are several popular bundlers. |
76 |
| -* A **compiler**—lets you write modern JavaScript code that still works in older browsers. [Babel](https://babeljs.io/) is one such example. |
77 |
| - |
78 |
| -In a larger project, you might also want to have a tool to manage multiple packages in a single repository. [Nx](https://nx.dev/react) is an example of such a tool. |
79 |
| - |
80 |
| -If you prefer to set up your own JavaScript toolchain from scratch, [check out this guide](https://blog.usejournal.com/creating-a-react-app-from-scratch-f3c693b84658) that re-creates some of the Create React App functionality. |
| 1 | +--- |
| 2 | +title: Tworzenie nowego projektu reactowego |
| 3 | +--- |
| 4 | + |
| 5 | +<Intro> |
| 6 | + |
| 7 | +Jeśli dopiero uczysz się Reacta lub planujesz dodać go do istniejącego projektu, możesz zacząć od [dodania Reacta do dowolnej strony HTML za pomocą tagu `script`](/learn/add-react-to-a-website). Jeśli natomiast twój projekt będzie wymagał wielu komponentów i plików, warto zastanowić się nad jedną z poniższych opcji! |
| 8 | + |
| 9 | +</Intro> |
| 10 | + |
| 11 | +## Wybierz własną przygodę {/_choose-your-own-adventure_/} |
| 12 | + |
| 13 | +React jest biblioteką, która pozwala zorganizować kod UI poprzez jego podział na tak zwane komponenty. React nie zajmuje się routingiem czy zarządzaniem danymi - jeśli są ci potrzebne, rozważ użycie bibliotek zewnętrznych lub napisanie własnego rozwiązania. Oznacza to jednak, że projekt reactowy można wystartować na kilka sposobów: |
| 14 | + |
| 15 | +- Z **minimalną konfiguracją i zestawem narzędzi,** dodając samodzielnie kolejne funkcjonalności do projektu w razie potrzeby. |
| 16 | +- Z jednym z **dogmatycznych frameworków** posiadających większość potrzebnych rzeczy. |
| 17 | + |
| 18 | +Bez względu na to, czy dopiero zaczynasz, planujesz stworzyć coś wielkiego czy chcesz skonstruować swój własny zestaw narzędzi, ten poradnik nakieruje cię na właściwą drogę. |
| 19 | + |
| 20 | +## Start z zestawem narzędzi reactowych {/_getting-started-with-a-react-toolchain_/} |
| 21 | + |
| 22 | +Jeśli dopiero zaczynasz przygodę z Reactem, polecamy skorzystać z [Create React App](https://create-react-app.dev/), najpopularniejszego skryptu do eksperymentowania z Reactem i jednocześnie świetnego narzędzia do budowania nowych single-page applications (_pol._ jednostronnicowych aplikacji) działających po stronie klienta. Create React App jest otwartym zestawem narzędzi skonfigurowanych wprost pod Reacta. Zestawy narzędzi pomagają między innymi w: |
| 23 | + |
| 24 | +- Skalowaniu aplikacji na wiele plików i komponentów |
| 25 | +- Używaniu bibliotek zewnętrznych z npm |
| 26 | +- Wczesnym wyłapywaniu częstych pomyłek |
| 27 | +- Rozwijaniu styli CSS i kodu JS z podglądem na żywo |
| 28 | +- Optymalizowaniu zbudowanej paczki pod produkcję |
| 29 | + |
| 30 | +Aby rozpocząć pracę z Create React App, wystarczy jedna linijka kodu w konsoli! (**Upewnij się, że masz zainstalowany [Node.js](https://nodejs.org/)!**) |
| 31 | + |
| 32 | +<TerminalBlock> |
| 33 | + |
| 34 | +npx create-react-app my-app |
| 35 | + |
| 36 | +</TerminalBlock> |
| 37 | + |
| 38 | +Teraz możesz uruchomić swoją aplikację za pomocą: |
| 39 | + |
| 40 | +<TerminalBlock> |
| 41 | + |
| 42 | +cd my-app |
| 43 | +npm start |
| 44 | + |
| 45 | +</TerminalBlock> |
| 46 | + |
| 47 | +Po więcej informacji [sięgnij do oficjalnego poradnika](https://create-react-app.dev/docs/getting-started). |
| 48 | + |
| 49 | +> Create React App nie obsługuje logiki backendowej ani baz danych; tworzy jedynie frontendowy potok budujący (_ang._ build pipeline). Oznacza to, że możesz go używać z dowolnym backendem. Jeśli jednak szukasz dodatkowych funkcjonalności, jak routing czy server-side logic (_pol._ logika po stronie serwera), czytaj dalej! |
| 50 | +
|
| 51 | +### Inne opcje {/_other-options_/} |
| 52 | + |
| 53 | +Create React App jest świetny na początek przygody z Reactem, lecz jeśli zależy ci na lżejszym i szybszym zestawie narzędzi, wypróbuj jednego z poniższych: |
| 54 | + |
| 55 | +- [Vite](https://vitejs.dev/guide/) |
| 56 | +- [Parcel](https://parceljs.org/) |
| 57 | +- [Snowpack](https://www.snowpack.dev/tutorials/react) |
| 58 | + |
| 59 | +## Budowanie przy pomocy Reacta i frameworku {/_building-with-react-and-a-framework_/} |
| 60 | + |
| 61 | +Jeśli planujesz rozpocząć większy projekt produkcyjny, zacznij od [Next.js](https://nextjs.org/). Next.js to popularny, lekki framework do tworzenia aplikacji statycznych i renderowanych po stronie serwera, zbudowanych przy użyciu Reacta. Wraz z nim otrzymasz takie funkcjonalności jak: routing, stylowanie czy renderowanie po stronie serwera, co znacznie przyspieszy początkową fazę projektu. |
| 62 | + |
| 63 | +Więcej informacji o tym, jak [zacząć projekt z Next.js](https://nextjs.org/docs/getting-started) znajdziesz w oficjalnym poradniku. |
| 64 | + |
| 65 | +### Inne opcje {/_other-options-1_/} |
| 66 | + |
| 67 | +- [Gatsby](https://www.gatsbyjs.org/) pozwala na generowanie statycznych stron internetowych napisanych z użyciem Reacta i GraphQL. |
| 68 | +- [Razzle](https://razzlejs.org/) jest frameworkiem renderującym po stronie serwera, który nie wymaga żadnej konfiguracji, a mimo to jest bardziej elastyczny niż Next.js. |
| 69 | + |
| 70 | +## Własny zestaw narzędzi {/_custom-toolchains_/} |
| 71 | + |
| 72 | +Być może jednak interesuje cię stworzenie i skonfigurowanie własnego zestawu narzędzi. Taki zestaw do budowania w JavaScripcie zwykle składa się z: |
| 73 | + |
| 74 | +- **Menadżera pakietów** — pozwala instalować, aktualizować i zarządzać zewnętrznymi bibliotekami. Najpopularniejsze są [Yarn](https://yarnpkg.com/) oraz [npm](https://www.npmjs.com/). |
| 75 | +- **Bundlera** (_pol._ skrypt pakujący) — pozwala pisać modularny kod i spakować go do małych pakietów w celu zoptymalizowania czasu ładowania aplikacji. Najpopularniejsze przykłady to: [Webpack](https://webpack.js.org/), [Snowpack](https://www.snowpack.dev/) oraz [Parcel](https://parceljs.org/). |
| 76 | +- **Kompilator** — pozwala pisać nowoczesny kod JavaScript, który będzie działał w starszych przeglądarkach. Dobrym przykładem jest [Babel](https://babeljs.io/). |
| 77 | + |
| 78 | +W większych projektach przydaje się także narzędzie do zarządzania wieloma paczkami w ramach jednego repozytorium. Dobrym przykładem takiego narzędzia jest [Nx](https://nx.dev/react). |
| 79 | + |
| 80 | +Jeśli mimo wszystko chcesz stworzyć swój własny zestaw narzędzi javascriptowych od zera, [przeczytaj ten artykuł](https://blog.usejournal.com/creating-a-react-app-from-scratch-f3c693b84658), w którym autor odtwarza część funkcjonalności Create React App. |
0 commit comments