# Serhat Varlı > Senior Front End Developer — Gaziosmanpaşa / İstanbul. I design and code beautifully simple things, and I love what I do. It's as simple as that! ## Pages - [Home](https://www.serhatvarli.com/): resume, specializations, projects, contact - [Türkçe](https://www.serhatvarli.com/tr): Turkish version - [Blog](https://www.serhatvarli.com/blog): technical articles (also in Turkish: https://www.serhatvarli.com/tr/blog) - [Privacy notice](https://www.serhatvarli.com/privacy) ## Blog articles - [What Are State and Lifecycle in React?](https://www.serhatvarli.com/blog/what-is-state-and-lifecycle): State and lifecycle are two important React concepts that play a key role in building modern web applications. - [What Are Components and Props?](https://www.serhatvarli.com/blog/what-are-components-and-props): In React, components and props are the core concepts that let you build an application from independent, reusable pieces. - [What Does Rendering Elements Mean in React?](https://www.serhatvarli.com/blog/what-is-rendering-elements): In React, rendering elements is the process of drawing React elements on the screen to show them to the user. - [What Is JSX?](https://www.serhatvarli.com/blog/what-is-jsx): JSX is the HTML-like syntax extension for JavaScript that React uses to describe user interfaces. - [React Hello World!](https://www.serhatvarli.com/blog/react-hello-world): "Hello World" in React is the first step of building a simple application with the library. - [What Is a Web Component?](https://www.serhatvarli.com/blog/what-is-a-web-component): Web Components are a browser standard for reusable custom HTML elements, and Vue can produce them with defineCustomElement. - [What Is a VNode in Vue?](https://www.serhatvarli.com/blog/what-is-a-vnode): A VNode (virtual node) is the JavaScript object Vue uses in its virtual DOM to describe an element or component. - [What Is the Virtual DOM in Vue?](https://www.serhatvarli.com/blog/what-is-the-virtual-dom): The virtual DOM is a lightweight representation of the user interface that Vue compares and patches instead of rebuilding the real DOM. - [What Is the VDOM in Vue?](https://www.serhatvarli.com/blog/what-is-the-vdom): Vue's virtual DOM (VDOM) is a lightweight JavaScript copy of the DOM that lets Vue update the page efficiently. - [What Is a Template Ref in Vue?](https://www.serhatvarli.com/blog/what-is-a-template-ref): A template ref gives your code direct access to a DOM element or child component marked with the ref attribute. - [What Is a Slot in Vue?](https://www.serhatvarli.com/blog/what-is-a-slot-in-vue): Slots let a parent component pass content into placeholders defined in a child component's template. - [What Is a Single-File Component in Vue?](https://www.serhatvarli.com/blog/what-is-a-single-file-component): A Vue single-file component combines a component's HTML, JavaScript and CSS in one .vue file. - [What Is a Side Effect in Vue?](https://www.serhatvarli.com/blog/what-is-a-side-effect): A side effect is any work that reaches outside a function — DOM changes, requests, timers — and in Vue it belongs in watchers and lifecycle hooks. - [What Is an SFC in Vue?](https://www.serhatvarli.com/blog/what-is-sfc): A Vue Single File Component (SFC) keeps a component's template, script and styles together in one .vue file. - [What Is a Scoped Slot in Vue?](https://www.serhatvarli.com/blog/what-is-a-scoped-slot): A scoped slot lets a child component pass its own data to the content the parent puts into the slot. - [What Is the Vue Scheduler?](https://www.serhatvarli.com/blog/what-is-the-vue-scheduler): Vue's scheduler queues component updates and watcher callbacks and runs them together, once per tick. - [What Is a Render Function in Vue?](https://www.serhatvarli.com/blog/what-is-a-render-function): A render function describes a Vue component's output in JavaScript with h(), instead of a template. - [What Is ref in Vue?](https://www.serhatvarli.com/blog/what-is-ref-in-vue): Vue's ref attribute gives your code direct access to a DOM element or a child component instance. - [What Is the Vue Reactivity API?](https://www.serhatvarli.com/blog/what-is-the-reactivity-api): Vue's Reactivity API — ref, reactive, computed, watch and watchEffect — manages state and keeps the UI up to date. - [What Is Reactivity in Vue?](https://www.serhatvarli.com/blog/what-is-reactivity-in-vue): Reactivity is Vue's system for reacting to data changes automatically and keeping the user interface in sync. - [What Is a Reactive Effect in Vue?](https://www.serhatvarli.com/blog/what-is-a-reactive-effect): A reactive effect is a function Vue runs again automatically when the reactive data it depends on changes. - [What Is Provide / Inject in Vue?](https://www.serhatvarli.com/blog/what-is-provide-inject): provide and inject pass data from an ancestor component to deeply nested descendants without prop drilling. - [What Is a Prop in Vue?](https://www.serhatvarli.com/blog/what-is-a-prop-in-vue): A prop is how a Vue component receives data from its parent — a one-way, validated data flow. - [What Is a Vue Plugin?](https://www.serhatvarli.com/blog/what-is-a-vue-plugin): A Vue plugin adds app-wide features — global properties, directives, components or configuration — to a Vue application. - [What Is the Vue Options API?](https://www.serhatvarli.com/blog/what-is-the-options-api): The Options API defines a Vue component with option blocks such as data, methods, computed and watch. - [What Is a Named Slot in Vue?](https://www.serhatvarli.com/blog/what-is-a-named-slot): Named slots let a Vue component receive several pieces of content and place each in its own slot. - [What Is a Macro in Vue?](https://www.serhatvarli.com/blog/what-is-a-macro-in-vue): In Vue, 'macro' usually means Vue's compiler macros or the community Vue Macros project. - [What Are Vue Lifecycle Hooks?](https://www.serhatvarli.com/blog/what-are-vue-lifecycle-hooks): Lifecycle hooks are functions Vue calls at each stage of a component instance, from creation to removal. - [What Is inject in Vue?](https://www.serhatvarli.com/blog/what-is-inject-in-vue): Vue's inject option lets a child component receive values provided by an ancestor component. - [What Is an In-DOM Template in Vue?](https://www.serhatvarli.com/blog/what-is-an-in-dom-template): An in-DOM template is a Vue template written directly in the page HTML instead of in a component file. - [What Is Hoisting in JavaScript?](https://www.serhatvarli.com/blog/what-is-hoisting): Hoisting is the JavaScript behaviour of moving declarations to the top of their scope before the code runs. - [What Is a Functional Component in Vue?](https://www.serhatvarli.com/blog/what-is-a-functional-component): Functional components are simple, stateless components that only turn their input into output. - [What Is a Fragment in Vue?](https://www.serhatvarli.com/blog/what-is-a-fragment-in-vue): Fragments let a Vue 3 component have more than one root element in its template. - [What Is an Event in Vue?](https://www.serhatvarli.com/blog/what-is-an-event-in-vue): In Vue, events are user interactions or other things happening in the browser that your components can listen and react to. - [What Is effect in Vue?](https://www.serhatvarli.com/blog/what-is-effect-in-vue): effect is the lowest-level building block of Vue 3 reactivity: it runs a function and re-runs it when the reactive values it read change. - [What Is a Dynamic Component in Vue?](https://www.serhatvarli.com/blog/what-is-a-dynamic-component): Dynamic components in Vue let you switch which component is rendered at runtime. - [What Is a Vue Directive?](https://www.serhatvarli.com/blog/what-is-a-vue-directive): Vue directives are special v- prefixed attributes that add reactive behaviour to HTML elements. - [What Is a Vue Custom Element?](https://www.serhatvarli.com/blog/what-is-a-vue-custom-element): Vue custom elements turn Vue components into native custom HTML elements that work outside Vue. - [What Is the Vue Composition API?](https://www.serhatvarli.com/blog/what-is-the-composition-api): The Composition API, introduced in Vue 3, organises component logic with functions instead of option blocks. - [What Is a Composable in Vue?](https://www.serhatvarli.com/blog/what-is-a-composable): A Vue composable is a reusable function that shares stateful logic between components using the Composition API. - [What Is a Vue Component?](https://www.serhatvarli.com/blog/what-is-a-vue-component): A Vue component is a reusable, self-contained piece of the user interface with its own template, data and behaviour. - [What Is a Compiler Macro in Vue?](https://www.serhatvarli.com/blog/what-is-a-compiler-macro): Vue compiler macros are special functions available only in