Öğretici: Yeni başlayanlar için Windows'ta React

React'i kullanmaya yeni başladıysanız, bu kılavuz bazı temel bilgileri kullanmaya başlamanıza yardımcı olacaktır.

• Birkaç temel terim ve kavram
• Visual Studio Code'da React kullanmayı deneyin
• React'i BIR API ile kullanmayı deneyin

Önkoşullar

• Windows'a React yükleme
• Linux için Windows Alt Sisteminde React'i yükleme
• VS Code'u yükleyin. React'i Windows'ta veya WSL'de kullanmayı planlayıp planlamadığınıza bakılmaksızın Vs Code'u Windows'a yüklemenizi öneririz.

Birkaç temel terim ve kavram

React, kullanıcı arabirimleri oluşturmaya yönelik bir JavaScript kitaplığıdır.

• Açık kaynak , yani sorunları veya pull request göndererek buna katkıda bulunabilirsiniz. (Tıpkı gibi bu belgeler!)

• Bildirim temellidir, yani istediğiniz kodu yazarsınız ve React bu bildirilen kodu alır ve istenen sonucu elde etmek için tüm JavaScript/DOM adımlarını gerçekleştirir.

• Bileşen tabanlı, uygulamaların, kendi durumlarını yöneten ve prefabrik, yeniden kullanılabilir bağımsız kod modülleri kullanılarak oluşturulduğu anlamına gelir. React çerçevesi kullanılarak bu modüller bir araya getirilir ve böylece durumu DOM'dan bağımsız tutarken uygulamanızda veri iletimi sağlanabilir.

• React sloganı "Bir kez öğren, her yere yaz" şeklindedir. Amaç kodu yeniden kullanmak ve React kullanıcı arabirimini diğer teknolojilerle nasıl kullanacağınız hakkında varsayımlarda bulunmak değil, mevcut kodu yeniden yazmaya gerek kalmadan bileşenleri yeniden kullanılabilir hale getirmektir.

• JSX , React ile kullanılmak üzere yazılmış ve HTML gibi görünen bir JavaScript söz dizimi uzantısıdır, ancak aslında derlenmesi veya normal JavaScript'e çevrilmesi gereken bir JavaScript dosyasıdır.

• Sanal DOM: DOM , Belge Nesne Modeli anlamına gelir ve uygulamanızın kullanıcı arabirimini temsil eder. Uygulamanızın kullanıcı arabiriminin durumu her değiştiğinde, DOM değişikliği temsil eden şekilde güncelleştirilir. DOM sık sık güncelleştirildiğinde performans yavaşlar. Sanal DOM yalnızca DOM'un görsel bir gösterimidir, bu nedenle uygulamanın durumu değiştiğinde sanal DOM gerçek DOM yerine güncelleştirilir ve performans maliyetini düşürür. DoM nesnesinin basit bir kopyası gibi bir gösterimi.

• Görünümler: kullanıcının tarayıcıda gördüğü şekilde görüntülenen görünümlerdir. React'te görünüm, kullanıcının ekranında görmesini istediğiniz işleme öğeleri kavramıyla ilgilidir.

• Durum: Farklı görünümler tarafından depolanan verileri ifade eder. Durum genellikle kullanıcının kim olduğuna ve kullanıcının ne yaptığına bağlıdır. Örneğin, bir web sitesinde oturum açarken kullanıcı profiliniz (görünüm) adınızla (durum) görüntülenebilir. Durum verileri kullanıcıya göre değişir, ancak görünüm aynı kalır. Durum, kullanıcının uygulamayla etkileşiminin çoğunu elde etmek için kullanılır.

• Bileşen Yayları: üst bileşenin bazı bilgileri bir değer veya veri (nesneler, diziler ve işlevler dahil) olarak alt bileşenlerine geçirmesi için bir yoldur. Prop'lar yalnızca okunabilir durumundadır ve çocuk bileşen tarafından güncellenemez.

Visual Studio Code'da React kullanmayı deneyin

