This is not just a npm audit warning. This is a severity 10/10 Remote Code Execution (RCE) vulnerability affecting the Next.js and React 19 ecosystem. The impact was so widespread that it triggered a global response from major infrastructure providers like Cloudflare, effectively putting a large chunk of the modern web on high alert.

A 10.0 critical severity vulnerablility affecting server-side use of React.js, tracked as CVE-2025–55182 in React.js and CVE-2025–66478 specifically for the Next.js framework. (react2shell.com)

Let’s see what happened, and what you need to do immediately.

What is the Vulnerability?

At a high level, the vulnerability exploits the React Server Components (RSC) “Flight” protocol. This protocol manages the data stream between the server and the client in the applications.

Due to improper input validation in the react-server* packages, an unauthenticated attacker can inject a malicious payload into the stream. When the server attempts to deserialize this payload, it executes malicious code.

TL;DR: A bad actor can send a specific payload to your server and execute arbitrary code. They don’t need a login; they just need your server to be running a vulnerable version.

Global Impact

The scale of this vulnerability been clearer when Cloudflare, the backbone of a significant portion of the internet, stepped in.

As detailed in the Cloudflare Blog: The December 5th Outage, the attack signatures began spiking globally, forcing Cloudflare to deploy emergency WAF rules. Because millions of sites run on Next.js, the potential attack surface was massive.

Cloudflare’s WAF (Web Application Firewall) team had to deploy emergency rulesets to block these specific “Flight” protocol payloads at the edge. For a brief period, this aggressive filtering caused friction across the web, as legitimate RSC traffic was scrutinized to separate it from malicious attempts. It was a rare moment where we saw a framework-specific bug cause near-internet-wide congestion.

This intervention bought developers time, but relying on a WAF is not a permanent fix. You must patch the root cause.

Are You Affected?

This vulnerability primarily targets the React 19 ecosystem and frameworks built on top of it.

1. Next.js Users (High Risk)

If you are running any version of the Next.js App Router, you are at high risk if you have not patched. Next.js heavily leverages RSC and bundles the vulnerable dependencies.

• Vulnerable Versions: Next.js ≥14.3.0, 15.x, 16.x, and Canary builds from 14.3.0 running with React 19 dependencies.
• Reason: Next.js exposes the vulnerable react-server-dom-* packages via its routing layer, making the RCE surface highly accessible via standard HTTP requests.

All users of stable 15.x or 16.x Next.js versions should upgrade to a patched, stable version immediately. (RCE in React Server Components)

2. Pure React 19 Users (Conditional Risk)

If you are using React 19 in a custom setup (e.g., with a custom bundler like Webpack or Vite):

• Vulnerable Versions: React versions 19.0, 19.1 or 19.2.
• You are only vulnerable if you have explicitly installed and are utilizing the server-side components such as react-server-dom-webpack or react-server-dom-node for custom RSC implementation.
• If you are only using React 19 for standard client-side rendering (CSR), you are probably safe from this specific RCE. But still would be the best to patch.

If your app’s React code does not use a server, your app is not affected by this vulnerability. If your app does not use a framework, bundler, or bundler plugin that supports React Server Components, your app is not affected by this vulnerability. (Critical Security Vulnerability in React Server Components)

The Solution

The React and Next.js teams have responded quickly with patches that harden the serialization logic. There is no complex workaround required; the solution is a strict dependency upgrade.

For Next.js App Router Users:

Upgrade Next.js, React, and React DOM.

npm install next@15.0.5   // for 15.0.x
npm install next@15.1.9   // for 15.1.x
npm install next@15.2.6   // for 15.2.x
npm install next@15.3.6   // for 15.3.x
npm install next@15.4.8   // for 15.4.x
npm install next@15.5.7   // for 15.5.x
npm install next@16.0.7   // for 16.0.x

npm install next@latest   // for the latest version

Target Next.js Versions: Ensure your version is at least 15.0.5, 15.1.9, or 16.0.7. Target React Versions: Ensure both react and react-dom are at 19.0.1+.

Verify Lock Files: Double-check your package-lock.json to confirm that underlying transitive dependencies (like react-server-dom-*) have been updated to the patched versions (e.g., 19.2.1+).

For Pure React.js Users:

Update Core and RSC-Specific Packages:

npm install react@latest
npm install react-dom@latest

# Optionally If you are using React Router’s unstable RSC APIs,
# you should upgrade the following package.json dependencies if they exist:

npm install react-server-dom-parcel@latest
npm install react-server-dom-webpack@latest
npm install react-server-dom-turbopack@latest
npm install react-server-dom-node@latest

Conclusion

The “React2Shell” incident is a wake-up call. It highlights how deeply the modern web relies on frameworks like Next.js. When a vulnerability hits the core protocol, it ripples from individual startups all the way up to edge providers like Cloudflare.

Don’t rely solely on the edge to protect you. Update your builds today.

Thanks for reading…

