Frontend Roadmap

Roadmap.md

Algoritmalar

• Atama Operatörü (Assignment operator) =
  • x + y = z (Yasak)
  • x = 2
  • x = y + z
• Algoritma adımları

1. Başla
2. X'i olustur
3. X'e 3 degerini ata
4. X'i ekrana yaz
5. Bitir

• Algoritmayı koda dökme

function main(){
  let x;
  x = 2;
  if (x == 3) {
    console.log("Error")
  } else {
    console.log(x)
  }
  return;
}

Kodlama

• Degisken tanimlama
• Atama operatöri =
• integer, float, String, boolean kavramlan
• null kavrami
• if/else gibi kosul ifadeleri
• while döngüsü
• for foreach ifadesi
• Array/dizi nasil olusturulur vs

Object oriented Programming

1. Inheritance (Kalıtım)

• extends ve implements kavramları
• object ve interface kavramları

2. Polymorphism (Çok biçimlilik)

• Person -> Teacher, Student class kullanımları

3. Encapsulation

• public, protected, private ifadeleri

HTML

• HTML dosyasi yapisi
• html head body
• span ve div elemanlan
• img
• a etiketi
• br
• Cv'ni tasarla
• form elemanları
  • input
  • select
  • radio
  • checkbox
  • submit

CSS

• Renklendinme
• Margin/Padding
• Border
• display block/inline/inline-block
• Box Model
• Flexbox
• class vs id
• !important yasakla
• CSS öncelikleri/precendence
• CSS specificity

JavaScript

• Temel algoritma bilgisi
• var, let, const farklan
• Scope kavramı
• DOM operations
  • getElementById, querySelectorAll
  • innerHTML
• Event Listeners
  • onclick, onsubmit, onchange
• JSON operations
  • ISON stringify()
  • JSON parse()
• fetch API
• async/await
• setTimeout, setInterval
• map(), filter(), reduce()
• Spread operator(...)
• Callback kullanmi
• debugger;
• import, export kavramlar
• CommonJS kavramları require(), module.exports()
• NodeJS ve npm nedir? package.json ne ise yarar?

Tools

• Terminal/Console nedir?
  • cmd, bash, iterm
  • sudo, mkdir, cd, Is
• Git
  • clone, status, add, commit, push, pull
• reset -- hard
• npm/yam CLI
• npm install
• yarn add -D

React

• Vite CLI ile React projesi olusturma
• JSX nedir? Babel ne ise yarar?
• className, htmlFor
• Functional Components
• HOC (Higher order Component)
• Conditional Rendering
• && ve & operatörleri ile render etme
• { isOpen ? : }
• Props
• Prop immutable oldugunu bilmeli
• Child'dan Parent'a ver aktarmi
• useState
  • Asenkron çalıştıgını. bilmeli (Batch op)
• useEffect + fetch API
• useRef() ile input focus
• map() ile listeleme
• key attribute
• Context kullanmi
• <React.Fragment key={}> veya <>

Libraries

• Axios
• Router v6
  • Basic routing
• React Query veya useswR
• Form kütüphanesi + zod/yup
  • Formik, HookForm Us.
• Date için
  • Luxon, dayjs us.

UI

• Tailwind
• Bootstrap/MUI/AntD denemeli

TypeScript

• JS/TS farkları
• Type and interface ile prop tanimlama
• String, number, Array, Record

NextJS

• File based Routing
• Image component
• Link component/Routing
• Metadata API
• Layouts API
• getStaticProps, getServerSideProps vs
• use client/server