React ile uygulama oluşturmanın birçok yolu vardır (örnekler için React'e Genel Bakış'a bakın). Bu öğreticide, çalışan react uygulamasının kurulumunu hızlı bir şekilde iletmek için vite'nin nasıl kullanılacağı anlatılacaktır. Bu sayede çalışır durumda olduğunu görebilir ve henüz derleme araçlarıyla ilgilenmeden kodla denemelere odaklanabilirsiniz.

1. Yeni bir proje oluşturmak için Windows veya WSL'de vite kullanın ( yukarıdaki önkoşullara bakın): npm create vite@latest hello-world -- --template react

2. Yeni uygulamanızın klasörünün içinde olacak şekilde dizinleri değiştirin: cd hello-worldbağımlılıkları yükleyin: npm install ve ardından yerel geliştirme sunucunuzu başlatın: npm run dev

   Yeni React Hello World uygulamanız derlenip çalıştığını http://localhost:5173 üzerinde göstermek için varsayılan web tarayıcınızı açar.

3. React uygulamanızı çalıştırmayı durdurun (Ctrl+c) ve şunu girerek VS Code'da kod dosyalarını açın: code .

4. src/App.jsx dosyasını bulun ve şu üst bilgi bölümünü bulun:

   <p>Edit <code>src/App.jsx</code> and save to test HMR</p>
   

   "Okunacak şekilde değiştirin:"

   <p>Hello World! This is my first React app.</p>
   

