FullstackEasy: JavaScript, TypeScript, Node.js ve React Yol Haritan\u0131z<\/p>\n
Full-stack web geli\u015ftirme \u00f6\u011frenmek zorlu ama heyecan verici bir yolculuk. JavaScript, TypeScript, Node.js ve React gibi pop\u00fcler teknolojileri \u00f6\u011frenmek, bir\u00e7ok farkl\u0131 projeyi hayata ge\u00e7irmenize olanak tan\u0131r. Ancak, bu teknolojilerin karma\u015f\u0131kl\u0131\u011f\u0131 ve \u00f6\u011frenme e\u011frisinin y\u00fcksekli\u011fi, bir\u00e7ok geli\u015ftirici i\u00e7in ba\u015flang\u0131\u00e7ta bir engel olu\u015fturur. Bu makale, s\u0131f\u0131rdan ba\u015flayarak bu d\u00f6rt \u00f6nemli teknolojiyi ad\u0131m ad\u0131m \u00f6\u011frenmenize ve profesyonel bir full-stack geli\u015ftirici olman\u0131za yard\u0131mc\u0131 olacak kapsaml\u0131 bir yol haritas\u0131 sunmaktad\u0131r. Daha fazla bilgi i\u00e7in (https:\/\/fatihsoysal.com) inceleyebilirsiniz.<\/p>\n
JavaScript, web geli\u015ftirmenin temel ta\u015flar\u0131ndan biridir ve di\u011fer teknolojilerin temelini olu\u015fturur. \u00d6ncelikle, JavaScript’in temel kavramlar\u0131n\u0131 \u00f6\u011frenmek gerekmektedir. Bunlar aras\u0131nda de\u011fi\u015fkenler, veri tipleri (string, number, boolean, array, object), kontrol ak\u0131\u015f\u0131 (if-else, switch), d\u00f6ng\u00fcler (for, while), fonksiyonlar ve DOM manip\u00fclasyonu yer al\u0131r. Bu konular\u0131 \u00f6\u011frenmenin en iyi yolu, interaktif online kurslar, pratik al\u0131\u015ft\u0131rmalar ve k\u00fc\u00e7\u00fck projeler geli\u015ftirmektir. \u00d6rne\u011fin, basit bir hesap makinesi veya to-do list uygulamas\u0131 geli\u015ftirmek, \u00f6\u011frendiklerinizi peki\u015ftirmenize yard\u0131mc\u0131 olacakt\u0131r. Ayr\u0131ca, MDN Web Docs (Mozilla Developer Network) gibi g\u00fcvenilir kaynaklardan bilgi edinebilirsiniz.<\/p>\n
\u00d6ncelikle de\u011fi\u015fken tan\u0131mlama ve veri tiplerini anlayal\u0131m:<\/p>\n
let isim = \"Ahmet\"; \/\/ String\nlet yas = 30; \/\/ Number\nlet aktifMi = true; \/\/ Boolean\nlet hobiler = [\"Okuma\", \"Y\u00fczme\", \"Kodlama\"]; \/\/ Array\nlet kisi = { ad: \"Ay\u015fe\", soyad: \"Y\u0131lmaz\", yas: 25 }; \/\/ Object<\/pre>\n<\/code><\/p>\n
Daha sonra, basit bir fonksiyon \u00f6rne\u011fi:<\/pre>\n<\/code>function selamla(isim) {
\n console.log(\"Merhaba, \" + isim + \"!\");
\n}<\/p>\n
selamla(\"Fatma\"); \/\/ Merhaba, Fatma! yazd\u0131r\u0131r.<\/code><\/p>\n
DOM manip\u00fclasyonu i\u00e7in ise basit bir \u00f6rnek:<\/pre>\n<\/code>let paragraf = document.createElement(\"p\");
\nparagraf.textContent = \"Bu bir paragraf.\";
\ndocument.body.appendChild(paragraf);<\/code><\/p>\n
Bu temel kavramlar\u0131 \u00f6\u011frendikten sonra, daha karma\u015f\u0131k konulara ge\u00e7ebilirsiniz. \u00d6rne\u011fin, asenkron programlama, prototip tabanl\u0131 miras, closure gibi konular, daha ileri seviye JavaScript projeleri i\u00e7in gereklidir.<\/p>\n
TypeScript ile Kodunuzun G\u00fcvenilirli\u011fini Art\u0131rma: Nas\u0131l Yap\u0131l\u0131r?<\/h2>\n
TypeScript, JavaScript'in \u00fcst k\u00fcmesidir ve statik tipleme \u00f6zelli\u011fi ekler. Bu sayede, derleme zaman\u0131nda hatalar\u0131 yakalayabilir ve daha g\u00fcvenilir ve \u00f6l\u00e7eklenebilir kod yazman\u0131za olanak tan\u0131r. TypeScript \u00f6\u011frenmek i\u00e7in JavaScript temellerine hakim olman\u0131z \u00f6nemlidir. TypeScript, JavaScript kodunun \u00fczerine ek \u00f6zellikler ekler. \u00d6rne\u011fin, de\u011fi\u015fkenlerin veri tiplerini belirtmenize olanak tan\u0131r.<\/p>\n
let isim: string = \"Ali\";\nlet yas: number = 28;\nlet aktif: boolean = true;<\/pre>\n<\/code><\/p>\n
TypeScript'in interface'leri sayesinde kodunuz daha organize ve okunabilir hale gelir:<\/pre>\n<\/code>interface Kullanici {
\n ad: string;
\n soyad: string;
\n yas: number;
\n}<\/p>\n
let kullanici: Kullanici = { ad: \"Veli\", soyad: \"Kaya\", yas: 35 };<\/code><\/p>\n
TypeScript, genel olarak b\u00fcy\u00fck projelerde ve ekip \u00e7al\u0131\u015fmas\u0131nda tercih edilir \u00e7\u00fcnk\u00fc kodun tutarl\u0131l\u0131\u011f\u0131n\u0131 ve bak\u0131m\u0131 kolayla\u015ft\u0131r\u0131r. Ancak, k\u00fc\u00e7\u00fck projelerde JavaScript'in yeterince g\u00fc\u00e7l\u00fc olabilece\u011fini unutmamak gerekir.<\/p>\n
Node.js ile Sunucu Taraf\u0131 Geli\u015ftirme: Pratik \u00d6rnekler<\/h2>\n
Node.js, JavaScript'i sunucu taraf\u0131nda kullanmam\u0131z\u0131 sa\u011flayan bir runtime ortam\u0131d\u0131r. Web sunucular\u0131, API'ler ve komut sat\u0131r\u0131 ara\u00e7lar\u0131 gibi bir\u00e7ok farkl\u0131 uygulama geli\u015ftirmek i\u00e7in kullan\u0131labilir. Node.js ile \u00e7al\u0131\u015fmak i\u00e7in npm (Node Package Manager) paket y\u00f6neticisini kullanman\u0131z gerekir. Npm, bir\u00e7ok farkl\u0131 k\u00fct\u00fcphane ve mod\u00fcle eri\u015fmenizi sa\u011flar.<\/p>\n
Basit bir Node.js sunucu \u00f6rne\u011fi:<\/p>\n
const http = require('http');\n\nconst server = http.createServer((req, res) => {\n res.writeHead(200, {'Content-Type': 'text\/plain'});\n res.end('Merhaba, Node.js!');\n});\n\nserver.listen(3000, () => {\n console.log('Sunucu 3000 portunda \u00e7al\u0131\u015f\u0131yor.');\n});<\/pre>\n<\/code><\/p>\n
Bu \u00f6rnekte, http mod\u00fcl\u00fc kullan\u0131larak basit bir web sunucusu olu\u015fturulmu\u015ftur. Sunucu, 3000 portunda \u00e7al\u0131\u015f\u0131r ve \"Merhaba, Node.js!\" metnini g\u00f6r\u00fcnt\u00fcler. Daha karma\u015f\u0131k uygulamalar i\u00e7in Express.js gibi framework'ler kullan\u0131labilir. Express.js, API geli\u015ftirmeyi kolayla\u015ft\u0131r\u0131r ve bir\u00e7ok yararl\u0131 \u00f6zelli\u011fe sahiptir.<\/p>\n
React ile Etkile\u015fimli Kullan\u0131c\u0131 Aray\u00fczleri Olu\u015fturma: Ad\u0131m Ad\u0131m<\/h2>\n
React, kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmak i\u00e7in kullan\u0131lan pop\u00fcler bir JavaScript k\u00fct\u00fcphanesidir. React ile, dinamik ve etkile\u015fimli web uygulamalar\u0131 geli\u015ftirebilirsiniz. React'in temel kavramlar\u0131 aras\u0131nda bile\u015fenler, JSX (JavaScript XML), props ve state yer al\u0131r.<\/p>\n
Basit bir React bile\u015feni \u00f6rne\u011fi:<\/p>\n
function Merhaba(props) {\n return Merhaba, {props.isim}!;\n}<\/pre>\n<\/code><\/p>\n
Bu \u00f6rnekte, Merhaba<\/code> adl\u0131 bir fonksiyonel bile\u015fen tan\u0131mlanm\u0131\u015ft\u0131r. Bile\u015fen, props<\/code> ile isim parametresi al\u0131r ve ekrana \"Merhaba, [isim]!\" yazar.<\/p>\nState kullan\u0131m\u0131 ile dinamik bir bile\u015fen \u00f6rne\u011fi:<\/p>\n
import React, { useState } from 'react';\n\nfunction Saya\u00e7() {\n const [sayac, setSayac] = useState(0);\n\n return (\n \n Saya\u00e7: {sayac}<\/p>\n