|
1 | 1 | ---
|
2 | 2 | id: create-a-new-react-app
|
3 |
| -title: Create a New React App |
| 3 | +title: Yeni bir React Uygulaması Oluşturun |
4 | 4 | permalink: docs/create-a-new-react-app.html
|
5 | 5 | redirect_from:
|
6 | 6 | - "docs/add-react-to-a-new-app.html"
|
7 | 7 | prev: add-react-to-a-website.html
|
8 | 8 | next: cdn-links.html
|
9 | 9 | ---
|
10 | 10 |
|
11 |
| -Use an integrated toolchain for the best user and developer experience. |
| 11 | +En iyi kullanıcı ve geliştirici deneyimi için tümleşik araç kullanın. |
12 | 12 |
|
13 |
| -This page describes a few popular React toolchains which help with tasks like: |
| 13 | +Bu sayfa, görevlere yardımcı olan bazı popüler araçları anlatır. |
14 | 14 |
|
15 |
| -* Scaling to many files and components. |
16 |
| -* Using third-party libraries from npm. |
17 |
| -* Detecting common mistakes early. |
18 |
| -* Live-editing CSS and JS in development. |
19 |
| -* Optimizing the output for production. |
| 15 | +* Birçok dosya ve bileşene ölçeklendirme. |
| 16 | +* Npm'den üçüncü parti kütüphanelerin kullanımı. |
| 17 | +* Yaygın hataların erken farkedilmesi. |
| 18 | +* JS ve CSS'in geliştirme anında canlı olarak güncellenmesi. |
| 19 | +* Çıktının ürün için optimize edilmesi. |
20 | 20 |
|
21 |
| -The toolchains recommended on this page **don't require configuration to get started**. |
| 21 | +Bu sayfada tavsiye edilen araçlar **başlangıç için ayarlama gerektirmez**. |
22 | 22 |
|
23 |
| -## You Might Not Need a Toolchain {#you-might-not-need-a-toolchain} |
| 23 | +## Bir Araca İhtiyacınız Olmayabilir {#you-might-not-need-a-toolchain} |
24 | 24 |
|
25 |
| -If you don't experience the problems described above or don't feel comfortable using JavaScript tools yet, consider [adding React as a plain `<script>` tag on an HTML page](/docs/add-react-to-a-website.html), optionally [with JSX](/docs/add-react-to-a-website.html#optional-try-react-with-jsx). |
| 25 | +Eğer yukarıda anlatılan sorunlarla karşılaşmazsanız veya henüz kendinizi JavaScript araçları kullanmak konusunda rahat hissetmiyorsanız, [React'i yalın `<script>` etiketi ile HTML sayfasına eklemek](/docs/add-react-to-a-website.html) (isterseniz [JSX ile birlikte](/docs/add-react-to-a-website.html#optional-try-react-with-jsx)) seçeneğini aklınızda bulundurun. |
26 | 26 |
|
27 |
| -This is also **the easiest way to integrate React into an existing website.** You can always add a larger toolchain if you find it helpful! |
| 27 | +Bu aynı zamanda **Hâlihazırda var olan web sitesine React'i entegre etmenin en kolay yoludur.** Eğer yardımcı olabileceğini düşünüyorsanız, her zaman daha büyük bir araç ekleyebilirsiniz! |
28 | 28 |
|
29 |
| -## Recommended Toolchains {#recommended-toolchains} |
| 29 | +## Tavsiye Edilen Araçlar {#recommended-toolchains} |
30 | 30 |
|
31 |
| -The React team primarily recommends these solutions: |
| 31 | +React takımı öncelikli olarak şu çözümleri öneriyor: |
32 | 32 |
|
33 |
| -- If you're **learning React** or **creating a new [single-page](/docs/glossary.html#single-page-application) app,** use [Create React App](#create-react-app). |
34 |
| -- If you're building a **server-rendered website with Node.js,** try [Next.js](#nextjs). |
35 |
| -- If you're building a **static content-oriented website,** try [Gatsby](#gatsby). |
36 |
| -- If you're building a **component library** or **integrating with an existing codebase**, try [More Flexible Toolchains](#more-flexible-toolchains). |
| 33 | +- Eğer **React öğreniyorsanız** veya **yeni bir [tek sayfa](/docs/glossary.html#single-page-application) uygulama oluşturuyorsanız,** [Create React App](#create-react-app) kullanın. |
| 34 | +- Eğer **Node.js ile sunucu tarafında işlenen bir sayfa** geliştiriyorsanız [Next.js](#nextjs)'i deneyin. |
| 35 | +- Eğer **sabit içerikli bir websitesi,** geliştiriyorsanız [Gatsby](#gatsby)'i deneyin. |
| 36 | +- Eğer **bileşen kütüphanesi** geliştiriyor veya **var olan bir kod temeli ile entegre ediyorsanız**, [Daha esnek araçlar](#daha-esnek-araclar)'ı deneyin. |
37 | 37 |
|
38 | 38 | ### Create React App {#create-react-app}
|
39 | 39 |
|
40 |
| -[Create React App](https://github.com/facebookincubator/create-react-app) is a comfortable environment for **learning React**, and is the best way to start building **a new [single-page](/docs/glossary.html#single-page-application) application** in React. |
| 40 | +[Create React App](https://github.com/facebookincubator/create-react-app) **React ögrenmek** için rahat bir ortamdır ve React ile **yeni bir [tek sayfa](/docs/glossary.html#single-page-application) uygulama** geliştirmeye başlamanın en iyi yoludur. |
41 | 41 |
|
42 |
| -It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production. You’ll need to have Node >= 6 and npm >= 5.2 on your machine. To create a project, run: |
| 42 | +En son JavaScript özelliklerini kullanabilmeniz için geliştirme ortamınızı kurar, güzel bir geliştirici deneyimi sağlar ve uygulamanızı ürün için optimize eder. Bilgisayarınızda Node >= 6 ve npm >= 5.2 sürümlerinin yüklü olması gerekir. Bir proje oluşturmak için: |
43 | 43 |
|
44 | 44 | ```bash
|
45 | 45 | npx create-react-app my-app
|
46 | 46 | cd my-app
|
47 | 47 | npm start
|
48 | 48 | ```
|
49 | 49 |
|
50 |
| ->Note |
| 50 | +komutlarını çalıştın. |
| 51 | + |
| 52 | +>Not |
51 | 53 | >
|
52 |
| ->`npx` on the first line is not a typo -- it's a [package runner tool that comes with npm 5.2+](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b). |
| 54 | +>ilk satırdaki `npx` bir yazım hatası değildir. -- [npm 5.2+ ile gelen bir paket çalıştırma aracıdır](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b). |
53 | 55 |
|
54 |
| -Create React App doesn't handle backend logic or databases; it just creates a frontend build pipeline, so you can use it with any backend you want. Under the hood, it uses [Babel](https://babeljs.io/) and [webpack](https://webpack.js.org/), but you don't need to know anything about them. |
| 56 | +Create React App, backend mantığı veya veritabanlarını idare etmez; sadece frontend geliştirme düzenini oluşturur, yani bunu istediğiniz herhangi bir backend ile kullanabilirsiniz. Arka planda, [Babel](https://babeljs.io/) ve [webpack](https://webpack.js.org/) kullanır, fakat bunlar hakkında hiçbir şey bilmeniz gerekmiyor. |
55 | 57 |
|
56 |
| -When you're ready to deploy to production, running `npm run build` will create an optimized build of your app in the `build` folder. You can learn more about Create React App [from its README](https://github.com/facebookincubator/create-react-app#create-react-app-) and the [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#table-of-contents). |
| 58 | +Ürün yayınlamaya hazır olduğunuzda, `npm run build` komutunu çalıştırmak `build` klasöründe uygulamanızın optimize edilmiş bir derlemesini oluşturur. Create React App hakkında daha fazlasını [kendi README'sinden](https://github.com/facebookincubator/create-react-app#create-react-app-) ve [Kullanıcı rehberinden](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#table-of-contents) öğrenebilirsiniz. |
57 | 59 |
|
58 | 60 | ### Next.js {#nextjs}
|
59 | 61 |
|
60 |
| -[Next.js](https://nextjs.org/) is a popular and lightweight framework for **static and server‑rendered applications** built with React. It includes **styling and routing solutions** out of the box, and assumes that you're using [Node.js](https://nodejs.org/) as the server environment. |
| 62 | +[Next.js](https://nextjs.org/) React ile **statik ve sunucu tarafından işlenen uygulamalar** geliştirmek için popüler ve hafif bir çatıdır. Hazır olarak **stillendirme ve yönlendirme çözümleri** içerir, ve sunucu ortamı olarak [Node.js](https://nodejs.org/) kullandığınızı varsayar. |
61 | 63 |
|
62 |
| -Learn Next.js from [its official guide](https://nextjs.org/learn/). |
| 64 | +Next.js'i [resmi rehberinden](https://nextjs.org/learn/) öğrenin. |
63 | 65 |
|
64 | 66 | ### Gatsby {#gatsby}
|
65 | 67 |
|
66 |
| -[Gatsby](https://www.gatsbyjs.org/) is the best way to create **static websites** with React. It lets you use React components, but outputs pre-rendered HTML and CSS to guarantee the fastest load time. |
| 68 | +[Gatsby](https://www.gatsbyjs.org/), React ile **statik web siteleri** geliştirmenin en iyi yoludur. React bileşenlerini kullanmanıza olanak sağlar, fakat en hızlı yükleme süresini garanti etmek için önceden işlenmiş HTML ve CSS çıktılarını verir. |
67 | 69 |
|
68 |
| -Learn Gatsby from [its official guide](https://www.gatsbyjs.org/docs/) and a [gallery of starter kits](https://www.gatsbyjs.org/docs/gatsby-starters/). |
| 70 | +Gatsby'i [resmi rehberinden](https://www.gatsbyjs.org/docs/) veya [yeni başlayanlar galerisinden](https://www.gatsbyjs.org/docs/gatsby-starters/) öğrenin. |
69 | 71 |
|
70 |
| -### More Flexible Toolchains {#more-flexible-toolchains} |
| 72 | +### Daha Esnek Araçlar {#more-flexible-toolchains} |
71 | 73 |
|
72 |
| -The following toolchains offer more flexiblity and choice. We recommend them to more experienced users: |
| 74 | +Devamındaki araçlar daha fazla esneklik ve seçenek sunar. Bunları daha tecrübeli kullanıcılar için öneriyoruz: |
73 | 75 |
|
74 |
| -- **[Neutrino](https://neutrinojs.org/)** combines the power of [webpack](https://webpack.js.org/) with the simplicity of presets, and includes a preset for [React apps](https://neutrinojs.org/packages/react/) and [React components](https://neutrinojs.org/packages/react-components/). |
| 76 | +- **[Neutrino](https://neutrinojs.org/)**; [webpack](https://webpack.js.org/)'in gücünü ön ayarların sadeliği ile birleştirir, [React uygulamaları](https://neutrinojs.org/packages/react/) ve [React bileşenleri](https://neutrinojs.org/packages/react-components/) için bir ön ayar da içerir. |
75 | 77 |
|
76 |
| -- **[nwb](https://github.com/insin/nwb)** is particularly great for [publishing React components for npm](https://github.com/insin/nwb/blob/master/docs/guides/ReactComponents.md#developing-react-components-and-libraries-with-nwb). It [can be used](https://github.com/insin/nwb/blob/master/docs/guides/ReactApps.md#developing-react-apps-with-nwb) for creating React apps, too. |
| 78 | +- **[nwb](https://github.com/insin/nwb)**; Bilhassa [npm için React bileşenleri yayımlamak](https://github.com/insin/nwb/blob/master/docs/guides/ReactComponents.md#developing-react-components-and-libraries-with-nwb) için mükemmeldir. React uygulamaları oluşturmak için de [kullanılabilir](https://github.com/insin/nwb/blob/master/docs/guides/ReactApps.md#developing-react-apps-with-nwb) |
77 | 79 |
|
78 |
| -- **[Parcel](https://parceljs.org/)** is a fast, zero configuration web application bundler that [works with React](https://parceljs.org/recipes.html#react). |
| 80 | +- **[Parcel](https://parceljs.org/)**; [React ile çalışan](https://parceljs.org/recipes.html#react), hızlı, ayarlama gerektirmeyen bir web uygulama paketleyicisidir. |
79 | 81 |
|
80 |
| -- **[Razzle](https://github.com/jaredpalmer/razzle)** is a server-rendering framework that doesn't require any configuration, but offers more flexibility than Next.js. |
| 82 | +- **[Razzle](https://github.com/jaredpalmer/razzle)**; herhangi bir yapılandırma gerektirmeyen ancak Next.js'e göre daha fazla esneklik sunan, bir sunucu tarafinda işleme çatısıdır. |
81 | 83 |
|
82 |
| -## Creating a Toolchain from Scratch {#creating-a-toolchain-from-scratch} |
| 84 | +## Sıfırdan Bir Araç Zinciri Oluşturmak {#creating-a-toolchain-from-scratch} |
83 | 85 |
|
84 |
| -A JavaScript build toolchain typically consists of: |
| 86 | +Bir JavaScript derleme araç zinciri tipik olarak aşağıdakilerden oluşur: |
85 | 87 |
|
86 |
| -* A **package manager**, such as [Yarn](https://yarnpkg.com/) or [npm](https://www.npmjs.com/). It lets you take advantage of a vast ecosystem of third-party packages, and easily install or update them. |
| 88 | +* Bir **paket yöneticisi**, [Yarn](https://yarnpkg.com/) veya [npm](https://www.npmjs.com/) gibi. Bu, uçsuz bucaksız üçüncü parti paket ekosisteminden faydalanmanıza ve bunları kolayca yüklemenize ve güncellemenize olanak sağlar. |
87 | 89 |
|
88 |
| -* A **bundler**, such as [webpack](https://webpack.js.org/) or [Parcel](https://parceljs.org/). It lets you write modular code and bundle it together into small packages to optimize load time. |
| 90 | +* Bir **paketleyici**, [webpack](https://webpack.js.org/) veya [Parcel](https://parceljs.org/) gibi. Bu, modüler kod yazmanıza ve yazdığınız kodları yükleme zamanını optimize etmek için küçük parçalar halinde beraber paketlemenize olanak sağlar. |
89 | 91 |
|
90 |
| -* A **compiler** such as [Babel](https://babeljs.io/). It lets you write modern JavaScript code that still works in older browsers. |
| 92 | +* Bir **derleyici** [Babel](https://babeljs.io/) gibi. Bu, yazdığınız modern JavaScript kodunun eski tarayıcılarda da çalışmasını sağlar. |
91 | 93 |
|
92 |
| -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. |
| 94 | +Eğer sıfırdan kendi JavaScript araç zincirinizi kurmayı tercih ederseniz, bazı Create React App fonksiyonelliklerini yeniden oluşturan [şu rehbere bir göz atın](https://blog.usejournal.com/creating-a-react-app-from-scratch-f3c693b84658). |
93 | 95 |
|
94 |
| -Don't forget to ensure your custom toolchain [is correctly set up for production](/docs/optimizing-performance.html#use-the-production-build). |
| 96 | +Özel araç zincirinizin [ürün için doğru bir şekilde kurulduğunu](/docs/optimizing-performance.html#use-the-production-build) garanti altına almayı unutmayın. |
0 commit comments