Have you ever thought about how computers work? Or do you think it is a magical process? How do these electronic components, which have entered our lives in the last century and have gained a very important place, really work? Let’s have a look…

History of the Computers

You may be surprised to learn that computers have been around a lot longer than you think. In fact, they date back to 2400 BC. The abacus, developed in China around 2400 BC, is considered the primitive ancestor of today’s computers. This tool was used for simple addition and multiplication and helped to perform arithmetic calculations.
Charles Babbage introduced the concept of the programmable computer. He’s often referred to as the “father of the computer. Babbage designed and invented the first mechanical computer in the early 19th century.
If you’re wondering how this relates to today’s computers, I’ll explain in a moment.

How long have computers(including mobile phones and others) that we actually know existed? Unlike mechanical, analog (calculation) computers, digital computers have been invented in the last hundred years and have experienced incredible development.
The Torpedo Data Computer, considered the first digital computer, was an electromechanical analog computer developed by the United States Navy for a submarine in 1938.
During World War II, the search of different ways to perform complex arithmetic operations was a major factor in the development of the computer. The Enigma machine(1930), which had a major impact on the course of the war and an important place in the history of computers, was a machine designed to decode encrypted messages.

If you look at the history of computers, you’ll see that it’s not wrong to call them “computers”. Nowadays, these machines are in every aspect of our lives, allowing you to access this article, have phone calls, and many other things. In fact, they do one thing and one thing only: “computing”.

How does the Computer Computes ?

How does just doing computing allow you to make phone calls, surf the internet and watch videos?
We have the power of mathematics and engineering to thank for that.
Computers, smart devices and others work entirely with numbers and the manipulation of numbers. Numbers are language of the computers.
The numbers we use in daily life are slightly different from the numbers computers use. Computers don’t use the decimal number system we use in daily life. The reason for this is electronics. Computers use electrical circuits(transistors) to store and compute the data, and they can only store two values; which is: one(1) and zero(0). All the amazing calculations and operations that your computers perform in daily life are based on these two possibilities. But wait, there’s more!

The decimal number system we use in daily life is a 10-based system.
We have ten digits: 0, 1, …, 8, 9. We put these digits next to each other to form a number. The rightmost digit of these numbers is 10⁰ * n, and as we move to the left digits, we get 10¹ * n, 10² * n, and so on. This means that the leftmost digit is always the largest digit, and the rightmost digit is the ones digit, the smallest digit.
In computers, the same thing is done with 0 and 1, which is to say, in terms of the base 2 which is also called as Binary. 2⁰ * n, 2¹ * n, …
When we multiply the base by the exponent(the position number) and multiply the results, we get the number.

We now have a superficial understanding of how computers perform numerical operations, but what about data other than numbers?
How are texts, photos, sounds, and videos represented?

Computers can only process and understand numbers. But we do not have to characterize all numbers as numbers. Some numbers can have special meanings to us. For example, “01000001” may mean the letter A to us. It is a number, but we can interpret it any way we want.
In fact, that’s exactly what we do, for example: we define special numbers for each letter to display text on the computer, and when we write a text, we actually tell the computer these numbers, not the letters or words, because it can process only numbers.
However, this solution requires a standard because the values representing the letters must be the same on all computers and in all environments, otherwise differences and problems will occur.
For these problems, various standards have been created and are followed by all computer developers. ASCII is one of the most popular character encoding standards.

To support different alphabets, emojis and special characters, more advanced and larger character encoding standards such as UTF-8 are used today.

Similarly, there are standards created for different types of data. Audio encoding formats(MP3, AAC), video encoding formats(H.264…) and more..

That is why the files we use on our computers have different extensions. These extensions indicate whether our computer will process the file as a text file, a video file, or something else.(.txt, .mp4, .mp3)

Thanks for reading…

Okay but, What is Scope ?

Scope refers to the region of the code where a variable is defined and accessible. A scope can be thought of as a container that holds a set of variables, functions and other declarations. e.g.

The Scope Chain

Scope chain is a hierarchical structure that represents the nesting of scopes in JavaScript. When a variable or function is accessed, JavaScript traverses the scope chain to find the variable’s declaration; starts from innermost scope and moves outward through the chain of parent scopes until it finds the variable or reaches the global scope. If the accessed reference doesn’t exist in the scope, you will get ReferenceError.

Scope Types

JavaScript has three main types of scope:

• Global scope: Variables declared outside of any function or block are assigned global scope. These variables are accessible from any part of the codebase. (var, let, const)
• Function scope: Each function creates a new scope, which contains its local variables and functions. (var, let, const)
• Block scope (ES6): Blocks, such as if statements and loops, creates a new scope {}. (let, const)

Before taking a look at each type, let’s talk about variable declarations.

In JavaScript, there are three main ways to declare variables: var, let, const. Each of these keywords has different scope behaviors that affect how the variable can be accessed and manipulated within the code. Let me explain:

1. var: The var keyword is the oldest way to declare variables in JavaScript. Declarations with var has function scope, so they are only accessible within the function in which they are declared. If a variable is declared outside of a function using var, it becomes a global variable and can be accessed anywhere in the code. i.e. declaring every variable in global can lead to potential naming conflicts and make the code harder to maintain. So it’s not recommended nowadays.
2. let: The let keyword was introduced in ES6 (ECMAScript 2015) as a way to declare block-scoped variables. Variables declared with let are only accessible within the block in which they are defined, whether it’s a function, loop, or conditional statement. This helps prevent variable hoisting and makes the code more predictable and easier to reason about.
3. const: The const keyword is also introduced in ES6 and similar to let in that it also creates block-scoped variables. However, variables declared with const are read-only, meaning their value cannot be changed once it has been assigned. This makes const a good choice for variables that should not be reassigned, such as constants or configuration values.

Global Scope

Global scope is the largest scope available. Declarations in the global scope are accessible from anywhere in your code, whether inside functions, if statements, or other blocks of code.

var globalVar = "I'm a global variable declared with var.";
let globalLet = "I'm a global variable declared with let.";
const globalConst = "I'm a global variable declared with const";

function someFunction() {
    console.log(globalVar); // Accessible
    console.log(globalLet); // Accessible
    console.log(globalConst); // Accessible
}

someFunction();
console.log(globalVar); // Also accessible

Function Scope

Each function creates a new scope. This is also known as local scope. Variables defined inside a function are not accessible from outside the function and variables declared with var, let and const are quite similar when declared inside a function.

function exampleFunction() {
    var functionVar = "Function variable declared with var.";
    let functionLet = "Function variable declared with let.";
    const functionConst = "Function variable declared with const";
    console.log(functionVar, functionLet, functionConst); // Accessible
}

exampleFunction();
console.log(functionVar, functionLet, functionConst);
// Error: functionVar, functionLet, functionConst is not defined

Block Scope

JavaScript since it’s release had only Global Scope and Function Scope. After ES6, let and const were introduced and these two keywords provides Block Scope in JavaScript. ECMAScript (ES6) 2015 was the second major revision to JavaScript. The variables declared inside a { } block (if, for, while loops, etc.) using let or const cannot be accessed from outside the block.

Introduced with the let and const keywords in ES6, block scope restricts the variable's visibility to the block it is declared in .

if (true) {
    let blockLet = "Block variable declared with let.";
    const blockConst = "Block variable declared with const";
    console.log(blockLet, blockConst); // Accessible
}

console.log(blockLet, blockConst); 
// Error: blockLet, blockConst is not defined

Note: Variables declared with var doesn’t have block scope. Unlike let and const, var is function-scoped or global-scoped, meaning it does not respect block boundaries such as those created by if statements or for loops.

Thanks for reading…

Günümüz dünyasında içerik ve uygulamaları farklı dillerde sunmak önemli bir gereksinim haline gelmiştir. i18next, bu gereksinimi uygulamalarınızda kolay ve hızlı bir şekilde karşılayabilmeniz için kullanabileceğiniz güçlü bir araçtır. i18next, Çok dilli içerik yönetimini ve çeviri sürecini etkili ve verimli bir şekilde yönetmenize olanak tanır.

i18next Nedir ?

i18next, JavaScript ile geliştirilmiş olan bir internationalization (uluslararasılaştırma) frameworküdür. JavaScript ile geliştirilmesine rağmen birçok programlama diliyle uyumlu bir şekilde çalışabilmektedir. i18next ile ister Mobil ister Web ister Masaüstü uygulamalarınıza kolay bir şekilde çoklu dil desteğini ekleyebilirsiniz.

Başlangıçta Frontend frameworkleri için geliştirilen bu kütüphane, bugün Node.js, PHP, Ruby ve IOS, Android gibi birçok ortamda aktif olarak desteklenmektedir. Bu yazıda, JavaScript tarafını ele alacağım.

Kütüphanenin temeldeki çalışma mantığı, uygulamada görünecek olan içeriklerin — metinlerin; kullanıcı diline göre (localization) belirlenen dil paketinden (Nesne formatında bulunan) alınması üzerinedir. Ancak kütüphanenin nasıl kullanılacağına geçmeden önce bazı avantajlarından bahsetmek istiyorum:

i18next Avantajları Nelerdir?

• Kullanıcı dilini tespit etme.
• Uygun dil paketini çalıştırma.
• İsteğe bağlı içerik cache mekanizması.
• Eklentiler, topluluk tarafından oluşturulan Çeviri, Formatlandırma ve Dil tespiti gibi işlevler için geliştirilmiş bir çok eklenti.

Özel ihtiyaçlara karşı esnek bir yapısı mevcuttur.

• Tarih formatlandırma gibi işlemlerde moment.js gibi paketlerle uyumlu çalışan ulusal yapı desteği.

Ölçeklendirme, küçük projelerden büyük projelere kadar uyumlu çalışma desteği, dil paketlerini modüler kullanma desteği.