5. Terminal pencerenizi açın ve yerel geliştirme sunucunuzu başlatın: npm run dev veya tümleşik VS Code terminalini (Ctrl + ') kullanabilir ve geliştirme sunucunuzu buradan başlatabilirsiniz.

   

React uygulamanızın geliştirilmesi boyunca yerel geliştirme sunucunuzu çalışır durumda tutabilirsiniz ve tüm değişiklikler tarayıcınızda hemen işlenir http://localhost:5173 .

Uygulama dosyası yapısı

İlk dosya yapısı şuna benzer:

hello-world
├── node_modules 
├── README.md 
├── index.html
├── package-lock.json
├── package.json
├── public
│   └── vite.svg
├── src
│   ├── App.css
│   ├── App.jsx
│   ├── assets
│   │   └── react.svg
│   ├── index.css
│   └── main.jsx
└── vite.config.js

Yeni başlayanlar için bilmeniz gereken önemli dosya ve klasörler bunlardır.

index.html , Vite'in tarayıcınızın çalıştırdığı klasörden src kodunuzu eklediği dosyadır. React uygulamanızın başlığını değiştirmek dışında bu dosya düzenlenmemelidir.

src Klasör, React uygulamanızın kaynak kodunun bulunduğu yerdir. Burası özel bileşenlerinizi, CSS dosyalarınızı ve uygulamanızı oluşturmak için ihtiyacınız olan diğer kod dosyalarını oluşturduğunuz yerdir. Bu dosyalar, Vite'in derleme araçları tarafından, son React projenizi oluşturmak üzere, ayrıştırılır ve derlenir.

Klasör, public doğrudan tarayıcınıza sunulacak tüm statik dosyalarınızı içerir. Bu dosyalar Vite tarafından işlenmez.

React'i BIR API ile kullanmayı deneyin

Aynı Hello World'i kullanma! React ile oluşturduğunuz ve Visual Studio Code ile güncelleştirdiğiniz uygulama, bazı verileri görüntülemek için bir API çağrısı eklemeyi deneyelim.

1. Yeni bir başlangıç başlayalım. Vite tarafından sağlanan hemen hemen tüm kalıp kodu kaldıracak ve sadece önceki adımdaki kodumuzu tutacağız.

   App.jsx dosyanız şu şekilde görünmelidir:

   import "./App.css";
   
   function App() {
     return (
       <>
         <p>Hello world! This is my first React app.</p>
       </>
     );
   }
   
   export default App;
   

   

2. Şimdi api'den veri kaydedebileceğimiz yerel bir durum ayarlayalım. Durum, görünümde kullanılacak verileri depolayabileceğiniz yerdir.

   Yerel durum eklemek için önce bileşeninize durum değişkeni eklemenize olanak tanıyan useState React Kancasını içeri aktarmamız gerekir.

   Ayrıca yerel durumu oluşturmamız gerekiyor. useState iki değerden oluşan bir dizi döndürür; geçerli durum ve set işlevi. Geçerli durumumuzu, daha sonra API'mizden veri ekleyebilmemiz için posts işlevini kullanarak doldurabileceğimiz bir boş dizi olarak tanımlayıp setPosts adını vereceğiz.

   App.jsx dosyanız şu şekilde görünmelidir:

   import { useState } from "react";
   import "./App.css";
   
   function App() {
     const [posts, setPosts] = useState([]);
   
     return (
       <>
         <p>Hello world! This is my first React app.</p>
       </>
     );
   }
   
   export default App;
   

3. React uygulamamızda kullanabileceğimiz verileri içeren bir API çağırmak için .fetch JavaScript yöntemini kullanacağız. Çağıracağımız API, JSON biçiminde sahte yer tutucu verileri sunan test ve prototip oluşturma için ücretsiz bir API olan JSONPlaceholder'dır.

   Durumu güncelleştirmek üzere set işlevini kullanarak postsuseEffect React hook'unu kullanırız.

   import { useState, useEffect } from "react";
   import "./App.css";
   
   function App() {
     const [posts, setPosts] = useState([]);
   
     useEffect(() => {
       const url = "https://jsonplaceholder.typicode.com/albums/1/photos";
       fetch(url)
         .then((response) => response.json())
         .then((data) => setPosts(data));
     }, []);
   
     return (
       <>
         <p>Hello world! This is my first React app.</p>
       </>
     );
   }
   
   export default App;
   

4. Şimdi API'nin durumumuzda posts ne tür veriler kaydettiğine göz atalım. Sahte JSON API dosyasının içeriklerinden bazıları aşağıda verilmiştir. "albumId", "id", "title", "url" ve "thumbnailUrl" kategorilerini kullanarak verilerin listelendiği biçimi görebiliriz.

   [
     {
       "albumId": 1,
       "id": 1,
       "title": "accusamus beatae ad facilis cum similique qui sunt",
       "url": "https://via.placeholder.com/600/92c952",
       "thumbnailUrl": "https://via.placeholder.com/150/92c952"
     },
     {
       "albumId": 1,
       "id": 2,
       "title": "reprehenderit est deserunt velit ipsam",
       "url": "https://via.placeholder.com/600/771796",
       "thumbnailUrl": "https://via.placeholder.com/150/771796"
     }
   ]
   

5. API verilerini görüntülemek için artık işlenen return() deyiminin içine biraz JSX kodu eklememiz gerekir. yöntemini kullanarak map() içinde depoladığımız nesnedeki posts verilerimizi anahtar olarak görüntüleyeceğiz. Her gönderide "Id #" ile bir üst bilgi ve ardından JSON verilerimizdeki post.id anahtar değeri + post.title anahtar değeri görüntülenir. Ardından thumbnailUrl anahtar değerine göre görüntüyü gösteren gövde.

   // rest of the code 
     return (
       <article>
         <h1>Posts from our API call</h1>
         {posts.map((post) => (
           <article key={post.id}>
             <h2>ID #{post.id} {post.title}</h2>
             <img src={post.thumbnailUrl} />
           </article>
         ))}
       </article>
     );
   }
   
   export default App;
   

   

Ek kaynaklar

• resmi React belgeleri React ile ilgili en son up-togüncel bilgilerin tümünü sunar
• React Geliştirici Araçları için Microsoft Edge Eklentileri: React geliştirmenize yardımcı olması için Microsoft Edge geliştirme araçlarınıza iki sekme ekler: Bileşenler ve Profil Oluşturucu.
• React öğrenme yolu, temel bilgileri kullanmaya başlamanıza yardımcı olacak çevrimiçi kurs modülleri içerir.