New translations added:
- Day 01: JavaScript Refresher (01_Gun_JavaScript_Tazeleyici)
Complete coverage: adding JS to web, variables, data types, arrays,
conditionals, loops, scope, objects, functions, higher order functions,
destructuring, spread, functional programming, classes, DOM
- Day 06: Mapping Arrays (06_Gun_Dizi_Haritalama)
Covers mapping number arrays, arrays of arrays, arrays of objects,
and the importance of the key prop
- Day 07: Class Components (07_Gun_Class_Bilesenler)
Converting functional to class components, this.props access,
class methods, complete code examples
- Day 08: State / Durum (08_Gun_State)
What is state, setState(), counter example, cat/dog toggle example,
full combined app with state and props
- Day 09: Conditional Rendering / Kosullu Render (09_Gun_Kosullu_Render)
if/else, ternary operator, && operator, Login/Welcome components,
message state, exercises
- Day 10: React Project Folder Structure (10_Gun_Proje_Klasor_Yapisi)
File naming (CamelCase), folder structure, named vs default exports,
components folder organization, Fragments
Bug fixes in existing translations (Days 3-5):
- Fixed 'Author:' not translated -> 'Yazar:' in Days 3, 4, 5
- Fixed 'October, 2020' not translated -> 'Ekim, 2020' in Days 3, 4, 5 and readMe
Navigation improvements:
- readMe.md: updated top nav link from Day 2 to Day 1 (now that Day 1 exists)
- readMe.md: expanded table of contents from Days 2-5 to Days 1-10
- Day 05 (05_props.md): fixed both nav links for Day 6 to point to Turkish
version (06_Gun_Dizi_Haritalama) instead of English source
Translation conventions used throughout:
- Prose and headings fully translated to Turkish
- Code (variable/function names, JSX) left unchanged
- Code comments translated to Turkish
- React technical terms kept in English with Turkish in parentheses:
Component (Bilesen), State (Durum), Props (Ozellikler), Hook (Kanca),
Functional Component (Fonksiyonel Bilesen), Class Component (Sinif
Tabanlı Bilesen), Fragment (Parca), etc.
return len > 0 ? this.skills.join(" ") : "No skills found";
}
childMethod() {
// kod buraya gelir
}
}
const skills = ['HTML', 'CSS', 'JS', 'React']
const skills = ["HTML", "CSS", "JS", "React"];
const child = new Child(
'Asabeneh',
'Yetayeh',
'Finland',
'FullStack Developer',
skills
)
"Asabeneh",
"Yetayeh",
"Finland",
"FullStack Developer",
skills,
);
```
Fonksiyonu ve class'ı kısaca ele aldık. React bileşeni JavaScript fonksiyonlarından veya class'larından oluşur; o hâlde şimdi bir React bileşeni yapalım.
@ -130,10 +130,10 @@ Bir JavaScript fonksiyonu kullanarak işlevsel (functional) bir React bileşeni
```js
// React bileşen sözdizimi
// ok fonksiyonu, fonksiyon bildirimi veya fonksiyon ifadesi olabilir
const jsx = <tag> Content </tag>
const jsx = <tag> Content </tag>;
const ComponentName = () => {
return jsx
}
return jsx;
};
```
Aşağıdaki ifade bir JSX elementidir.
@ -142,7 +142,7 @@ Aşağıdaki ifade bir JSX elementidir.
2. Gün'deki tüm JSX elementlerini Functional Component'lere dönüştürdük; artık bileşenlere oldukça aşinasınız. Daha fazla bileşen oluşturalım. Bir bileşenin en küçük boyutu nedir? Yalnızca tek bir HTML öğesi döndüren JSX, küçük bileşen olarak kabul edilir. Örneğin bir buton bileşeni, bir uyarı kutusu bileşeni ya da yalnızca bir giriş alanı bileşeni.
```js
const Button = () => <button>action</button>
const Button = () => <button>action</button>;
```
_Button_ bileşeni tek bir HTML buton öğesinden oluşmaktadır.
@ -450,36 +450,36 @@ Bu butonu JavaScript stil nesnesi kullanarak biçimlendirelim. Bir JavaScript CS
Button bileşeni hiçbir parametre almadığı ve aksiyon metnini dinamik olarak değiştiremediğimiz için aptal bir bileşendir (dumb component). Değerin dinamik olarak değişebilmesi için butona props geçmemiz gerekir. Props konusunu bir sonraki bölümde inceleyeceğiz. Bugünkü dersi kapatmadan önce rastgele bir onaltılık (hexadecimal) renk sayısı görüntüleyen daha işlevsel bir bileşen daha yapalım.
```js
import React from 'react'
import ReactDOM from 'react-dom'
import React from "react";
import ReactDOM from "react-dom";
// Onaltılık renk üreteci
const hexaColor = () => {
let str = '0123456789abcdef'
let color = ''
let str = "0123456789abcdef";
let color = "";
for (let i = 0; i <6;i++){
let index = Math.floor(Math.random() * str.length)
color += str[index]
let index = Math.floor(Math.random() * str.length);
Dizi, birçok farklı problemi çözmek için en sık kullanılan veri yapısıdır. React'ta, bir dizideki her elemana belirli HTML element'leri ekleyerek bu diziyi JSX listesine dönüştürmek için map kullanırız.
## Dizi haritalama ve render etme
Çoğu zaman veriler bir dizi veya nesne dizisi şeklinde gelir. Bu dizi ya da nesne dizisini render etmek için çoğu zaman _map_ kullanarak veriyi değiştiririz. Önceki bölümde, techs listesini bir map metodu kullanarak render etmiştik. Bu bölümde daha fazla örnek göreceğiz.
Aşağıdaki örneklerde, tarayıcıda sayı dizisi, string dizisi, ülkeler dizisi ve beceriler dizisini nasıl render edeceğimizi göreceksiniz.
Tarayıcıyı kontrol ederseniz, sayıların tek bir satırda birbirine yapışık göründüğünü görürsünüz. Bunu önlemek için diziyi değiştiririz ve dizi elemanlarını JSX elementine çeviririz. Aşağıdaki örnekte, dizi bir JSX elemanları listesine dönüştürülmüştür.
### Sayı dizisini haritalama
```js
import React from "react";
import ReactDOM from "react-dom";
const Numbers = ({ numbers }) => {
// diziyi li JSX dizisine dönüştürme
const list = numbers.map((number) => <li>{number}</li>);
Key'ler (Anahtarlar), React'ın hangi elemanların değiştiğini, eklendiğini veya kaldırıldığını tanımlamasına yardımcı olur. Dizi içindeki elemanlara, o elemanlara kararlı bir kimlik kazandırmak için key verilmelidir. Key benzersiz olmalıdır. Çoğu zaman veriler bir id ile birlikte gelir ve bu id'yi key olarak kullanabiliriz. React'a haritalama sırasında key geçirmezsek tarayıcıda bir uyarı üretilir. Verinin id'si yoksa, haritalama sırasında her eleman için benzersiz bir tanımlayıcı oluşturmanın bir yolunu bulmamız gerekir. Aşağıdaki örneğe bakın:
```js
import React from "react";
import ReactDOM from "react-dom";
const Numbers = ({ numbers }) => {
// diziyi li JSX dizisine dönüştürme
const list = numbers.map((num) => <likey={num}>{num}</li>);
1. Verilen [veriyi](../06_Day_Map_List_Keys/06_map_list_keys_boilerplate/src/data/ten_most_highest_populations.js) kullanarak aşağıdaki çubuk grafiğini oluşturun.
🎉 TEBRİKLER! 🎉
[<< Gün 5](../05_Gun_Props/05_props.md) | [Gün 7 >>](../07_Gun_Class_Bilesenler/07_class_bilesenler.md)
Önceki bölümlerde JSX, Functional Component (Fonksiyonel Bileşen) ve Props (Özellikler) konularını ele aldık. Bu bölümde Class Component (Sınıf Tabanlı Bileşenler) veya stateful component (durumlu bileşen) konusunu ele alacağız. Yalnızca class tabanlı component'lerin state (durum) ve yaşam döngüsü metotları vardı. Ancak React 16.8.0 sürümünden sonra fonksiyonel component'ler de React Hook'ları (Kancalar) kullanarak state ve yaşam döngüsüne sahip olabilmektedir. 30 Days Of React meydan okumasında, hem eski hem yeni sürümü anlamak amacıyla React'ı 16.8.0 öncesi ve sonrasını kapsayacak şekilde ele alacağız. Eski sürümde yazılmış çok sayıda kod var ve bu kodlar belirli bir noktada taşınmayı gerektirebilir. Bunun yanı sıra, React'ı gerçekten iyi anlamak için class tabanlı component'leri de anlamak gerekmektedir.
Şimdiye kadar gördüğümüz tüm component'ler fonksiyonel component'tir. Şimdi class tabanlı component de oluşturalım. Class tabanlı component, JavaScript class'ı kullanılarak yapılır ve React Component'tan kalıtım alır. Daha önce oluşturduğumuz tüm fonksiyonel component'leri dönüştürerek class tabanlı component'in nasıl yapıldığını öğrenelim. Tümünü dönüştürmek zorunlu değildir; ancak fonksiyonel component'lerin class component'e nasıl dönüştürüldüğünü öğrenmek amacıyla bunu yapıyoruz.
```js
// Saf JavaScript class'ı ve child (çocuk) class
// React paketinden import ettiğimizi hayal edin
class Component {
constructor(props) {}
}
// Class tabanlı component'leri bu şekilde üst class'tan kalıtarak yaparız
Class tabanlı React Component (Bileşeni), React.Component'in bir child'ıdır (çocuğudur); yerleşik bir render metoduna sahiptir ve constructor içerebilir.
Props (Özellikler)'in, bir component'ten diğerine veri göndermenin yolu olduğunu ya da başka bir deyişle props'un bir veri taşıyıcısı olduğunu belirtmiştik. Bu nedenle, class tabanlı component'te de props'u işlememiz gerekir. Bir class tabanlı component'in props'una _this_ anahtar kelimesini kullanarak erişebiliriz. Aşağıdaki örneğe bakın:
```js
// index.js
import React from "react";
import ReactDOM from "react-dom";
// class tabanlı component
class Header extends React.Component {
constructor(props) {
super(props);
// constructor içindeki kod diğer tüm kodlardan önce çalışır
Yukarıdaki örnekte görüldüğü gibi, props'tan veriyi almak için her seferinde _props.data_ yazmamız gerekiyor. Destructuring (Parçalama) kullanarak bu tekrarı önleyebiliriz:
```js
// index.js
import React from "react";
import ReactDOM from "react-dom";
// class tabanlı component
class Header extends React.Component {
constructor(props) {
super(props);
// constructor içindeki kod diğer tüm kodlardan önce çalışır
Class tabanlı component'te metotlara erişiriz. Çoğu zaman farklı metotları üst (parent) component'te yazarız ve bunları alt (child) component'lere geçiririz. Uygulamayı görelim.
Bu component'e bir metot ekleyelim:
```js
//index.js
import React from "react";
import ReactDOM from "react-dom";
// class tabanlı component
class Header extends React.Component {
greetPeople = () => {
alert("Welcome to 30 Days Of React Challenge, 2020");
Metodu çağırmak veya tetiklemek event oluştuğunda gerçekleşir. Bu nedenle bir metodu event listener'a geçirirken metodu çağırmayın (parantez koymayın).
Şimdi sahip olduğumuz koda gerekli tüm metotları ekleyelim:
```js
// index.js
import React from "react";
import ReactDOM from "react-dom";
import asabenehImage from "./images/asabeneh.jpg";
Çoğu zaman kapsayıcı (container) veya üst (parent) component class component olarak yazılabilir; diğerleri ise fonksiyonel veya sunum (presentational) component olarak yazılabilir. Veri genellikle üst component'ten alt (child) component'e akar ve bu tek yönlüdür. Ancak React'ın en son sürümü, uygulamamızdaki her component'i yalnızca fonksiyonel component'lerle yazmamıza olanak tanımaktadır. Bu, önceki sürümlerde mümkün değildi.
Bir sonraki bölümde, React'ın kalbi olan State (Durum)'u ele alacağız. State (Durum), React component'inin her state değişikliğinde yeniden render edilmesine (tekrar oluşturulmasına) olanak tanır.
# Egzersizler
## Egzersizler: Seviye 1
1. Saf bir JavaScript fonksiyonunu nasıl yazarsınız?
2. Inheritance (Kalıtım) nedir ve bir üst class'tan (parent class) nasıl child class oluşturursunuz?
3. Class tabanlı React Component (Bileşeni) nedir?
4. Fonksiyonel React Component (Bileşeni) ile class tabanlı React Component (Bileşeni) arasındaki fark nedir?
5. Fonksiyonel component'ler yerine class tabanlı component'leri ne zaman kullanmamız gerekir?
6. Class tabanlı component'in kullanım alanları nelerdir?
7. Daha sık hangi tür component kullanırsınız? Fonksiyonel mi, class tabanlı mı?
8. React yaşam döngüsü (life cycle) nedir? (henüz ele alınmadı)
9. React'ta State (Durum) nedir? (henüz ele alınmadı)
## Egzersizler: Seviye 2
Önceki gün egzersizlerini class tabanlı component'lere çevirerek class tabanlı component hakkında daha fazla bilgi edinin.
## Egzersizler: Seviye 3
Yakında...
🎉 TEBRİKLER! 🎉
[<< Gün 6](../06_Gun_Dizi_Haritalama/06_dizi_haritalama.md) | [Gün 8 >>](../08_Gun_State/08_state.md)
[<< Gün 7](../07_Gun_Class_Bilesenler/07_class_bilesenler.md) | [Gün 9 >>](../09_Gun_Kosullu_Render/09_kosullu_render.md)
- [State (Durum)](#state-durum)
- [State (Durum) Nedir?](#state-durum-nedir)
- [State nasıl ayarlanır?](#state-nasıl-ayarlanır)
- [Bir JavaScript metodu ile state'i sıfırlama](#bir-javascript-metodu-ile-statei-sıfırlama)
- [Egzersizler](#egzersizler)
- [Egzersizler: Seviye 1](#egzersizler-seviye-1)
- [Egzersizler: Seviye 2](#egzersizler-seviye-2)
- [Egzersizler: Seviye 3](#egzersizler-seviye-3)
# State (Durum)
## State (Durum) Nedir?
State nedir? State'in İngilizce anlamı, \_belirli bir anda birisinin veya bir şeyin içinde bulunduğu özel koşul_dur.
State'in bir şeylerin durumu olduğunu görelim:
- Mutlu musunuz yoksa üzgün mü?
- Işık açık mı yoksa kapalı mı?
- Mevcut musunuz yoksa yok musunuz?
- Dolu mu yoksa boş mu?
Örneğin, 30 Days Of React meydan okumasını oluşturmaktan keyif aldığım için mutluyum. Sizin de mutlu olduğunuza inanıyorum.
State (Durum), React'ta state verisi değiştiğinde component'in yeniden render edilmesini sağlayan bir nesnedir.
## State nasıl ayarlanır?
Class tabanlı bir component'in constructor'ı içinde veya dışında bir başlangıç state'i belirleriz. State'i doğrudan değiştirmeyiz ya da mutate etmeyiz; bunun yerine yeni bir state'e sıfırlamak için _setState()_ metodunu kullanırız. Aşağıdaki örnekte görüldüğü gibi, state nesnesinde başlangıç değeri 0 olan count bulunmaktadır. State nesnesine _this.state_ ve özellik adını kullanarak erişebiliriz. Aşağıdaki örneğe bakın:
Yukarıdaki kodu çalıştırırsanız tarayıcıda sıfır görürsünüz. JavaScript metodu kullanarak state değerini değiştirerek count değerini artırabilir veya azaltabiliriz.
## Bir JavaScript metodu ile state'i sıfırlama
Şimdi bir düğmeye tıklayarak count değerini artıran veya azaltan bazı metotlar ekleyelim. Artırmak için bir düğme ve azaltmak için bir düğme ekleyelim. State'i ayarlamak için React'ın _this.setState_ metodunu kullanırız. Aşağıdaki örneğe bakın:
State hakkında daha fazla örnek yapalım. Aşağıdaki örnekte ya köpek ya da kedi gösteren küçük bir uygulama geliştireceğiz. Başlangıç state'ini kedi olarak ayarlayabiliriz; tıklandığında köpek gösterecek ve bu şekilde devam edecek. Hayvanı dönüşümlü olarak değiştiren bir metoda ihtiyacımız var. Canlı örneği görmek için [buraya](https://codepen.io/Asabeneh/full/LYVxKpq) tıklayın:
Artık State (Durum) konusunu çok iyi anladığınıza inanıyorum. Bundan sonra diğer bölümlerde de state kullanacağız; çünkü state ve props, React uygulamasının çekirdeğidir.
## Egzersizler
### Egzersizler: Seviye 1
1. Bugün state'iniz nasıldı? Mutlu musunuz? Umarım öyledir. Buraya kadar geldiyseniz mutlu olmalısınız.
2. React'ta State (Durum) nedir?
3. React'ta Props (Özellikler) ve State (Durum) arasındaki fark nedir?
4. Bir React component'inde state'e nasıl erişirsiniz?
5. Bir React component'inde state'i nasıl ayarlarsınız?
### Egzersizler: Seviye 2
1. React state'i kullanarak sayfanın arka plan rengini değiştirin. Bu tekniği portföyünüz için karanlık mod uygulamak amacıyla kullanabilirsiniz.
2. Uzun süredir devam eden kapanmanın ardından seyahat etmeyi düşünüyor olabilirsiniz ve nereye gideceğinizi bilmiyorsunuzdur. Tatil hedefinizi seçen rastgele bir ülke seçici geliştirmek isteyebilirsiniz.
[<< Gün 8](../08_Gun_State/08_state.md) | [Gün 10 >>](../10_Gun_Proje_Klasor_Yapisi/10_proje_klasor_yapisi.md)
# Koşullu Render (Conditional Rendering)
Terimden anlaşılacağı gibi, koşullu render (conditional rendering), farklı koşullarda farklı JSX veya component (bileşen) render etmenin bir yoludur. Koşullu render'i sıradan if ve else ifadesini, üçlü (ternary) operatörü ve &&'yi kullanarak uygulayabiliriz. Farklı koşullu render'ları uygulayalım.
## If ve Else İfadesi ile Koşullu Render
Aşağıdaki kodda başlangıç state'i (durumu) false olan loggedIn değişkeni bulunmaktadır. State false ise kullanıcıya giriş yapmasını söyleriz; aksi takdirde kullanıcıyı karşılarız:
Koşulumuz ikiden fazlaysa ne olur? Saf JavaScript'te olduğu gibi if else if ifadesini kullanabiliriz. Genel olarak, koşullu render, saf JavaScript koşullu ifadesinden farklı değildir.
## Üçlü (Ternary) Operatör ile Koşullu Render
Üçlü (ternary) operatör, if else ifadesine bir alternatiftir. Ancak üçlü operatörün if else ifadesinden daha fazla kullanım alanı vardır. Örneğin üçlü operatörü, bir component'teki stil, className ve diğer yerlerde sıradan if else ifadesinden çok daha fazla kullanabilirsiniz:
Artık Yazar ve 30DaysOfReact hakkındaki düşüncelerinizi paylaşmanın zamanı geldi. Tanıklığınızı bu [bağlantıda](https://www.asabeneh.com/testimonials) bırakabilirsiniz.
## Egzersizler
### Egzersizler: Seviye 1
1. Koşullu render (conditional rendering) nedir?
2. Koşullu render'ı nasıl uygularsınız?
3. Koşullu render için hangi yöntemi kullanmayı tercih edersiniz?
### Egzersizler: Seviye 2
1. Yılın mevsimine göre (Sonbahar, Kış, İlkbahar, Yaz) arka plan rengini değiştiren tek sayfalık bir uygulama yapın.
2. Günün saatine göre (Sabah, Öğle, Akşam, Gece) arka plan rengini değiştiren tek sayfalık bir uygulama yapın.
### Egzersizler: Seviye 3
1. Veri çekmek belirli bir süre alır. Veri yüklenene kadar kullanıcı beklemek zorundadır. Veri henüz çekilmemişken bir yükleme (loading) fonksiyonelliği uygulayın. Gecikmeyi setTimeout kullanarak simüle edebilirsiniz.
🎉 TEBRİKLER! 🎉
[<< Gün 8](../08_Gun_State/08_state.md) | [Gün 10 >>](../10_Gun_Proje_Klasor_Yapisi/10_proje_klasor_yapisi.md)
React projesinde tek bir klasör yapısı ya da dosya isimlendirmesi kullanmanın zorunlu bir yolu yoktur. Çoğu zaman bu tür seçimler bir ekip tarafından yapılabilir. Bazen bir şirketin hangi kod kurallarının, klasör yapısının ve dosya isimlendirmesinin kullanılacağına dair geliştirilmiş yönergeleri olabilir. React projesini yapılandırmanın doğru ya da yanlış yolu yoktur; ancak bazı yapılar ölçeklenebilirlik, sürdürülebilirlik, dosyalar üzerinde çalışma kolaylığı ve anlaşılması kolay yapı açısından diğerlerinden daha iyidir. Klasör yapısı hakkında daha fazla bilgi edinmek isterseniz aşağıdaki makaleleri inceleyebilirsiniz:
- [React Folder Structure by https://www.devaradise.com ](https://www.devaradise.com/react-project-folder-structure)
- [React Folder Structure by www.robinwieruch.de ](https://www.robinwieruch.de/react-folder-structure)
- [React Folder Structure by Faraz Ahmad](https://dev.to/farazamiruddin/an-opinionated-guide-to-react-folder-structure-file-naming-1l7i)
- [React Folder Structure by https://maxrozen.com/](https://maxrozen.com/guidelines-improve-react-app-folder-structure/)
Farklı kuralların bir karışımını kullanıyorum. Dilerseniz bunu takip edebilirsiniz; ancak lütfen sizin için anlamlı olan bir yapıya sadık kalın.
## Dosya İsimlendirme
Tüm React projelerimde, tüm component'ler için CamelCase (deve harfi) dosya adı kullanacağım. Açıklayıcı ve uzun isimler kullanmayı tercih ederim.
## Klasör
Tüm görselleri, ikonları ve fontları assets klasöründe, tüm CSS stil dosyalarını ise styles klasöründe toplamayı kolay buluyorum. Tüm component'ler components klasöründe olacak.
Şimdiye kadar index.js dosyası üzerinde çalışıyorduk. index.js'de çok sayıda component bulunuyor. Bugün her component'i ayrı bir dosyaya taşıyacağız ve tüm dosyaları App.js'e import edeceğiz. Bu süreçte klasör yapımı göreceksiniz. Şu anda src dizinindeyiz. Tüm klasör yapısı src dizininin içinde olacak. index.js dosyasından başlayalım. index.js dosyasına ek olarak, bir App.js dosyası oluşturalım ve şimdilik sahip olduğumuz component'lerin çoğunu App.js'e taşıyalım. index.js, component'i index.html ile bağlayan ana kapınızdır.
```js
// src/index.js
// index.js
import React from "react";
import ReactDOM from "react-dom";
const App = () => <h1>Welcome to 30 Days Of React</h1>;
Yukarıdaki kod parçasında App component'i bulunmaktadır. App component'ini kendi dosyasına, App.js'e taşıyalım:
```js
// src/App.js
import React from 'react
const App = () => <h1>Welcome to 30 Days Of React</h1>
```
Component'i başka bir dosyaya import etmek için dışa aktarmamız (export etmemiz) gerekiyor. Default veya named (isimli) export olarak dışa aktarabiliriz. Bir dosyada bir default export ve çok sayıda named export yapılabilir. Önce named export ile uygulayalım, ardından default export'a geçelim.
Named export yapmak için _let_ veya _const_'tan önce sadece _export_ anahtar kelimesini ekleriz:
```js
// src/App.js
import React from 'react
// ok fonksiyonunda named export
export const App = () => <h1>Welcome to 30 Days Of React</h1>
```
Normal fonksiyon tanımlamasında dışa aktarma:
```js
// src/App.js
import React from 'react
// normal fonksiyonda named export, function declaration
export function App () {
return <h1>Welcome to 30 Days Of React</h1>
}
```
Şimdi App component'ini App.js dosyasından index.js dosyasına import edelim:
Named export'u gördük; şimdi default export ile uygulayalım. Bunu iki şekilde yapabiliriz; ancak component'leri dışa aktarırken ikinci yöntem önerilir; çünkü bazen bir component'i başka bir higher order component (yüksek dereceli bileşen) ile sarmalayabiliriz:
```js
// src/App.js
import React from 'react
// ok fonksiyonunda default export
export default const App = () => <h1>Welcome to 30 Days Of React</h1>
```
```js
// src/App.js
import React from 'react
// default export, normal fonksiyon
export default function App () {
return <h1>Welcome to 30 Days Of React</h1>
}
```
```js
// src/App.js
// Çoğu durumda önerilen yöntem
import React from 'react
const App = () => <h1>Welcome to 30 Days Of React</h1>
export default App
```
Bir component default olarak dışa aktarılmışsa import ederken süslü paranteze gerek yoktur:
Şimdiye kadar oluşturduğumuz component'leri hatırlarsanız, hepsini bir arada tutuyorduk. Bu şekilde çalışmak kolay değildir. Şimdi tüm component'leri ayrı bir dosyaya taşıyacağız:
src dizininin içinde tüm component'leri ayrı bir klasörde toplayacağız:
```sh
src
App.js
index.js
components
-auth
-Signup.js
-Signin.js
-Forgotpassword.js
-Resetpassord.js
header
-Header.js
footer
-Footer.js
assets
-images
-icnons
- fonts
styles
-button.js
-button.scss
utils
-random-id.js
-display-time.js
-generate-color.js
shared
-Button.js
-InputField.js
-TextAreaField.js
```
src içinde components dizini oluşturalım; components içinde header dizini oluşturalım. header dizini içinde Header.js dosyası oluşturalım:
```js
// src/components/header/Header.js
import React from "react";
const Header = (props) => {
return (
<header>
<divclassName="header-wrapper">
<h1>{welcome}</h1>
<h2>{title}</h2>
<h3>{subtitle}</h3>
<p>
{firstName} {lastName}
</p>
<small>{date}</small>
</div>
</header>
);
};
export default Header;
```
Header'a benzer şekilde, tüm component'leri ilgili dosyalarına taşıyalım. index.html'deki tüm CSS dosyaları styles klasörüne taşınacak; her parça kendi dosyasına ayrıldıktan sonra styles klasörünü kontrol etmeye çalışın.
## Fragment (Parça)
Fragment'lar (Parçalar), JSX'te gereksiz üst element kullanmaktan kaçınmanın bir yoludur. Bir fragment uygulayalım. Fragment'ı react modülünden import ediyoruz. Aşağıda görüldüğü gibi React ve fragment'ı virgül ayırımı kullanarak birlikte import ettik:
```js
import React, { Fragment } from "react";
const Skills = () => {
return (
<Fragment>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</Fragment>
);
};
const RequiredSkills = () => {
return (
<ul>
<Skills/>
</ul>
);
};
```
Fragment modülünü React'tan şu şekilde çıkarmak da mümkündür:
```js
import React from "react";
const Skills = () => {
return (
<React.Fragment>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</React.Fragment>
);
};
const RequiredSkills = () => {
return (
<ul>
<Skills/>
</ul>
);
};
```
React'ın son sürümünde bu işaretler kullanılarak çıkarmadan veya import etmeden de yazılabilir (<> </>):
```js
import React from "react";
// Önerilen yöntem
const Skills = () => {
return (
<>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</>
);
};
const RequiredSkills = () => {
return (
<ul>
<Skills/>
</ul>
);
};
```
Class tabanlı component yaparken React.Component kullanıyorduk; bunun yerine sadece Component'i import ederek kodu daha temiz yazabiliriz. Bir örnek görelim:
```js
import React from "react";
// Component'i import etmeden
// Önerilmez
class App extends React.Component {
render() {
return <h1> 30 Days of React </h1>;
}
}
```
```js
import React, { Component } from "react";
// Bu önerilen yöntemdir
class App extends Component {
render() {
return <h1> 30 Days of React </h1>;
}
}
```
Harika iş çıkardınız. Beyniniz ve kaslarınız için bazı egzersizler yapma zamanı.
# Egzersizler
## Egzersizler: Seviye 1
1. React Klasör Yapısı ve Dosya İsimlendirmesinin önemi nedir?
2. Dosya nasıl dışa aktarılır (export edilir)?
3. Dosya nasıl içe aktarılır (import edilir)?
4. Bir component veya modül oluşturun ve named ya da default export ile dışa aktarın.
5. Bir component veya modül oluşturun ve import edin.
6. Sahip olduğunuz tüm component'leri farklı bir klasör yapısına taşıyın.
## Egzersizler: Seviye 2
1. Şimdiye kadar oluşturduğumuz component'leri kullanarak basit bir portföy yapın. 8. gün meydan okumasında yazdığımız fonksiyonu kullanarak karanlık mod (dark mode) uygulayın.
## Egzersizler: Seviye 3
Yakında
🎉 TEBRİKLER! 🎉
[<< Gün 9](../09_Gun_Kosullu_Render/09_kosullu_render.md) | [Gün 11 >>](../../11_Day_Events/11_events.md)
Samet SARIKAYA
2 months ago