Ekosistem, Geniş ve aktif topluluk sayesinde, bir çok platformda aktif geliştirici kitlesi ve destekçiler.

i18next Nasıl Kurulur ?

NOT: Kurulum işlemi çalışma ortamına ve kullandığınız framework’e göre değişkenlik gösterebilir. Bu yazıda React ve Vue üzerinden ilerleyeceğim. Farklı ortamlarda kurulum için dökümantasyonu inceleyebilirsiniz.

Vue için Kurulum

# npm
npm install i18next --save
npm install i18next-vue --save

React için Kurulum

# npm
npm install i18next --save
npm install react-i18next --save

CDN ile Kurulum

unpkg.com

• https://unpkg.com/i18next/dist/umd/i18next.js
• https://unpkg.com/i18next/dist/umd/i18next.min.js

Esm veya Cjs:

• https://unpkg.com/i18next/dist/esm/i18next.js
• https://unpkg.com/i18next/dist/cjs/i18next.js

i18next Nasıl Kullanılır ?

Kurulum işlemini çalıştığınız teknolojilerle uyumlu bir şekilde yaptıktan sonra, i18next’i konfigüre ederek kullanmaya hazır hale getirebilirsiniz.

Konfigürasyon dosyasında, ayarlamaları ve dil tercihine göre seçilecek olan çevirileri tanımlayabilirsiniz. i18next kullanıcı dili seçeneğine göre tanımladığınız dil paketlerinden seçileni dahil edecek ve uygulama içerisinde bir içeriğe erişmek istediğinizde bu dil paketinden belirttiğiniz içeriği alacaktır.

NOT: Çeviri içeriklerini bağımsız bir dosyada .js veya .json formatında saklamak ve konfigürasyon dosyasına dahil etmek daha doğru bir kullanım şekli olacaktır. Ancak örneklerde direkt olarak tanımlayacağız.

Öncelikle i18next’i konfigüre etmek için proje ana dizininde veya src/lang klasörü içerisinde i18n.js adında bir dosya oluşturun. Bu dosya dil sisteminin yönetildiği ve tanımlandığı dosya olacak.

Bu dosyanın yapısı bütün teknolojilerde neredeyse aynı ancak React ve Vue gibi Frameworklerde ek olarak özel bazı paketler yüklemek gerekiyor.

// i18n.js

import i18next from 'i18next';// i18next

i18next
  .init({
    lng:"tr",// Kullanıcı dili --> Seçilecek olan dil paketi. Manuel eklemek yerine i18next-browser-languagedetector gibi paketleri de kullanabilirsiniz.
    debug: true,// hata ayıklama modu, konsol'da çıktı verir.
    fallbackLng: 'en',// çeviri mevcut değilse kullanılacak olan varsayılan dil paketi.
    resources: {// dil paketleri
      en: {// en paketi
        translation: {// en paket çevirileri
          test: "Test message English",
          title: "Content Title"
        }
      },
      tr: {// tr paketi
        translation:{// tr paket çevirileri
            test: "Deneme mesajı Türkçe",
            title: "İçerik Başlığı"
        }
      }
    }
  });

Dil paketleri Object veya JSON formatında tanımlanabilir. Dil paketi seçilirken dil paketinin key değeri dikkate alınır. Dil paketindeki bir çeviriye ulaşırken ise, translation içerisindeki değerler üzerinden aksiyon alınır. translation kendi içerisinde de nesneler içerebilir.

Konfigürasyon dosyamızı sorunsuz bir şekilde tanımladıktan ve çevirileri ekledikten sonra, neredeyse çoklu dil desteğini kullanmaya hazırsınız.

Son olarak kullandığınız framework’e özel bazı konfigürasyonları yapmanız gerekebilir. React ve Vue için bu konfigürasyonlar nasıl yapılır:

Vue ile i18next nasıl kullanılır ?

Vue 3 kullanıyorsanız tek yapmanız gereken Vue instance’ına i18n paketini ve konfigürasyon dosyasını tanıtmak. Bunu main.js dosyasında direkt olarak yapabilirsiniz ancak kodları düzenli tutmak ve konfigürasyonu tek bir dosyada tamamlamak için aşağıdaki adımları uygulayabilirsiniz:

• i18n.js dosyasına kurmuş olduğunuz i18next-vue paketini dahil edin.
• Bu dosyadan aşağıdaki gibi bir default fonksiyon dışa aktarın.
• main.js dosyanızda bu fonksiyonu çağırın ve argüman olarak Vue instance’ını gönderin.
• Hazırsınız !

// i18n.js
import I18NextVue from 'i18next-vue';// i18next-vue

....
// Bu fonksiyon instance'ı alacak ve i18next'i instance'a dahil edecek.
export default function (app) {
  app.use(I18NextVue, { i18next })
  return app
}

// main.js

import i18n from "./i18n.js";

const app = createApp(App);

....
// app instance'ını argüman olarak ilet
i18n(app).mount('#app')

Artık Vue uygulamanızda istediğiniz her yerde Vue instance’ı üzerinde tanımlanan $t() fonksiyonu aracılığıyla dil paketi içeriklerine erişebilirsiniz.

$t() fonksiyonuna argüman olarak string formatında ulaşmak istediğiniz çeviri elemanının key değerini gönderdiğinizde ulaşmak istediğiniz değeri uygun dil paketi içerisinden geri döndürecektir. Bir nesne elemanına erişmek için ise; string olarak dot notation yöntemini kullanabilirsiniz.

Örnek Kullanım:
<template>
<h2>{{$t('test')}}</h2> --> Deneme mesajı Türkçe
</template>

Programatik Olarak Dil Değiştirme

Vue üzerinde i18next Dilini değiştirmek için, Vue instance’da bulunan $i18next nesnesinde bulunan changeLanguage fonksiyonunu kullanabilirsiniz.

// farklı dil paketine geçiş yap
this.$i18next.changeLanguage("en")

React ile i18next nasıl kullanılır ?

React kullanıyorsanız tek yapmanız gereken ilgili paketleri yükledikten sonra konfigürasyon dosyasında react-i18next paketini konfigürasyona dahil etmek ve konfigürasyonu dışarı aktarmak, son olarak i18n.js dosyasını index.js dosyasına dahil etmek.

// i18n.js
import { initReactI18next } from 'react-i18next';// react i18next paketi

i18n
  .use(initReactI18next)// initReactI18next paketini kullan
  ...


export default i18n;// konfigürasyonu dışarı aktar

// index.js
...

// konfigürasyon'u dahil et
import './i18n.js';

...
);

Bundan sonra React uygulamanızda istediğiniz her yerde uygun dil paketinden içeriklerinizi dahil edebilirsiniz. Dil paketinde bulunan içeriklere erişmek için react-i18next paketinin sağladığı useTranslation hook’unu kullanabilirsiniz. Hook içerisinden return edilent fonksiyonunu tanımladıktan sonra bu fonskyion ile ulaşmak istediğiniz içeriklere erişebilirsiniz.

t fonksiyonuna argüman olarak string formatında ulaşmak istediğiniz çeviri elemanının key değerini gönderdiğinizde ulaşmak istediğiniz değeri uygun dil paketi içerisinden geri döndürecektir. Bir nesne elemanına erişmek için ise; string olarak dot notation yöntemini kullanabilirsiniz.

// Örnek kullanım:

import { useTranslation } from 'react-i18next';// paketi dahil et

function App() {
  const { t } = useTranslation();// t fonksiyonunu tanımla

  return (
    <div>
        <h2>{t('test')}</h2> --> Deneme mesajı Türkçe
    </div>
  )
}

Programatik Olarak Dil Değiştirme

React üzerinde i18next Dilini değiştirmek için, useTranslation hook’undan return edileni18n nesnesindeki changeLanguagefonksiyonunu kullanabilirsiniz.

const { t, i18n } = useTranslation();

// farklı dil paketine geçiş yap
i18n.changeLanguage("en")

i18next, JSON formatındaki dil paketlerinizi otomatik olarak istediğiniz dile çevirmek için kullanabileceğiniz faydalı bir web servisi de sunmaktadır:

https://translate.i18next.com/

Kaynaklar

• Internationalization and localization - Wikipedia
• Introduction | i18next documentation
• locize - continuous localization as a service

Sass Nedir ?

SASS, CSS’in daha güçlü, yetenekli ve esnek olmasını sağlayan bir önişlemcidir (preprocessor). Web geliştirmenin bir standardı olan CSS’e yeni özellikler ve işlevler ekleyerek, daha yönetilebilir, özelleştirilmiş ve geliştirici-dostu olan yapılar oluşturmayı amaçlar. SASS, CSS’in temel özelliklerini genişletir ve geliştiricilere kod tekrarını azaltma, daha düzenli ve okunabilir kod yazma gibi avantajlar sunar.

SASS’ın Temel Özellikleri Nelerdir ?

• Değişkenler: Aynı değeri birden çok kez kullanmanız gerektiğinde, değeri bir değişken olarak saklayabilir ve istediğiniz yerlerde kullanabilirsiniz. Bu, stil dosyalarının daha düzenli, okunabilir ve yönetilebilir olmasını sağlar.
• Nesting: Stil tanımlamalarını daha hiyerarşik bir yapıda yazabilirsiniz. Bu da stil dosyalarını daha okunabilir ve anlaşılır kılar.
• Mixin Yapısı: Tekrar eden stilleri ve özellikleri tanımlamak için kullanılır. Mixin’ler, stil kodunun daha az tekrar edilmesini sağlar ve bakımı kolaylaştırır.
• Extend — inheritance Yapısı: Bir stil tanımını başka bir stil tanımına aktarmanızı sağlar. Bu da kod tekrarını azaltır ve stil dosyalarını daha verimli hale getirir.
• Fonksiyonlar: Özel fonksiyonlar tanımlayabilir ve bunları stil özelliklerini hesaplamak gibi işlemler için kullanabilirsiniz.
• Partials: Stil kodlarınızı dosyalar halinde daha küçük parçalara bölerek modüler ve yüksek performanslı bir şekilde kullanmanızı sağlar.
• …..

SASS’ın Avantajları Nelerdir ?

• Daha Verimli Kod Yönetimi: Değişkenler, Extend yapısı ve Mixin’ler sayesinde kod tekrarını önler ve stil dosyalarını daha düzenli hale getirir.
• Daha Hızlı Geliştirme: Nesting yapısı, stil tanımlamalarını daha hızlı ve kolay hale getirir, kod okunabilirliğini artırır.
• Daha Fazla Esneklik: Function ve Mixin gibi özellikler sayesinde stilleri daha esnek bir şekilde uygulayabilirsiniz.
• Daha İyi Bakım: Değişiklik yapmanız gerektiğinde, ortak yapıları güncellemek tüm sayfalardaki stil özelliklerini etkiler ve bakımı kolaylaştırır.
• Daha organize CSS: Stil dosyalarını daha düzenli bir şekilde organize etmenizi sağlar, Partials yapısı sunar..

SASS Nasıl Kullanılır?

SASS iki farklı sözdizimi kullanımına olanak tanır, SCSS ve SASS. Popüler olan ve sık kullanılan sözdizimi SCSS’tir.

• SCSS: Sass’ın yeni ve genişletilmiş sözdizimidir. Geleneksel CSS yazımına daha yakındır ve stil tanımlamalarında süslü parantezler {} ve noktalı virgüller ; kullanır.
• SASS: Sass’ın orijinal sözdizimidir, stil tanımlamalarını daha kısa ve düzenli bir şekilde yazmanıza olanak tanır. Süslü parantezler ve noktalı virgüller kullanılmaz; boşluklar ve girintiler yapının şekillenmesini sağlar.

SASS Kullanım Örnekleri:

Örnekler için SCSS sözdizimini kullanacağım.

Değişken Tanımlama ve Kullanma:

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

Nesting Yapısı:

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

Extend — Inheritance Yapısı:

%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

SASS Nasıl Çalışır ?

SASS bir CSS önişlemcisidir, tarayıcılar tarafından direkt olarak çalıştırılabilir bir yapı üretemez, Yani günün sonunda çalışacak olan kodların CSS formatında olması gerekmektedir. Bu nedenle SASS ile oluşturulan stil yapılarının öncelikle CSS’e dönüştürülmesi gerekmektedir. Bu dönüştürme işlemi için SASS ekibi tarafından sunulan farklı dönüştürücüler kullanılmaktadır.

Javascript Sass: https://sass-lang.com/documentation/js-api/

Dart Sass: https://sass-lang.com/documentation/cli/dart-sass/

Bu dönüştürücüler ile birlikte, cli veya paketler aracılığıyla .scss veya .sass dosyalarını .css dosyalarına çevirebilir ve kullanıma hazır hale getirebilirsiniz.

Örnek Kullanım:
sass <input.scss> [output.css]

Resmi Dökümantasyon:

Sass: Syntactically Awesome Style Sheets

Hoisting, JavaScript ile geliştirme yapıyorsanız çokça karşılaşacağınız bir kavramdır. Yeterince bilinmediği durumlarda, uygulamanızda ciddi sorunlara neden olabilir. Bu yazıda, JavaScript’te Hoisting nedir ? Ne için var ? gibi sorulara cevap vermeye çalışacağım; keyifli okumalar…

Hoisting Nedir ? Tanımlama

JavaScript’te Hoisting kısaca kodda bir değişkenin veya fonksiyonun ne zaman tanımlandığının değiştirilmesi olayıdır.

Kelime anlamı “yukarı çekmek, kaldırmak” olan Hoisting, kodda tanımlanan bazı değişken ve-ya fonksiyon’ların yorumlayıcının en üst seviyesine taşınmasıdır.

Neden Hoisting Var ?

Normal bir JavaScript uygulamasında, kodlar ilk satırdan başlayarak sırasıyla aşağıya doğru devam ederek çalıştırılır. Ancak, Hoisting sayesinde kodda tanımlanan bazı değişken ve-ya fonksiyonlar; tanımlandıkları yere bakılmaksızın, kodun en üst seviyesine taşınır ve memory’de tutulur. Bu sayede bu değeler kodda her yerde erişilebilir hale gelir. Bu durumun temel amacı JavaScript’in karmaşık kodları çalıştırmasını ve derlemesini kolaylaştırmaktır. Yani Hoisting, JavaScript’in bazı değişken ve fonksiyonlara erişmek için kodda gezinmesine gerek kalmadan önceden en üstte tanımlamasıdır.

Değişkenlerde Hoisting

Değişkenlerde Hoisting olayı yalnızca var keyword’ü ile yapılan tanımlamalarda meydana gelir. Yani let ve const ile yapılan değişken tanımlamalarında Hoisting olayı meydana gelmez.

// true
var cod = "erdal";

// false
const cod = "erdal";
let cod = "erdal";

Hatta bu durum, var keyword’ü ile yapılan değişken tanımlamalarının bazılarının global scope’a taşınmasının temel nedenidir. Değişken programın en üst noktasına taşındığı için; programın her yerinde erişilebilir hale gelir.

Ancak burada dikkat edilmesi gereken önemli bir nokta var, değişkenlerde Hoisting olayı yalnızca tanımlamaların hoist edilmesini (üste taşınmasını) sağlar, değişkenin değerini üste taşımaz. JavaScript yalnızca bu değişkenin tanımlandığı bilgisine sahip olur. Yani var keyword’ü ile tanımladığınız değişkenleri tanımlama bloğundan önce kullanmaya çalışırsanız undefined değerini alırsınız. Bu da bildiğiniz üzere, değişkenin tanımlandığını ancak henüz bir değer atanmadığını temsil eder.
Ancak let ve const ile tanımlanan değişkenleri, tanımlamadan önceden kullanmaya çalışırsanız, Hoisting olayı olmayacağından, referans hatası alırsınız.

console.log(erdal);// undefined

//  hoist | non-hoist
var erdal = "coderdal";

console.log(erdal);// coderdal

console.log(erdal);// ReferenceError

//  no hoisting
const erdal = "coderdal";
let erdal = "coderdal";

console.log(erdal);// coderdal

Fonksiyonlarda Hoisting

Fonksiyonlarda ise, hem fonksiyonun kendisi hem de işlevi Hoisting olayına maruz kalır. Ancak fonksiyonlarda Hoisting olayı yalnızca named function’larda meydana gelir. Function expression’larda Hoisting yapılmaz. Yani sadece function keyword’ü ile yapılan named function tanımlamalarında Hoisting meydana gelir.

// true
function sayHello() {
  console.log("Hello from named function.");
}

// false
const sayHi = () => console.log("Hi from function expression.");
var sayHi = () => console.log("Hi from function expression.");
let sayHi = () => console.log("Hi from function expression.");
const sayHi = function() {console.log("Hi from function expression.")};
var sayHi = function() {console.log("Hi from function expression.")};
let sayHi = function() {console.log("Hi from function expression.")};

(var = Function) !== Hoisting

var keyword’ü ile tanımladığımız fonksiyonun işlevinin olmamasının nedeni, Değişkenlerde Hoisting olayının sadece değişkenin tanımlamasına yapılmasıdır. Yani değişkenin değeri tanımlanana kadar undefined olarak kalır, bu nedenle var ile tanımlanan fonksiyonda Hoisting olayı olmaz.

Günün sonunda sağdaki kutucukta bulunan kodlar çalıştığında, memory’de başlangıç değerleri soldaki tabloda olduğu gibi olacaktır.

• function expression - JavaScript | MDN
• Function - JavaScript | MDN
• Hoisting - MDN Web Docs Glossary: Definitions of Web-related terms | MDN

Bu yazıda React ile birlikte hayatımıza girmiş olan JSX nedir ? ve nasıl çalışır ? gibi sorulara yanıt vermeye çalışacağım.

JSX aslında bir JavaScript syntax eklentisi. Bu eklenti özünde nasıl çalışıyor ?

React etkileşimli kullanıcı arayüzleri oluşturmamızı ve DOM’u kontrol etmemizi sağlayan bir JavaScript kütüphanesidir.

React’in ana prensiplerinden biri olan componentler uygulamamızı küçük parçalara bölebilmemize ve yönetebilmemize olanak sağlıyor.

React’in bu componentleri yönetebilmesi, yeniden render edebilmesi için bu componentlerin template’inin (HTML kodlarının*) React tarafından istenilen format olan “React elements” dediğimiz nesneler şeklinde tanımlanmış olması gerekmektedir. Ancak bu “React elements” dediğimiz yapı hiç de developer-friendly değil. Bu kısma birazdan tekrar değineceğim.

Ancak bir React uygulamasının kodlarını ister JSX ister React elements yapısında oluşturun, bu kodların derleyici üzerinde direkt olarak çalışabileceğini ifade etmiyor; çünkü JavaScript bir programlama dili, React ise bir arayüz kütüphanesi. Bizim için anlamlı olan React kodları JavaScript için hiçbir anlamı ifade etmiyor.

JavaScript’in yazdığımız kodu çalıştırabilmesi için öncelikle React kodlarını kendi anlayabileceği formata çevirmesi gerekiyor. Aslında bir React uygulamasının buildini alırken yaptığımız şey tam olarak bu. Eğer build aldığınız bir React uygulamasının kaynak kodlarına bakmaya çalıştıysanız, o kodların çok karmaşık olduğunu farketmişsinizdir.

Buraya kadar konuştuklarımız aslında React kodlarının Pure JavaScript’e çevrilmesiyle alakalıydı.

React bazı durumlarda kendi içerisinde de bir format değişimine ihtiyaç duyabiliyor. Bunlardan biri de JSX syntax’ı kullandığımız durum.

JSX dediğimiz syntax aslında bizim React kodlarını daha anlaşılabilir yazmamız için ortaya çıkıyor. “React elements” alternatifi olarak, JSX’i kullanıyoruz.

JSX’e React uygulamamızdaki componentlarımızın template bölümünü tanımlarken yani ekranda görünecek olan HTML yapısını tanımlarken ihtiyaç duyuyoruz. Aslında Bu syntax aslında ne JavaScript ne de HTML.

JSX, JavaScript (React) içerisine HTML, daha doğrusu HTML’i taklit eden elementler yazmamıza olanak sağlıyor.

JSX’in kullanımı React ekibi tarafından önerilse de React uygulamaları geliştirmek için JSX bir zorunluluk değil.

JSX’i kullanmadan da React uygulamaları geliştirebilirsiniz.

Fakat bu noktada biraz önce değinmiş olduğum bir problemle karşılaşırsınız: “React elements”...

“React elements” aslında, ugulamamızın HTML bölümünü yazmak için React tarafından geliştirilmiş bir eleman-obje formatı. Bu elemanları React kütüphanesinin içerisinde gelen özel metodlar aracılığıyla oluşturabiliyoruz.

Ancak React ile HTML elemanı oluşturarak kod yazmak ve kodu okumak oldukça zor. Buna basit bir örnekle bakalım.

Örnekte basit bir React component’ı oluşturuyoruz. Bu component’ın JSX syntax ile yazılmış hali ile React elements ile yazılmış olan halini karşılaştıracağız.

Babel çevirici aracılığıyla JSX ile yazılmış olan kodun React elements’a çevirilmiş haline bakalım:

Göründüğü üzere JSX dediğimiz formatta (1), yazdığımız kod çok daha okunaklı ve kısa bir kod.

React elements dediğimiz formatta (2), React.createElement(type, props, …children) gibi uzun ve okuması zor kodlar bulunuyor. Yalnızca bir div için bu kadar fazla kod yazmak, geliştirme süresini ciddi oranda artıracaktır.

Yani JSX Syntax’ına tamamen daha okunaklı kodlar yazmak için ihtiyaç duyuyoruz.

React tarafından istenilen format “React elements" ise, nasıl JSX yazabiliyoruz ?

Burada da Babel adını verdiğimiz compiler devreye giriyor.

Babel aslında yazdığımız JSX kodunu React’in anlayabileceği bir formata (React elements’a) çeviriyor. Yazdığımız JSX kodu ile React arasında bir nevi köprü görevi görüyor.

Babel create-react-app gibi şablonları kullandığınız takdirde otomatik olarak projenize dahil oluyor.

Üstelik bütün bu olaylar sahne arkasında bir sihir gibi gerçekleşiyor. Çoğu durumda sizin yapmanız gereken hiçbir şey kalmıyor.

Biraz önce baktığımız örnekte de açıkça göründüğü gibi, resmen olmasa da JSX aslında React için vazgeçilmez bir syntax biçimi.

İki farklı durumda yazacağımız kodlar arasındaki farklar açıkça belli.

Bir tarafta 5 satırlık JSX kullanarak anlamlı bir kod yazarken, diğer tarafta da çok daha uzun ve okunabilirliği düşük bir kod mevcut.

JSX aslında HTML mi ?

JSX kendine özgü yazım stili ile aslında ne HTML ne de JavaScript kodu.

JSX elemanları, HTML elemanlarına benzeyen ve onları taklit eden yapılardır.

JSX elemanlarının bazı özelliklerinin HTML’den farklı olmasının nedeni de bu farklılık aslında.

Örneğin:

• JSX kodları, bütün elemanları saracak olan bir kapsayıcıya yani parent bir elemana ihtiyaç duyuyor, bu kapsayıcıyı kullanmak istemediğimiz yerlerde ise React Fragmentleri kullanıyoruz.
• JSX içerisinde elemanlara verdiğimiz attributelerinin tamamı HTML’den farklı olarak camelCase dediğimiz yazım şekliyle yazılıyor (e.g. class yerine className).
• JSX içerisinde { süslü parentezler arasında } direkt olarak JavaScript kodu çalıştırabilirsiniz.
• Inline stil tanımlamaları ve benzeri bir takım farklılıklar bulunuyor.

Son olarak, Aslında Günün sonunda döngü şu şekilde çalışıyor;

• Babel uygulamadaki JSX kodlarını React Elements’e çevirir.
• React ise kendi kodlarını Pure JavaScript’e çevirir.
• Javascript bu kodları derler ve uygulamamız çalıştırılabilir olur.

Kaynaklar:

• createElement
• React Without JSX - React
• Introducing JSX - React
• HTML vs JSX - What's the Difference?