Archiwa Angular

Understanding the Angular Component Lifecycle

If you’re building applications with Angular, understanding the component lifecycle is crucial. Lifecycle hooks provide insight and control over how Angular components are created, rendered, updated, and destroyed. Mastering these hooks helps you write more predictable and powerful apps.

What Is a Component Lifecycle?

Every Angular component goes through a defined series of steps from creation to removal: Instantiation, change detection, view rendering, and destruction. Angular provides lifecycle hooks—special methods—that let you tap into those moments and perform custom logic.

Major Lifecycle Hooks in Angular

ngOnInit(): Invoked once after the first ngOnChanges(). Used for component initialization.
ngOnChanges(): Called whenever data-bound input properties change.
ngDoCheck(): Used to detect and act upon changes that Angular can’t or won’t detect on its own.
ngAfterContentInit() & ngAfterContentChecked(): Deal with projected content (via <ng-content>).
ngAfterViewInit() & ngAfterViewChecked(): Focused on component’s view and its children after rendering.
ngOnDestroy(): Called just before Angular destroys the component.

Lifecycle Hook Example

import { Component, OnInit, OnDestroy } from '@angular/core';\n\n@Component({\n  selector: 'app-demo',\n  template: 'Demo works!
'\n})\nexport class DemoComponent implements OnInit, OnDestroy {\n  ngOnInit() {\n    console.log('Component Initialized');\n  }\n  ngOnDestroy() {\n    console.log('Component about to be destroyed');\n  }\n}\n

Lifecycle Hook Order

Hooks are called in a specific order. Here’s the typical sequence:

ngOnChanges() (if there are bound inputs)
ngOnInit()
ngDoCheck()
ngAfterContentInit()
ngAfterContentChecked()
ngAfterViewInit()
ngAfterViewChecked()
On update: ngDoCheck() → ngAfterContentChecked() → ngAfterViewChecked()
ngOnDestroy()

When to Use Each Lifecycle Hook

ngOnInit(): For initialization logic, API calls, or setting up your component after bindings.
ngOnChanges(): Useful when you need to react as @Input properties change.
ngOnDestroy(): For cleanup—unsubscribe from observables, remove event listeners, or clear intervals.
AfterView/Content Hooks: Interact with view and projected content after they are initialized or checked.

Tips for Working with Lifecycle Hooks

Keep your hook methods focused; don’t overload them with logic.
Remember to always unsubscribe from observables in ngOnDestroy() to prevent memory leaks.
Understand the timing: e.g., you can’t access view children in ngOnInit(), use ngAfterViewInit() instead.

Conclusion

The Angular component lifecycle offers a solid structure for building and maintaining web applications. Understanding and using lifecycle hooks effectively allows you to manage resources, optimize performance, and build scalable, maintainable code.

\n","Component Lifecycle in Angular Explained","status","publish","sticky",false,"excerpt","

Discover how Angular’s component lifecycle hooks work, why they matter, and how to leverage them for robust web applications.

\n","modified",["D",1751500283000],"categories",[303],{"_8":304,"_18":305,"_20":306,"_12":307,"_23":308,"_25":309,"_27":310,"_330":331,"_104":332},74,"https://blog.fulldev.pl/category/front-end-frameworks/","Front-End Frameworks","front-end-frameworks","category","\nFront-End Frameworks - Fulldev\n\n\n\n\n\n\n\n\n\n\n\n",{"_29":311,"_86":312,"_31":313,"_41":305,"_42":43,"_44":45,"_46":311,"_314":312,"_47":305,"_48":49,"_50":51,"_52":315},"Front-End Frameworks - Fulldev","-",{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},"og_description",{"_54":55,"_56":316},[317,321,325],{"_59":60,"_61":305,"_62":305,"_20":311,"_63":318,"_86":312,"_66":319,"_69":70},{"_61":65},{"_61":320},"https://blog.fulldev.pl/category/front-end-frameworks/#breadcrumb",{"_59":72,"_61":320,"_73":322},[323,324],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":306},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":326,"_69":70},[327],{"_59":91,"_92":328,"_97":329},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},"acf",[],{"_106":333,"_116":338,"_120":341,"_124":344,"_128":347},[334],{"_109":335,"_111":336},"https://blog.fulldev.pl/wp-json/wp/v2/categories/74",{"_113":337},[115],[339],{"_109":340},"https://blog.fulldev.pl/wp-json/wp/v2/categories",[342],{"_109":343},"https://blog.fulldev.pl/wp-json/wp/v2/taxonomies/category",[345],{"_109":346},"https://blog.fulldev.pl/wp-json/wp/v2/posts?categories=74",[348],{"_20":131,"_109":132,"_133":101},{"_29":350,"_86":351,"_31":352,"_41":353,"_42":43,"_44":45,"_46":350,"_314":351,"_47":353,"_48":49,"_354":355,"_356":357,"_358":359,"_50":51,"_360":361,"_52":365},"Component Lifecycle in Angular Explained – fulldev.pl","Explore Angular component lifecycle hooks, their order, usage tips, and examples to help you build robust web apps. Learn with fulldev.pl.",{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},"https://blog.fulldev.pl/2025/07/01/component-lifecycle-in-angular-explained/","article_published_time","2025-07-01T21:41:54+00:00","article_modified_time","2025-07-02T23:51:23+00:00","author","karol.fulldev@gmail.com","twitter_misc",{"_362":359,"_363":364},"Written by","Est. reading time","2 minutes",{"_54":55,"_56":366},[367,380,384,389],{"_59":368,"_61":353,"_62":353,"_20":350,"_63":369,"_370":355,"_371":357,"_358":372,"_86":351,"_66":374,"_69":70,"_88":376},"WebPage",{"_61":65},"datePublished","dateModified",{"_61":373},"https://blog.fulldev.pl/#/schema/person/541d1b12113b43129491f26babe9296e",{"_61":375},"https://blog.fulldev.pl/2025/07/01/component-lifecycle-in-angular-explained/#breadcrumb",[377],{"_59":378,"_92":379},"ReadAction",[353],{"_59":72,"_61":375,"_73":381},[382,383],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":292},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":385,"_69":70},[386],{"_59":91,"_92":387,"_97":388},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_59":390,"_61":373,"_20":359,"_391":392,"_398":399,"_62":401},"Person","image",{"_59":393,"_69":70,"_61":394,"_62":395,"_396":395,"_397":359},"ImageObject","https://blog.fulldev.pl/#/schema/person/image/","https://secure.gravatar.com/avatar/85c38a13827c9ffac271a0e810c15a216b410a7a132a6b1a9a5d496f7ee7a1e3?s=96&d=mm&r=g","contentUrl","caption","sameAs",[400],"https://blog.fulldev.pl","https://blog.fulldev.pl/author/karol-fulldevgmail-com/",{"_403":404,"_405":406},"previous_article",146,"next_article",150,{"_8":404,"_10":408,"_12":409,"_14":410,"_290":626,"_29":627,"_293":294,"_295":296,"_297":628,"_299":629,"_301":630,"_27":662,"_330":692},["D",1751402512000],"how-to-use-vite-with-vue-js-a-developers-guide",[411,441,480,519,557,596],{"_8":213,"_18":214,"_20":215,"_12":216,"_23":24,"_25":217,"_27":412,"_104":428},{"_29":219,"_31":413,"_41":214,"_42":43,"_44":45,"_46":219,"_47":214,"_48":49,"_50":51,"_52":414},{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":415},[416,419,423],{"_59":60,"_61":214,"_62":214,"_20":219,"_63":417,"_66":418,"_69":70},{"_61":65},{"_61":226},{"_59":72,"_61":226,"_73":420},[421,422],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":215},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":424,"_69":70},[425],{"_59":91,"_92":426,"_97":427},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_106":429,"_116":433,"_120":435,"_124":437,"_128":439},[430],{"_109":239,"_111":431},{"_113":432},[115],[434],{"_109":119},[436],{"_109":123},[438],{"_109":248},[440],{"_20":131,"_109":132,"_133":101},{"_8":442,"_18":443,"_20":444,"_12":445,"_23":24,"_25":446,"_27":447,"_104":465},40,"https://blog.fulldev.pl/tag/javascript/","JavaScript","javascript","\nArchiwa JavaScript - Fulldev\n\n\n\n\n\n\n\n\n\n",{"_29":448,"_31":449,"_41":443,"_42":43,"_44":45,"_46":448,"_47":443,"_48":49,"_50":51,"_52":450},"Archiwa JavaScript - Fulldev",{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":451},[452,456,460],{"_59":60,"_61":443,"_62":443,"_20":448,"_63":453,"_66":454,"_69":70},{"_61":65},{"_61":455},"https://blog.fulldev.pl/tag/javascript/#breadcrumb",{"_59":72,"_61":455,"_73":457},[458,459],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":444},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":461,"_69":70},[462],{"_59":91,"_92":463,"_97":464},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_106":466,"_116":471,"_120":473,"_124":475,"_128":478},[467],{"_109":468,"_111":469},"https://blog.fulldev.pl/wp-json/wp/v2/tags/40",{"_113":470},[115],[472],{"_109":119},[474],{"_109":123},[476],{"_109":477},"https://blog.fulldev.pl/wp-json/wp/v2/posts?tags=40",[479],{"_20":131,"_109":132,"_133":101},{"_8":481,"_18":482,"_20":483,"_12":484,"_23":24,"_25":485,"_27":486,"_104":504},107,"https://blog.fulldev.pl/tag/modern-tooling/","modern tooling","modern-tooling","\nArchiwa modern tooling - Fulldev\n\n\n\n\n\n\n\n\n\n",{"_29":487,"_31":488,"_41":482,"_42":43,"_44":45,"_46":487,"_47":482,"_48":49,"_50":51,"_52":489},"Archiwa modern tooling - Fulldev",{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":490},[491,495,499],{"_59":60,"_61":482,"_62":482,"_20":487,"_63":492,"_66":493,"_69":70},{"_61":65},{"_61":494},"https://blog.fulldev.pl/tag/modern-tooling/#breadcrumb",{"_59":72,"_61":494,"_73":496},[497,498],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":483},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":500,"_69":70},[501],{"_59":91,"_92":502,"_97":503},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_106":505,"_116":510,"_120":512,"_124":514,"_128":517},[506],{"_109":507,"_111":508},"https://blog.fulldev.pl/wp-json/wp/v2/tags/107",{"_113":509},[115],[511],{"_109":119},[513],{"_109":123},[515],{"_109":516},"https://blog.fulldev.pl/wp-json/wp/v2/posts?tags=107",[518],{"_20":131,"_109":132,"_133":101},{"_8":520,"_18":521,"_20":522,"_12":522,"_23":24,"_25":523,"_27":524,"_104":542},106,"https://blog.fulldev.pl/tag/vite/","vite","\nArchiwa vite - Fulldev\n\n\n\n\n\n\n\n\n\n",{"_29":525,"_31":526,"_41":521,"_42":43,"_44":45,"_46":525,"_47":521,"_48":49,"_50":51,"_52":527},"Archiwa vite - Fulldev",{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":528},[529,533,537],{"_59":60,"_61":521,"_62":521,"_20":525,"_63":530,"_66":531,"_69":70},{"_61":65},{"_61":532},"https://blog.fulldev.pl/tag/vite/#breadcrumb",{"_59":72,"_61":532,"_73":534},[535,536],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":522},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":538,"_69":70},[539],{"_59":91,"_92":540,"_97":541},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_106":543,"_116":548,"_120":550,"_124":552,"_128":555},[544],{"_109":545,"_111":546},"https://blog.fulldev.pl/wp-json/wp/v2/tags/106",{"_113":547},[115],[549],{"_109":119},[551],{"_109":123},[553],{"_109":554},"https://blog.fulldev.pl/wp-json/wp/v2/posts?tags=106",[556],{"_20":131,"_109":132,"_133":101},{"_8":558,"_18":559,"_20":560,"_12":561,"_23":24,"_25":562,"_27":563,"_104":581},84,"https://blog.fulldev.pl/tag/vue-js/","Vue.js","vue-js","\nArchiwa Vue.js - Fulldev\n\n\n\n\n\n\n\n\n\n",{"_29":564,"_31":565,"_41":559,"_42":43,"_44":45,"_46":564,"_47":559,"_48":49,"_50":51,"_52":566},"Archiwa Vue.js - Fulldev",{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":567},[568,572,576],{"_59":60,"_61":559,"_62":559,"_20":564,"_63":569,"_66":570,"_69":70},{"_61":65},{"_61":571},"https://blog.fulldev.pl/tag/vue-js/#breadcrumb",{"_59":72,"_61":571,"_73":573},[574,575],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":560},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":577,"_69":70},[578],{"_59":91,"_92":579,"_97":580},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_106":582,"_116":587,"_120":589,"_124":591,"_128":594},[583],{"_109":584,"_111":585},"https://blog.fulldev.pl/wp-json/wp/v2/tags/84",{"_113":586},[115],[588],{"_109":119},[590],{"_109":123},[592],{"_109":593},"https://blog.fulldev.pl/wp-json/wp/v2/posts?tags=84",[595],{"_20":131,"_109":132,"_133":101},{"_8":252,"_18":253,"_20":254,"_12":255,"_23":24,"_25":256,"_27":597,"_104":613},{"_29":258,"_31":598,"_41":253,"_42":43,"_44":45,"_46":258,"_47":253,"_48":49,"_50":51,"_52":599},{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":600},[601,604,608],{"_59":60,"_61":253,"_62":253,"_20":258,"_63":602,"_66":603,"_69":70},{"_61":65},{"_61":265},{"_59":72,"_61":265,"_73":605},[606,607],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":254},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":609,"_69":70},[610],{"_59":91,"_92":611,"_97":612},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_106":614,"_116":618,"_120":620,"_124":622,"_128":624},[615],{"_109":278,"_111":616},{"_113":617},[115],[619],{"_109":119},[621],{"_109":123},[623],{"_109":287},[625],{"_20":131,"_109":132,"_133":101},"\n

Why Choose Vite for Vue.js?

\n\n\n\n

Vite is a next-generation frontend build tool that brings incredible speed and simplicity to modern web development, especially when paired with Vue.js. Its native ESM support and lightning-fast hot module replacement (HMR) make it the go-to choice for Vue developers who want minimal configuration and super-fast workflow.

\n\n\n\n

Prerequisites

\n\n\n\n

Node.js (version 14.18+, 16+ recommended)
NPM or Yarn package manager
Basic understanding of Vue.js

\n\n\n\n

Step 1: Creating a New Vite + Vue Project

\n\n\n\n

Getting started is a breeze. Open your terminal and run:

\n\n\n\n

npm create vite@latest my-vue-app -- --template vue\n# OR using Yarn\nyarn create vite my-vue-app --template vue\n

\n\n\n\n

This command scaffolds a new Vite project tailored for Vue.js. Follow the interactive prompts, then:

\n\n\n\n

cd my-vue-app\nnpm install\n# OR\nyarn

\n\n\n\n

Step 2: Running the Development Server

\n\n\n\n

To see your Vue app in action, start the development server:

\n\n\n\n

npm run dev\n# OR\nyarn dev

\n\n\n\n

Visit http://localhost:5173 to view your running app. Enjoy near-instant updates thanks to Vite’s HMR.

\n\n\n\n

Step 3: Understanding the Project Structure

\n\n\n\n

Vite’s project scaffold for Vue.js is simple and approachable:

\n\n\n\n

src/ – Your project source code (components, styles, etc.)
public/ – Static assets
index.html – App entry point
vite.config.js – Vite configuration file

\n\n\n\n

Sample `vite.config.js` for Vue

\n\n\n\n

import { defineConfig } from 'vite';\nimport vue from '@vitejs/plugin-vue';\n\nexport default defineConfig({\n  plugins: [vue()],\n});\n

\n\n\n\n

The Vue plugin is auto-added, so basic usage typically requires no extra configuration.

\n\n\n\n

Step 4: Installing Additional Dependencies

\n\n\n\n

Most familiar Vue ecosystem tools like Vue Router or Pinia work seamlessly with Vite:

\n\n\n\n

npm install vue-router\n# OR\nyarn add vue-router\n

\n\n\n\n

Then, configure them as usual in your Vue project.

\n\n\n\n

Step 5: Production Build & Deployment

\n\n\n\n

Ready to ship? Build your app for production:

\n\n\n\n

npm run build\n# OR\nyarn build

\n\n\n\n

The output will be in the dist/ directory, ready for deployment.

\n\n\n\n

Troubleshooting & Tips

\n\n\n\n

Port conflicts? Edit or add the server.port option in vite.config.js.
Need environment variables? Use .env files at the root as with Vue CLI.
Customize Vite? Check the Vite config documentation for advanced setups.

\n\n\n\n

Conclusion

\n\n\n\n

Switching to Vite with Vue.js can dramatically improve your development speed, reduce configuration headaches, and provide a modern, enjoyable workflow. Try it out in your next project and experience the difference for yourself!

\n","How to Use Vite with Vue.js: A Developer’s Guide","

Learn how to set up and use Vite with Vue.js for lightning-fast development. Boost your workflow with modern tooling and simplified configuration!

\n",["D",1751500284000],[631],{"_8":304,"_18":305,"_20":306,"_12":307,"_23":308,"_25":309,"_27":632,"_330":648,"_104":649},{"_29":311,"_86":312,"_31":633,"_41":305,"_42":43,"_44":45,"_46":311,"_314":312,"_47":305,"_48":49,"_50":51,"_52":634},{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":635},[636,639,643],{"_59":60,"_61":305,"_62":305,"_20":311,"_63":637,"_86":312,"_66":638,"_69":70},{"_61":65},{"_61":320},{"_59":72,"_61":320,"_73":640},[641,642],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":306},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":644,"_69":70},[645],{"_59":91,"_92":646,"_97":647},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},[],{"_106":650,"_116":654,"_120":656,"_124":658,"_128":660},[651],{"_109":335,"_111":652},{"_113":653},[115],[655],{"_109":340},[657],{"_109":343},[659],{"_109":346},[661],{"_20":131,"_109":132,"_133":101},{"_29":663,"_86":664,"_31":665,"_41":666,"_42":43,"_44":45,"_46":663,"_314":664,"_47":666,"_48":49,"_354":667,"_356":668,"_358":359,"_50":51,"_360":669,"_52":670},"How to Use Vite with Vue.js | Step-by-Step Guide","Learn how to quickly set up Vite with Vue.js for fast, modern web development. Step-by-step guide with tips, code snippets, and best practices.",{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},"https://blog.fulldev.pl/2025/07/01/how-to-use-vite-with-vue-js-a-developers-guide/","2025-07-01T20:41:52+00:00","2025-07-02T23:51:24+00:00",{"_362":359,"_363":364},{"_54":55,"_56":671},[672,680,684,689],{"_59":368,"_61":666,"_62":666,"_20":663,"_63":673,"_370":667,"_371":668,"_358":674,"_86":664,"_66":675,"_69":70,"_88":677},{"_61":65},{"_61":373},{"_61":676},"https://blog.fulldev.pl/2025/07/01/how-to-use-vite-with-vue-js-a-developers-guide/#breadcrumb",[678],{"_59":378,"_92":679},[666],{"_59":72,"_61":676,"_73":681},[682,683],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":627},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":685,"_69":70},[686],{"_59":91,"_92":687,"_97":688},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_59":390,"_61":373,"_20":359,"_391":690,"_398":691,"_62":401},{"_59":393,"_69":70,"_61":394,"_62":395,"_396":395,"_397":359},[400],{"_403":693,"_405":9},128,{"_8":695,"_10":696,"_12":697,"_14":698,"_290":876,"_29":877,"_293":294,"_295":296,"_297":878,"_299":879,"_301":880,"_27":912,"_330":942},124,["D",1751247969000],"react-vs-vue-vs-angular-which-one-to-choose",[699,729,768,807,846],{"_8":17,"_18":19,"_20":21,"_12":22,"_23":24,"_25":26,"_27":700,"_104":716},{"_29":30,"_31":701,"_41":19,"_42":43,"_44":45,"_46":30,"_47":19,"_48":49,"_50":51,"_52":702},{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":703},[704,707,711],{"_59":60,"_61":19,"_62":19,"_20":30,"_63":705,"_66":706,"_69":70},{"_61":65},{"_61":68},{"_59":72,"_61":68,"_73":708},[709,710],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":21},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":712,"_69":70},[713],{"_59":91,"_92":714,"_97":715},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_106":717,"_116":721,"_120":723,"_124":725,"_128":727},[718],{"_109":110,"_111":719},{"_113":720},[115],[722],{"_109":119},[724],{"_109":123},[726],{"_109":127},[728],{"_20":131,"_109":132,"_133":101},{"_8":730,"_18":731,"_20":732,"_12":733,"_23":24,"_25":734,"_27":735,"_104":753},88,"https://blog.fulldev.pl/tag/javascript-frameworks/","JavaScript frameworks","javascript-frameworks","\nArchiwa JavaScript frameworks - Fulldev\n\n\n\n\n\n\n\n\n\n",{"_29":736,"_31":737,"_41":731,"_42":43,"_44":45,"_46":736,"_47":731,"_48":49,"_50":51,"_52":738},"Archiwa JavaScript frameworks - Fulldev",{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":739},[740,744,748],{"_59":60,"_61":731,"_62":731,"_20":736,"_63":741,"_66":742,"_69":70},{"_61":65},{"_61":743},"https://blog.fulldev.pl/tag/javascript-frameworks/#breadcrumb",{"_59":72,"_61":743,"_73":745},[746,747],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":732},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":749,"_69":70},[750],{"_59":91,"_92":751,"_97":752},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_106":754,"_116":759,"_120":761,"_124":763,"_128":766},[755],{"_109":756,"_111":757},"https://blog.fulldev.pl/wp-json/wp/v2/tags/88",{"_113":758},[115],[760],{"_109":119},[762],{"_109":123},[764],{"_109":765},"https://blog.fulldev.pl/wp-json/wp/v2/posts?tags=88",[767],{"_20":131,"_109":132,"_133":101},{"_8":769,"_18":770,"_20":771,"_12":772,"_23":24,"_25":773,"_27":774,"_104":792},81,"https://blog.fulldev.pl/tag/react/","React","react","\nArchiwa React - Fulldev\n\n\n\n\n\n\n\n\n\n",{"_29":775,"_31":776,"_41":770,"_42":43,"_44":45,"_46":775,"_47":770,"_48":49,"_50":51,"_52":777},"Archiwa React - Fulldev",{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":778},[779,783,787],{"_59":60,"_61":770,"_62":770,"_20":775,"_63":780,"_66":781,"_69":70},{"_61":65},{"_61":782},"https://blog.fulldev.pl/tag/react/#breadcrumb",{"_59":72,"_61":782,"_73":784},[785,786],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":771},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":788,"_69":70},[789],{"_59":91,"_92":790,"_97":791},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_106":793,"_116":798,"_120":800,"_124":802,"_128":805},[794],{"_109":795,"_111":796},"https://blog.fulldev.pl/wp-json/wp/v2/tags/81",{"_113":797},[115],[799],{"_109":119},[801],{"_109":123},[803],{"_109":804},"https://blog.fulldev.pl/wp-json/wp/v2/posts?tags=81",[806],{"_20":131,"_109":132,"_133":101},{"_8":808,"_18":809,"_20":810,"_12":811,"_23":24,"_25":812,"_27":813,"_104":831},89,"https://blog.fulldev.pl/tag/vue/","Vue","vue","\nArchiwa Vue - Fulldev\n\n\n\n\n\n\n\n\n\n",{"_29":814,"_31":815,"_41":809,"_42":43,"_44":45,"_46":814,"_47":809,"_48":49,"_50":51,"_52":816},"Archiwa Vue - Fulldev",{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":817},[818,822,826],{"_59":60,"_61":809,"_62":809,"_20":814,"_63":819,"_66":820,"_69":70},{"_61":65},{"_61":821},"https://blog.fulldev.pl/tag/vue/#breadcrumb",{"_59":72,"_61":821,"_73":823},[824,825],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":810},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":827,"_69":70},[828],{"_59":91,"_92":829,"_97":830},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_106":832,"_116":837,"_120":839,"_124":841,"_128":844},[833],{"_109":834,"_111":835},"https://blog.fulldev.pl/wp-json/wp/v2/tags/89",{"_113":836},[115],[838],{"_109":119},[840],{"_109":123},[842],{"_109":843},"https://blog.fulldev.pl/wp-json/wp/v2/posts?tags=89",[845],{"_20":131,"_109":132,"_133":101},{"_8":252,"_18":253,"_20":254,"_12":255,"_23":24,"_25":256,"_27":847,"_104":863},{"_29":258,"_31":848,"_41":253,"_42":43,"_44":45,"_46":258,"_47":253,"_48":49,"_50":51,"_52":849},{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":850},[851,854,858],{"_59":60,"_61":253,"_62":253,"_20":258,"_63":852,"_66":853,"_69":70},{"_61":65},{"_61":265},{"_59":72,"_61":265,"_73":855},[856,857],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":254},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":859,"_69":70},[860],{"_59":91,"_92":861,"_97":862},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_106":864,"_116":868,"_120":870,"_124":872,"_128":874},[865],{"_109":278,"_111":866},{"_113":867},[115],[869],{"_109":119},[871],{"_109":123},[873],{"_109":287},[875],{"_20":131,"_109":132,"_133":101},"\n

Introduction

\n\n\n\n

The JavaScript landscape offers several modern frameworks and libraries, but three names stand out: React, Vue, and Angular. Each has its strengths, quirks, and ideal use cases. If you’re building a new project or considering switching frameworks, it’s vital to understand the fundamental differences to make an informed decision. Let’s break down the pros, cons, and unique features of each.

\n\n\n\n

React: The UI Library Powerhouse

\n\n\n\n

Overview

\n\n\n\n

Open-sourced by Facebook in 2013, React is technically a library focused on building UI components but is often regarded as a full-fledged framework due to its robust ecosystem.

\n\n\n\n

Pros

\n\n\n\n

Component-Based Architecture: Easily reusable and maintainable code.
Virtual DOM: Efficient updates and high app performance.
Vast Ecosystem: Tons of libraries, tools, and community support.
Flexibility: Integrate with other libraries or frameworks.

\n\n\n\n

Cons

\n\n\n\n

Boilerplate: Often requires more setup for routing or state management.
Learning Curve: JSX syntax can be confusing for beginners.

\n\n\n\n

Sample Code (React Component)

\n\n\n\n

import React from 'react';\n\nfunction HelloWorld() {\n  return (\n    <div>\n      Hello, world!\n    </div>\n  );\n}\n\nexport default HelloWorld;

\n\n\n\n

Vue.js: The Progressive Framework

\n\n\n\n

Overview

\n\n\n\n

Vue is known for its simplicity and gentle learning curve. Created by Evan You, it’s designed to be incrementally adoptable.

\n\n\n\n

Pros

\n\n\n\n

Simple Integration: Add Vue to existing projects without hassle.
Accessible for Beginners: Clear syntax and excellent documentation.
Flexible: Supports both simple scripts and complex SPAs.
Two-Way Data Binding: Reactive and seamless data updates.

\n\n\n\n

Cons

\n\n\n\n

Smaller Community: Few job listings and resources than React or Angular.
Big Project Challenges: Can require more configuration as complexity grows.

\n\n\n\n

Sample Code (Vue Component)

\n\n\n\n

<template>\n  <div>\n    <h1>Hello, world!</h1>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'HelloWorld'\n}\n</script>

\n\n\n\n

Angular: The All-In-One Framework

\n\n\n\n

Overview

\n\n\n\n

Developed and maintained by Google, Angular is a robust, opinionated framework for building large-scale applications. It’s been around since 2010 (originally as AngularJS) but was entirely rewritten as Angular (2+) in 2016.

\n\n\n\n

Pros

\n\n\n\n

Comprehensive Solution: Comes with batteries included (routing, forms, HTTP, etc.).
TypeScript: Gets all the benefits of static typing.
Strong Community Support: Backed by Google with a large developer base.
Enterprise-Ready: Perfect for large, complex projects.

\n\n\n\n

Cons

\n\n\n\n

Steep Learning Curve: Lots of concepts and vocabulary.
Verbosity: More boilerplate code required than React or Vue.
Bundle Size: Can produce larger build outputs.

\n\n\n\n

Sample Code (Angular Component)

\n\n\n\n

import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-hello-world',\n  templateUrl: './hello-world.component.html'\n})\n\nexport class HelloWorldComponent {\n\n}

\n\n\n\n

When Should You Use Each?

\n\n\n\n

React: Choose for projects needing flexibility, a heavy focus on UI components, or if you want access to the largest ecosystem.
Vue: Great for quick prototyping, small to medium apps, or easing new developers into modern JavaScript frameworks.
Angular: Ideal for enterprise-level applications where a robust structure, TypeScript, and scalability are crucial.

\n\n\n\n

Conclusion

\n\n\n\n

There isn’t a one-size-fits-all answer. Your choice depends on project requirements, team expertise, and long-term goals. If possible, experiment with each — all three frameworks offer modern tooling and are excellent choices for web development.

\n\n\n\n

Let us know which framework you prefer and why in the comments below! For more tutorials and web development guides, stay tuned to fulldev.pl.

\n","React vs Vue vs Angular: Which One to Choose?","

Explore a side-by-side comparison of React, Vue, and Angular to help you pick the best JavaScript framework for your web development projects.

\n",["D",1751733558000],[881],{"_8":304,"_18":305,"_20":306,"_12":307,"_23":308,"_25":309,"_27":882,"_330":898,"_104":899},{"_29":311,"_86":312,"_31":883,"_41":305,"_42":43,"_44":45,"_46":311,"_314":312,"_47":305,"_48":49,"_50":51,"_52":884},{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":885},[886,889,893],{"_59":60,"_61":305,"_62":305,"_20":311,"_63":887,"_86":312,"_66":888,"_69":70},{"_61":65},{"_61":320},{"_59":72,"_61":320,"_73":890},[891,892],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":306},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":894,"_69":70},[895],{"_59":91,"_92":896,"_97":897},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},[],{"_106":900,"_116":904,"_120":906,"_124":908,"_128":910},[901],{"_109":335,"_111":902},{"_113":903},[115],[905],{"_109":340},[907],{"_109":343},[909],{"_109":346},[911],{"_20":131,"_109":132,"_133":101},{"_29":913,"_86":914,"_31":915,"_41":916,"_42":43,"_44":45,"_46":913,"_314":914,"_47":916,"_48":49,"_354":917,"_356":918,"_358":359,"_50":51,"_360":919,"_52":920},"React vs Vue vs Angular: Which One to Choose? [2024 Comparison]","Compare React, Vue, and Angular in-depth to help you pick the right JavaScript framework for your next web development project. Pros, cons, use cases & code.",{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},"https://blog.fulldev.pl/2025/06/30/react-vs-vue-vs-angular-which-one-to-choose/","2025-06-30T01:46:09+00:00","2025-07-05T16:39:18+00:00",{"_362":359,"_363":364},{"_54":55,"_56":921},[922,930,934,939],{"_59":368,"_61":916,"_62":916,"_20":913,"_63":923,"_370":917,"_371":918,"_358":924,"_86":914,"_66":925,"_69":70,"_88":927},{"_61":65},{"_61":373},{"_61":926},"https://blog.fulldev.pl/2025/06/30/react-vs-vue-vs-angular-which-one-to-choose/#breadcrumb",[928],{"_59":378,"_92":929},[916],{"_59":72,"_61":926,"_73":931},[932,933],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":877},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":935,"_69":70},[936],{"_59":91,"_92":937,"_97":938},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_59":390,"_61":373,"_20":359,"_391":940,"_398":941,"_62":401},{"_59":393,"_69":70,"_61":394,"_62":395,"_396":395,"_397":359},[400],{"_403":943,"_405":943},"",{"_8":945,"_10":946,"_12":947,"_14":948,"_290":1117,"_29":1118,"_293":294,"_295":296,"_297":1119,"_299":1120,"_301":1121,"_27":1153,"_330":1182},125,["D",1751247969000],"using-tailwind-css-in-a-react-project",[949,988,1018,1048,1087],{"_8":950,"_18":951,"_20":952,"_12":953,"_23":24,"_25":954,"_27":955,"_104":973},20,"https://blog.fulldev.pl/tag/css/","CSS","css","\nArchiwa CSS - Fulldev\n\n\n\n\n\n\n\n\n\n",{"_29":956,"_31":957,"_41":951,"_42":43,"_44":45,"_46":956,"_47":951,"_48":49,"_50":51,"_52":958},"Archiwa CSS - Fulldev",{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":959},[960,964,968],{"_59":60,"_61":951,"_62":951,"_20":956,"_63":961,"_66":962,"_69":70},{"_61":65},{"_61":963},"https://blog.fulldev.pl/tag/css/#breadcrumb",{"_59":72,"_61":963,"_73":965},[966,967],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":952},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":969,"_69":70},[970],{"_59":91,"_92":971,"_97":972},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_106":974,"_116":979,"_120":981,"_124":983,"_128":986},[975],{"_109":976,"_111":977},"https://blog.fulldev.pl/wp-json/wp/v2/tags/20",{"_113":978},[115],[980],{"_109":119},[982],{"_109":123},[984],{"_109":985},"https://blog.fulldev.pl/wp-json/wp/v2/posts?tags=20",[987],{"_20":131,"_109":132,"_133":101},{"_8":213,"_18":214,"_20":215,"_12":216,"_23":24,"_25":217,"_27":989,"_104":1005},{"_29":219,"_31":990,"_41":214,"_42":43,"_44":45,"_46":219,"_47":214,"_48":49,"_50":51,"_52":991},{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":992},[993,996,1000],{"_59":60,"_61":214,"_62":214,"_20":219,"_63":994,"_66":995,"_69":70},{"_61":65},{"_61":226},{"_59":72,"_61":226,"_73":997},[998,999],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":215},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":1001,"_69":70},[1002],{"_59":91,"_92":1003,"_97":1004},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_106":1006,"_116":1010,"_120":1012,"_124":1014,"_128":1016},[1007],{"_109":239,"_111":1008},{"_113":1009},[115],[1011],{"_109":119},[1013],{"_109":123},[1015],{"_109":248},[1017],{"_20":131,"_109":132,"_133":101},{"_8":769,"_18":770,"_20":771,"_12":772,"_23":24,"_25":773,"_27":1019,"_104":1035},{"_29":775,"_31":1020,"_41":770,"_42":43,"_44":45,"_46":775,"_47":770,"_48":49,"_50":51,"_52":1021},{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":1022},[1023,1026,1030],{"_59":60,"_61":770,"_62":770,"_20":775,"_63":1024,"_66":1025,"_69":70},{"_61":65},{"_61":782},{"_59":72,"_61":782,"_73":1027},[1028,1029],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":771},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":1031,"_69":70},[1032],{"_59":91,"_92":1033,"_97":1034},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_106":1036,"_116":1040,"_120":1042,"_124":1044,"_128":1046},[1037],{"_109":795,"_111":1038},{"_113":1039},[115],[1041],{"_109":119},[1043],{"_109":123},[1045],{"_109":804},[1047],{"_20":131,"_109":132,"_133":101},{"_8":1049,"_18":1050,"_20":1051,"_12":1052,"_23":24,"_25":1053,"_27":1054,"_104":1072},91,"https://blog.fulldev.pl/tag/tailwind-css/","Tailwind CSS","tailwind-css","\nArchiwa Tailwind CSS - Fulldev\n\n\n\n\n\n\n\n\n\n",{"_29":1055,"_31":1056,"_41":1050,"_42":43,"_44":45,"_46":1055,"_47":1050,"_48":49,"_50":51,"_52":1057},"Archiwa Tailwind CSS - Fulldev",{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":1058},[1059,1063,1067],{"_59":60,"_61":1050,"_62":1050,"_20":1055,"_63":1060,"_66":1061,"_69":70},{"_61":65},{"_61":1062},"https://blog.fulldev.pl/tag/tailwind-css/#breadcrumb",{"_59":72,"_61":1062,"_73":1064},[1065,1066],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":1051},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":1068,"_69":70},[1069],{"_59":91,"_92":1070,"_97":1071},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_106":1073,"_116":1078,"_120":1080,"_124":1082,"_128":1085},[1074],{"_109":1075,"_111":1076},"https://blog.fulldev.pl/wp-json/wp/v2/tags/91",{"_113":1077},[115],[1079],{"_109":119},[1081],{"_109":123},[1083],{"_109":1084},"https://blog.fulldev.pl/wp-json/wp/v2/posts?tags=91",[1086],{"_20":131,"_109":132,"_133":101},{"_8":252,"_18":253,"_20":254,"_12":255,"_23":24,"_25":256,"_27":1088,"_104":1104},{"_29":258,"_31":1089,"_41":253,"_42":43,"_44":45,"_46":258,"_47":253,"_48":49,"_50":51,"_52":1090},{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":1091},[1092,1095,1099],{"_59":60,"_61":253,"_62":253,"_20":258,"_63":1093,"_66":1094,"_69":70},{"_61":65},{"_61":265},{"_59":72,"_61":265,"_73":1096},[1097,1098],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":254},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":1100,"_69":70},[1101],{"_59":91,"_92":1102,"_97":1103},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_106":1105,"_116":1109,"_120":1111,"_124":1113,"_128":1115},[1106],{"_109":278,"_111":1107},{"_113":1108},[115],[1110],{"_109":119},[1112],{"_109":123},[1114],{"_109":287},[1116],{"_20":131,"_109":132,"_133":101},"\n

Introduction

\n\n\n\n

Styling modern React applications can be a challenge, but Tailwind CSS offers a utility-first framework that makes it fast, flexible, and responsive. In this article, you’ll learn step-by-step how to set up Tailwind CSS in a React project, why it’s gaining popularity among developers, and how to get the most out of its features.

\n\n\n\n

Why Use Tailwind CSS with React?

\n\n\n\n

Utility-First Approach: Style components directly in your JSX for faster prototyping.
Highly Customizable: Easily configure design systems without writing custom CSS.
Responsive & Mobile-First: Use built-in responsive utilities for all screen sizes.
Smaller CSS Bundles: Purge unused styles for optimal performance.

\n\n\n\n

Step 1: Setting Up a React Project

\n\n\n\n

If you haven’t already, create a new React project using Create React App:

\n\n\n\n

npx create-react-app my-app\ncd my-app

\n\n\n\n

Step 2: Installing Tailwind CSS

\n\n\n\n

Install Tailwind CSS and its dependencies via npm:

\n\n\n\n

npm install -D tailwindcss postcss autoprefixer\nnpx tailwindcss init -p

\n\n\n\n

This will create tailwind.config.js and postcss.config.js.

\n\n\n\n

Step 3: Configuring Tailwind CSS

\n\n\n\n

Open tailwind.config.js and set the content property to include your React files:

\n\n\n\n

module.exports = {\n  content: [\n    \"./src/**/*.{js,jsx,ts,tsx}\",\n  ],\n  theme: {\n    extend: {},\n  },\n  plugins: [],\n}

\n\n\n\n

Step 4: Add Tailwind to Your CSS

\n\n\n\n

Replace the contents of src/index.css with:

\n\n\n\n

@tailwind base;\n@tailwind components;\n@tailwind utilities;

\n\n\n\n

Tip: Import index.css in src/index.js if not already done.

\n\n\n\n

Step 5: Using Tailwind in React Components

\n\n\n\n

You can now use Tailwind classes directly in your JSX. Here’s an example:

\n\n\n\n

function App() {\n  return (\n    <div className=\"bg-gray-100 py-4 px-6 rounded-lg shadow-md\">\n      <h1 className=\"text-2xl font-bold text-gray-800 mb-4\">Hello Tailwind CSS!</h1>\n      <p className=\"text-gray-700 leading-relaxed\">Welcome to the world of utility-first CSS!</p>\n    </div>\n  );\n}\n\nexport default App;\n

\n\n\n\n

Best Practices

\n\n\n\n

Use classnames package to conditionally apply Tailwind classes.
Leverage Tailwind plugins for custom utilities and components.
Configure purge for production to minimize CSS size.

\n\n\n\n

Conclusion

\n\n\n\n

Tailwind CSS is a game-changer for React developers who want speed, flexibility, and maintainability in styling. Setting it up is easy, and once you start using its utilities, you’ll never look back. For more tips on web development, stay tuned to fulldev.pl!

\n","Using Tailwind CSS in a React Project","

Learn how to efficiently set up and use Tailwind CSS in your React applications for rapid, utility-first styling with best practices and practical examples.

\n",["D",1751733252000],[1122],{"_8":304,"_18":305,"_20":306,"_12":307,"_23":308,"_25":309,"_27":1123,"_330":1139,"_104":1140},{"_29":311,"_86":312,"_31":1124,"_41":305,"_42":43,"_44":45,"_46":311,"_314":312,"_47":305,"_48":49,"_50":51,"_52":1125},{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":1126},[1127,1130,1134],{"_59":60,"_61":305,"_62":305,"_20":311,"_63":1128,"_86":312,"_66":1129,"_69":70},{"_61":65},{"_61":320},{"_59":72,"_61":320,"_73":1131},[1132,1133],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":306},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":1135,"_69":70},[1136],{"_59":91,"_92":1137,"_97":1138},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},[],{"_106":1141,"_116":1145,"_120":1147,"_124":1149,"_128":1151},[1142],{"_109":335,"_111":1143},{"_113":1144},[115],[1146],{"_109":340},[1148],{"_109":343},[1150],{"_109":346},[1152],{"_20":131,"_109":132,"_133":101},{"_29":1154,"_86":1155,"_31":1156,"_41":1157,"_42":43,"_44":45,"_46":1154,"_314":1155,"_47":1157,"_48":49,"_354":917,"_356":1158,"_358":359,"_50":51,"_360":1159,"_52":1160},"Using Tailwind CSS in a React Project: Step-by-Step Guide","Learn how to integrate Tailwind CSS in your React project. Step-by-step guide for setup, configuration, and practical usage tips.",{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},"https://blog.fulldev.pl/2025/06/30/using-tailwind-css-in-a-react-project/","2025-07-05T16:34:12+00:00",{"_362":359,"_363":364},{"_54":55,"_56":1161},[1162,1170,1174,1179],{"_59":368,"_61":1157,"_62":1157,"_20":1154,"_63":1163,"_370":917,"_371":1158,"_358":1164,"_86":1155,"_66":1165,"_69":70,"_88":1167},{"_61":65},{"_61":373},{"_61":1166},"https://blog.fulldev.pl/2025/06/30/using-tailwind-css-in-a-react-project/#breadcrumb",[1168],{"_59":378,"_92":1169},[1157],{"_59":72,"_61":1166,"_73":1171},[1172,1173],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":1118},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":1175,"_69":70},[1176],{"_59":91,"_92":1177,"_97":1178},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_59":390,"_61":373,"_20":359,"_391":1180,"_398":1181,"_62":401},{"_59":393,"_69":70,"_61":394,"_62":395,"_396":395,"_397":359},[400],{"_403":943,"_405":943},{"_8":1184,"_10":1185,"_12":1186,"_14":1187,"_290":1356,"_29":1357,"_293":294,"_295":296,"_297":1358,"_299":1359,"_301":1360,"_27":1392,"_330":1419},126,["D",1751247969000],"svelte-for-beginners-why-its-worth-learning",[1188,1227,1257,1287,1326],{"_8":1189,"_18":1190,"_20":1191,"_12":1192,"_23":24,"_25":1193,"_27":1194,"_104":1212},92,"https://blog.fulldev.pl/tag/beginners/","Beginners","beginners","\nArchiwa Beginners - Fulldev\n\n\n\n\n\n\n\n\n\n",{"_29":1195,"_31":1196,"_41":1190,"_42":43,"_44":45,"_46":1195,"_47":1190,"_48":49,"_50":51,"_52":1197},"Archiwa Beginners - Fulldev",{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":1198},[1199,1203,1207],{"_59":60,"_61":1190,"_62":1190,"_20":1195,"_63":1200,"_66":1201,"_69":70},{"_61":65},{"_61":1202},"https://blog.fulldev.pl/tag/beginners/#breadcrumb",{"_59":72,"_61":1202,"_73":1204},[1205,1206],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":1191},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":1208,"_69":70},[1209],{"_59":91,"_92":1210,"_97":1211},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_106":1213,"_116":1218,"_120":1220,"_124":1222,"_128":1225},[1214],{"_109":1215,"_111":1216},"https://blog.fulldev.pl/wp-json/wp/v2/tags/92",{"_113":1217},[115],[1219],{"_109":119},[1221],{"_109":123},[1223],{"_109":1224},"https://blog.fulldev.pl/wp-json/wp/v2/posts?tags=92",[1226],{"_20":131,"_109":132,"_133":101},{"_8":213,"_18":214,"_20":215,"_12":216,"_23":24,"_25":217,"_27":1228,"_104":1244},{"_29":219,"_31":1229,"_41":214,"_42":43,"_44":45,"_46":219,"_47":214,"_48":49,"_50":51,"_52":1230},{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":1231},[1232,1235,1239],{"_59":60,"_61":214,"_62":214,"_20":219,"_63":1233,"_66":1234,"_69":70},{"_61":65},{"_61":226},{"_59":72,"_61":226,"_73":1236},[1237,1238],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":215},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":1240,"_69":70},[1241],{"_59":91,"_92":1242,"_97":1243},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_106":1245,"_116":1249,"_120":1251,"_124":1253,"_128":1255},[1246],{"_109":239,"_111":1247},{"_113":1248},[115],[1250],{"_109":119},[1252],{"_109":123},[1254],{"_109":248},[1256],{"_20":131,"_109":132,"_133":101},{"_8":730,"_18":731,"_20":732,"_12":733,"_23":24,"_25":734,"_27":1258,"_104":1274},{"_29":736,"_31":1259,"_41":731,"_42":43,"_44":45,"_46":736,"_47":731,"_48":49,"_50":51,"_52":1260},{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":1261},[1262,1265,1269],{"_59":60,"_61":731,"_62":731,"_20":736,"_63":1263,"_66":1264,"_69":70},{"_61":65},{"_61":743},{"_59":72,"_61":743,"_73":1266},[1267,1268],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":732},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":1270,"_69":70},[1271],{"_59":91,"_92":1272,"_97":1273},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_106":1275,"_116":1279,"_120":1281,"_124":1283,"_128":1285},[1276],{"_109":756,"_111":1277},{"_113":1278},[115],[1280],{"_109":119},[1282],{"_109":123},[1284],{"_109":765},[1286],{"_20":131,"_109":132,"_133":101},{"_8":1288,"_18":1289,"_20":1290,"_12":1291,"_23":24,"_25":1292,"_27":1293,"_104":1311},93,"https://blog.fulldev.pl/tag/svelte/","Svelte","svelte","\nArchiwa Svelte - Fulldev\n\n\n\n\n\n\n\n\n\n",{"_29":1294,"_31":1295,"_41":1289,"_42":43,"_44":45,"_46":1294,"_47":1289,"_48":49,"_50":51,"_52":1296},"Archiwa Svelte - Fulldev",{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":1297},[1298,1302,1306],{"_59":60,"_61":1289,"_62":1289,"_20":1294,"_63":1299,"_66":1300,"_69":70},{"_61":65},{"_61":1301},"https://blog.fulldev.pl/tag/svelte/#breadcrumb",{"_59":72,"_61":1301,"_73":1303},[1304,1305],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":1290},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":1307,"_69":70},[1308],{"_59":91,"_92":1309,"_97":1310},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_106":1312,"_116":1317,"_120":1319,"_124":1321,"_128":1324},[1313],{"_109":1314,"_111":1315},"https://blog.fulldev.pl/wp-json/wp/v2/tags/93",{"_113":1316},[115],[1318],{"_109":119},[1320],{"_109":123},[1322],{"_109":1323},"https://blog.fulldev.pl/wp-json/wp/v2/posts?tags=93",[1325],{"_20":131,"_109":132,"_133":101},{"_8":252,"_18":253,"_20":254,"_12":255,"_23":24,"_25":256,"_27":1327,"_104":1343},{"_29":258,"_31":1328,"_41":253,"_42":43,"_44":45,"_46":258,"_47":253,"_48":49,"_50":51,"_52":1329},{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":1330},[1331,1334,1338],{"_59":60,"_61":253,"_62":253,"_20":258,"_63":1332,"_66":1333,"_69":70},{"_61":65},{"_61":265},{"_59":72,"_61":265,"_73":1335},[1336,1337],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":254},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":1339,"_69":70},[1340],{"_59":91,"_92":1341,"_97":1342},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_106":1344,"_116":1348,"_120":1350,"_124":1352,"_128":1354},[1345],{"_109":278,"_111":1346},{"_113":1347},[115],[1349],{"_109":119},[1351],{"_109":123},[1353],{"_109":287},[1355],{"_20":131,"_109":132,"_133":101},"

Introduction

Svelte is the rising star among modern JavaScript frameworks. Unlike React or Vue, Svelte takes a different approach that often surprises and delights beginners. If you’re just getting started in web development, Svelte is definitely worth your attention. In this article, we’ll cover what makes Svelte unique, why it’s beginner-friendly, and how you can get up and running quickly.

What is Svelte?

Svelte is a component-based framework for building fast and interactive web apps. The most striking feature: Svelte shifts much of the work to compile time, turning your code into efficient JavaScript before it even hits the browser. This results in smaller bundles and blazing fast performance.

Why Beginners Love Svelte

Simpler Syntax: Write less code compared to React or Angular. No need for boilerplate.
Zero Virtual DOM: No diffing algorithms to learn. Updates are direct and instantaneous.
Built-in State Management: Svelte’s reactivity is simple and intuitive.
No Complex Configuration: Scaffolding a Svelte project is quick with official tools.
Small Bundle Sizes: Faster loads, even on slow networks.

Basic Example: Your First Svelte Component

<script>\n  let count = 0;\n</script>\n\n<button on:click={() => count += 1}>\n  Clicked {count} {count === 1 ? 'time' : 'times'}\n</button>\n

This shows Svelte’s simplicity: no className, no useState, no lifecycle methods. It just works intuitively!

How to Start with Svelte

Set Up Your First Project

Install Node.js if you haven’t already.
Use npm create vite@latest my-svelte-app -- --template svelte for a quick setup.
Run npm install && npm run dev to start your development server.

Your app is now live locally, and you’re ready to start experimenting with Svelte components!

When Should You Choose Svelte?

Prototyping: Get ideas running fast with minimal overhead.
Small-to-medium projects: Enjoy simplicity without sacrificing performance.
If you want to deeply understand reactivity and component-based development.
When bundle size and loading speed are priorities for your target audience.

Conclusion

Svelte brings refreshing simplicity and modern JavaScript magic to beginner developers. Its learning curve is gentle, and the benefits—like fast loading and clean code—are immediate. Curious? Jump in and try it for your next project! For more beginner-friendly web development guides, check out fulldev.pl.

\n","Svelte for Beginners: Why It’s Worth Learning","

Discover why Svelte is an exciting choice for web development beginners. Learn about its advantages, how it works, and why you should give it a try.

\n",["D",1751500284000],[1361],{"_8":304,"_18":305,"_20":306,"_12":307,"_23":308,"_25":309,"_27":1362,"_330":1378,"_104":1379},{"_29":311,"_86":312,"_31":1363,"_41":305,"_42":43,"_44":45,"_46":311,"_314":312,"_47":305,"_48":49,"_50":51,"_52":1364},{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":1365},[1366,1369,1373],{"_59":60,"_61":305,"_62":305,"_20":311,"_63":1367,"_86":312,"_66":1368,"_69":70},{"_61":65},{"_61":320},{"_59":72,"_61":320,"_73":1370},[1371,1372],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":306},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":1374,"_69":70},[1375],{"_59":91,"_92":1376,"_97":1377},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},[],{"_106":1380,"_116":1384,"_120":1386,"_124":1388,"_128":1390},[1381],{"_109":335,"_111":1382},{"_113":1383},[115],[1385],{"_109":340},[1387],{"_109":343},[1389],{"_109":346},[1391],{"_20":131,"_109":132,"_133":101},{"_29":1357,"_86":1393,"_31":1394,"_41":1395,"_42":43,"_44":45,"_46":1357,"_314":1393,"_47":1395,"_48":49,"_354":917,"_356":668,"_358":359,"_50":51,"_360":1396,"_52":1397},"See why Svelte is a top choice for beginner web developers. Simple syntax, fast apps, and modern features make Svelte worth learning.",{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},"https://blog.fulldev.pl/2025/06/30/svelte-for-beginners-why-its-worth-learning/",{"_362":359,"_363":364},{"_54":55,"_56":1398},[1399,1407,1411,1416],{"_59":368,"_61":1395,"_62":1395,"_20":1357,"_63":1400,"_370":917,"_371":668,"_358":1401,"_86":1393,"_66":1402,"_69":70,"_88":1404},{"_61":65},{"_61":373},{"_61":1403},"https://blog.fulldev.pl/2025/06/30/svelte-for-beginners-why-its-worth-learning/#breadcrumb",[1405],{"_59":378,"_92":1406},[1395],{"_59":72,"_61":1403,"_73":1408},[1409,1410],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":1357},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":1412,"_69":70},[1413],{"_59":91,"_92":1414,"_97":1415},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_59":390,"_61":373,"_20":359,"_391":1417,"_398":1418,"_62":401},{"_59":393,"_69":70,"_61":394,"_62":395,"_396":395,"_397":359},[400],{"_403":1420,"_405":693},117,{"_8":1422,"_10":1423,"_12":1424,"_14":1425,"_290":1681,"_29":1682,"_293":294,"_295":296,"_297":1683,"_299":1684,"_301":1685,"_27":1717,"_330":1746},127,["D",1751247969000],"understanding-state-management-in-react",[1426,1465,1495,1534,1573,1612,1651],{"_8":1427,"_18":1428,"_20":1429,"_12":1430,"_23":24,"_25":1431,"_27":1432,"_104":1450},95,"https://blog.fulldev.pl/tag/context-api/","Context API","context-api","\nArchiwa Context API - Fulldev\n\n\n\n\n\n\n\n\n\n",{"_29":1433,"_31":1434,"_41":1428,"_42":43,"_44":45,"_46":1433,"_47":1428,"_48":49,"_50":51,"_52":1435},"Archiwa Context API - Fulldev",{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":1436},[1437,1441,1445],{"_59":60,"_61":1428,"_62":1428,"_20":1433,"_63":1438,"_66":1439,"_69":70},{"_61":65},{"_61":1440},"https://blog.fulldev.pl/tag/context-api/#breadcrumb",{"_59":72,"_61":1440,"_73":1442},[1443,1444],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":1429},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":1446,"_69":70},[1447],{"_59":91,"_92":1448,"_97":1449},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_106":1451,"_116":1456,"_120":1458,"_124":1460,"_128":1463},[1452],{"_109":1453,"_111":1454},"https://blog.fulldev.pl/wp-json/wp/v2/tags/95",{"_113":1455},[115],[1457],{"_109":119},[1459],{"_109":123},[1461],{"_109":1462},"https://blog.fulldev.pl/wp-json/wp/v2/posts?tags=95",[1464],{"_20":131,"_109":132,"_133":101},{"_8":769,"_18":770,"_20":771,"_12":772,"_23":24,"_25":773,"_27":1466,"_104":1482},{"_29":775,"_31":1467,"_41":770,"_42":43,"_44":45,"_46":775,"_47":770,"_48":49,"_50":51,"_52":1468},{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":1469},[1470,1473,1477],{"_59":60,"_61":770,"_62":770,"_20":775,"_63":1471,"_66":1472,"_69":70},{"_61":65},{"_61":782},{"_59":72,"_61":782,"_73":1474},[1475,1476],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":771},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":1478,"_69":70},[1479],{"_59":91,"_92":1480,"_97":1481},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_106":1483,"_116":1487,"_120":1489,"_124":1491,"_128":1493},[1484],{"_109":795,"_111":1485},{"_113":1486},[115],[1488],{"_109":119},[1490],{"_109":123},[1492],{"_109":804},[1494],{"_20":131,"_109":132,"_133":101},{"_8":1496,"_18":1497,"_20":1498,"_12":1499,"_23":24,"_25":1500,"_27":1501,"_104":1519},98,"https://blog.fulldev.pl/tag/redux/","Redux","redux","\nArchiwa Redux - Fulldev\n\n\n\n\n\n\n\n\n\n",{"_29":1502,"_31":1503,"_41":1497,"_42":43,"_44":45,"_46":1502,"_47":1497,"_48":49,"_50":51,"_52":1504},"Archiwa Redux - Fulldev",{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":1505},[1506,1510,1514],{"_59":60,"_61":1497,"_62":1497,"_20":1502,"_63":1507,"_66":1508,"_69":70},{"_61":65},{"_61":1509},"https://blog.fulldev.pl/tag/redux/#breadcrumb",{"_59":72,"_61":1509,"_73":1511},[1512,1513],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":1498},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":1515,"_69":70},[1516],{"_59":91,"_92":1517,"_97":1518},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_106":1520,"_116":1525,"_120":1527,"_124":1529,"_128":1532},[1521],{"_109":1522,"_111":1523},"https://blog.fulldev.pl/wp-json/wp/v2/tags/98",{"_113":1524},[115],[1526],{"_109":119},[1528],{"_109":123},[1530],{"_109":1531},"https://blog.fulldev.pl/wp-json/wp/v2/posts?tags=98",[1533],{"_20":131,"_109":132,"_133":101},{"_8":1535,"_18":1536,"_20":1537,"_12":1538,"_23":24,"_25":1539,"_27":1540,"_104":1558},94,"https://blog.fulldev.pl/tag/state-management/","State Management","state-management","\nArchiwa State Management - Fulldev\n\n\n\n\n\n\n\n\n\n",{"_29":1541,"_31":1542,"_41":1536,"_42":43,"_44":45,"_46":1541,"_47":1536,"_48":49,"_50":51,"_52":1543},"Archiwa State Management - Fulldev",{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":1544},[1545,1549,1553],{"_59":60,"_61":1536,"_62":1536,"_20":1541,"_63":1546,"_66":1547,"_69":70},{"_61":65},{"_61":1548},"https://blog.fulldev.pl/tag/state-management/#breadcrumb",{"_59":72,"_61":1548,"_73":1550},[1551,1552],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":1537},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":1554,"_69":70},[1555],{"_59":91,"_92":1556,"_97":1557},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_106":1559,"_116":1564,"_120":1566,"_124":1568,"_128":1571},[1560],{"_109":1561,"_111":1562},"https://blog.fulldev.pl/wp-json/wp/v2/tags/94",{"_113":1563},[115],[1565],{"_109":119},[1567],{"_109":123},[1569],{"_109":1570},"https://blog.fulldev.pl/wp-json/wp/v2/posts?tags=94",[1572],{"_20":131,"_109":132,"_133":101},{"_8":1574,"_18":1575,"_20":1576,"_12":1577,"_23":24,"_25":1578,"_27":1579,"_104":1597},97,"https://blog.fulldev.pl/tag/usereducer/","useReducer","usereducer","\nArchiwa useReducer - Fulldev\n\n\n\n\n\n\n\n\n\n",{"_29":1580,"_31":1581,"_41":1575,"_42":43,"_44":45,"_46":1580,"_47":1575,"_48":49,"_50":51,"_52":1582},"Archiwa useReducer - Fulldev",{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":1583},[1584,1588,1592],{"_59":60,"_61":1575,"_62":1575,"_20":1580,"_63":1585,"_66":1586,"_69":70},{"_61":65},{"_61":1587},"https://blog.fulldev.pl/tag/usereducer/#breadcrumb",{"_59":72,"_61":1587,"_73":1589},[1590,1591],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":1576},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":1593,"_69":70},[1594],{"_59":91,"_92":1595,"_97":1596},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_106":1598,"_116":1603,"_120":1605,"_124":1607,"_128":1610},[1599],{"_109":1600,"_111":1601},"https://blog.fulldev.pl/wp-json/wp/v2/tags/97",{"_113":1602},[115],[1604],{"_109":119},[1606],{"_109":123},[1608],{"_109":1609},"https://blog.fulldev.pl/wp-json/wp/v2/posts?tags=97",[1611],{"_20":131,"_109":132,"_133":101},{"_8":1613,"_18":1614,"_20":1615,"_12":1616,"_23":24,"_25":1617,"_27":1618,"_104":1636},96,"https://blog.fulldev.pl/tag/usestate/","useState","usestate","\nArchiwa useState - Fulldev\n\n\n\n\n\n\n\n\n\n",{"_29":1619,"_31":1620,"_41":1614,"_42":43,"_44":45,"_46":1619,"_47":1614,"_48":49,"_50":51,"_52":1621},"Archiwa useState - Fulldev",{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":1622},[1623,1627,1631],{"_59":60,"_61":1614,"_62":1614,"_20":1619,"_63":1624,"_66":1625,"_69":70},{"_61":65},{"_61":1626},"https://blog.fulldev.pl/tag/usestate/#breadcrumb",{"_59":72,"_61":1626,"_73":1628},[1629,1630],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":1615},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":1632,"_69":70},[1633],{"_59":91,"_92":1634,"_97":1635},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_106":1637,"_116":1642,"_120":1644,"_124":1646,"_128":1649},[1638],{"_109":1639,"_111":1640},"https://blog.fulldev.pl/wp-json/wp/v2/tags/96",{"_113":1641},[115],[1643],{"_109":119},[1645],{"_109":123},[1647],{"_109":1648},"https://blog.fulldev.pl/wp-json/wp/v2/posts?tags=96",[1650],{"_20":131,"_109":132,"_133":101},{"_8":252,"_18":253,"_20":254,"_12":255,"_23":24,"_25":256,"_27":1652,"_104":1668},{"_29":258,"_31":1653,"_41":253,"_42":43,"_44":45,"_46":258,"_47":253,"_48":49,"_50":51,"_52":1654},{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":1655},[1656,1659,1663],{"_59":60,"_61":253,"_62":253,"_20":258,"_63":1657,"_66":1658,"_69":70},{"_61":65},{"_61":265},{"_59":72,"_61":265,"_73":1660},[1661,1662],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":254},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":1664,"_69":70},[1665],{"_59":91,"_92":1666,"_97":1667},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_106":1669,"_116":1673,"_120":1675,"_124":1677,"_128":1679},[1670],{"_109":278,"_111":1671},{"_113":1672},[115],[1674],{"_109":119},[1676],{"_109":123},[1678],{"_109":287},[1680],{"_20":131,"_109":132,"_133":101},"\n

Introduction

\n\n\n\n

State management is at the heart of every React application. Whether you’re building a simple todo list or a complex enterprise UI, understanding how state works in React is essential for writing bug-free, maintainable code. In this article, you’ll learn the fundamentals of managing state in React, compare built-in tools like useState and useReducer, and explore when to consider external libraries.

\n\n\n\n

What is State in React?

\n\n\n\n

State represents any data that can change over time in your app’s UI. This includes things like user input, fetched data, toggled elements, and more. State helps React components respond and re-render appropriately to user actions.

\n\n\n\n

Local vs. Global State

\n\n\n\n

Local State: Managed within a single component, often using useState.
Global State: Shared across many components, commonly managed using context or external libraries.

\n\n\n\n

Using `useState` for Local State

\n\n\n\n

The useState hook is React’s simplest way to create and update state in functional components.

\n\n\n\n

import React, { useState } from 'react';\n\nfunction Counter() {\n  const [count, setCount] = useState(0); // Initialize count to 0\n\n  return (\n    <div>\n      Count: {count}\n      <button onClick={() => setCount(count + 1)}>Increase</button>\n    </div>\n  );\n}\n\nexport default Counter;

\n\n\n\n

When to Use `useReducer`

\n\n\n\n

useReducer is better for complex state logic or multiple related values, helping you manage state transitions more predictably.

\n\n\n\n

import React, { useReducer } from 'react';\n\nfunction reducer(state, action) {\n  switch (action.type) {\n    case 'increment': return { count: state.count + 1 };\n    case 'decrement': return { count: state.count - 1 };\n    default: throw new Error(); // Handle unexpected actions\n  }\n}\n\nfunction Counter() {\n  const [state, dispatch] = useReducer(reducer, { count: 0 }); // Initial state\n\n  return (\n    <div>\n      Count: {state.count}\n      <button onClick={() => dispatch({ type: 'increment' })}>+</button>\n      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>\n    </div>\n  );\n}

\n\n\n\n

Lifting State Up

\n\n\n\n

When two or more components need to share state, lift the state up to their nearest common ancestor and pass it down via props:

\n\n\n\n

function Parent() {\n  const [shared, setShared] = useState('data');\n\n  return (\n    <>\n      <Child shared={shared} setShared={setShared} />\n      {/* Other components that need access to shared state */}\n    </>\n  );\n}\n\nfunction Child({ shared, setShared }) {\n  return (\n    <div>\n      <p>Shared Data: {shared}</p>\n      <button onClick={() => setShared('updated')}>Update Shared Data</button>\n    </div>\n  );\n}

\n\n\n\n

Context API for Global State

\n\n\n\n

The built-in Context API lets you create global state accessible throughout your component tree—no prop drilling required.

\n\n\n\n

import React, { useContext, useState } from 'react';\n\nconst MyContext = React.createContext(); // Create a context\n\nfunction Provider({ children }) {\n  const [value, setValue] = useState('shared'); // Initial state\n\n  return (\n    <MyContext.Provider value={{ value, setValue }}> {/* Provide the context */}\n      {children}\n    </MyContext.Provider>\n  );\n}\n\nfunction Consumer() {\n  const { value, setValue } = useContext(MyContext); // Consume the context\n\n  return (\n    <div>\n      <p>Value: {value}</p>\n      <button onClick={() => setValue('updated')}>Update Value</button>\n    </div>\n  );\n}

\n\n\n\n

When to Use External State Libraries

\n\n\n\n

For very large apps with deeply nested components, libraries like Redux, Zustand, or Recoil provide features like middleware, selectors, and time-travel debugging. Use them if:

\n\n\n\n

Your state logic is too complex for useReducer or Context.
You want to persist state or interact with APIs globally.
Many components need access or updates to the same data.

\n\n\n\n

Best Practices for State Management in React

\n\n\n\n

Start with useState and keep state as local as possible.
Lift state up only when needed.
Use Context API for simple global state.
Reach for external libraries when your state becomes hard to manage.

\n\n\n\n

Conclusion

\n\n\n\n

Understanding and choosing the right state management approach keeps your React application scalable and clear. Master the fundamentals first, and scale up your tools only as your project demands. For more insights on React and web development, stay tuned on fulldev.pl!

\n","Understanding State Management in React","

Explore the essentials of state management in React, from useState and useReducer to modern state libraries, with clear examples and best practices.

\n",["D",1751733034000],[1686],{"_8":304,"_18":305,"_20":306,"_12":307,"_23":308,"_25":309,"_27":1687,"_330":1703,"_104":1704},{"_29":311,"_86":312,"_31":1688,"_41":305,"_42":43,"_44":45,"_46":311,"_314":312,"_47":305,"_48":49,"_50":51,"_52":1689},{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":1690},[1691,1694,1698],{"_59":60,"_61":305,"_62":305,"_20":311,"_63":1692,"_86":312,"_66":1693,"_69":70},{"_61":65},{"_61":320},{"_59":72,"_61":320,"_73":1695},[1696,1697],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":306},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":1699,"_69":70},[1700],{"_59":91,"_92":1701,"_97":1702},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},[],{"_106":1705,"_116":1709,"_120":1711,"_124":1713,"_128":1715},[1706],{"_109":335,"_111":1707},{"_113":1708},[115],[1710],{"_109":340},[1712],{"_109":343},[1714],{"_109":346},[1716],{"_20":131,"_109":132,"_133":101},{"_29":1718,"_86":1719,"_31":1720,"_41":1721,"_42":43,"_44":45,"_46":1718,"_314":1719,"_47":1721,"_48":49,"_354":917,"_356":1722,"_358":359,"_50":51,"_360":1723,"_52":1724},"Understanding State Management in React: useState, Context & Beyond","Learn the essentials of state management in React: useState, useReducer, Context API, and when to use external libraries for scaling apps.",{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},"https://blog.fulldev.pl/2025/06/30/understanding-state-management-in-react/","2025-07-05T16:30:34+00:00",{"_362":359,"_363":364},{"_54":55,"_56":1725},[1726,1734,1738,1743],{"_59":368,"_61":1721,"_62":1721,"_20":1718,"_63":1727,"_370":917,"_371":1722,"_358":1728,"_86":1719,"_66":1729,"_69":70,"_88":1731},{"_61":65},{"_61":373},{"_61":1730},"https://blog.fulldev.pl/2025/06/30/understanding-state-management-in-react/#breadcrumb",[1732],{"_59":378,"_92":1733},[1721],{"_59":72,"_61":1730,"_73":1735},[1736,1737],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":1682},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":1739,"_69":70},[1740],{"_59":91,"_92":1741,"_97":1742},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_59":390,"_61":373,"_20":359,"_391":1744,"_398":1745,"_62":401},{"_59":393,"_69":70,"_61":394,"_62":395,"_396":395,"_397":359},[400],{"_403":943,"_405":943},{"_8":693,"_10":1748,"_12":1749,"_14":1750,"_290":1910,"_29":1911,"_293":294,"_295":296,"_297":1912,"_299":1913,"_301":1914,"_27":1946,"_330":1974},["D",1751247969000],"bootstrap-5-tutorial-for-beginners",[1751,1781,1820,1850,1880],{"_8":1189,"_18":1190,"_20":1191,"_12":1192,"_23":24,"_25":1193,"_27":1752,"_104":1768},{"_29":1195,"_31":1753,"_41":1190,"_42":43,"_44":45,"_46":1195,"_47":1190,"_48":49,"_50":51,"_52":1754},{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":1755},[1756,1759,1763],{"_59":60,"_61":1190,"_62":1190,"_20":1195,"_63":1757,"_66":1758,"_69":70},{"_61":65},{"_61":1202},{"_59":72,"_61":1202,"_73":1760},[1761,1762],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":1191},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":1764,"_69":70},[1765],{"_59":91,"_92":1766,"_97":1767},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_106":1769,"_116":1773,"_120":1775,"_124":1777,"_128":1779},[1770],{"_109":1215,"_111":1771},{"_113":1772},[115],[1774],{"_109":119},[1776],{"_109":123},[1778],{"_109":1224},[1780],{"_20":131,"_109":132,"_133":101},{"_8":1782,"_18":1783,"_20":1784,"_12":1785,"_23":24,"_25":1786,"_27":1787,"_104":1805},99,"https://blog.fulldev.pl/tag/bootstrap-5/","Bootstrap 5","bootstrap-5","\nArchiwa Bootstrap 5 - Fulldev\n\n\n\n\n\n\n\n\n\n",{"_29":1788,"_31":1789,"_41":1783,"_42":43,"_44":45,"_46":1788,"_47":1783,"_48":49,"_50":51,"_52":1790},"Archiwa Bootstrap 5 - Fulldev",{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":1791},[1792,1796,1800],{"_59":60,"_61":1783,"_62":1783,"_20":1788,"_63":1793,"_66":1794,"_69":70},{"_61":65},{"_61":1795},"https://blog.fulldev.pl/tag/bootstrap-5/#breadcrumb",{"_59":72,"_61":1795,"_73":1797},[1798,1799],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":1784},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":1801,"_69":70},[1802],{"_59":91,"_92":1803,"_97":1804},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_106":1806,"_116":1811,"_120":1813,"_124":1815,"_128":1818},[1807],{"_109":1808,"_111":1809},"https://blog.fulldev.pl/wp-json/wp/v2/tags/99",{"_113":1810},[115],[1812],{"_109":119},[1814],{"_109":123},[1816],{"_109":1817},"https://blog.fulldev.pl/wp-json/wp/v2/posts?tags=99",[1819],{"_20":131,"_109":132,"_133":101},{"_8":950,"_18":951,"_20":952,"_12":953,"_23":24,"_25":954,"_27":1821,"_104":1837},{"_29":956,"_31":1822,"_41":951,"_42":43,"_44":45,"_46":956,"_47":951,"_48":49,"_50":51,"_52":1823},{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":1824},[1825,1828,1832],{"_59":60,"_61":951,"_62":951,"_20":956,"_63":1826,"_66":1827,"_69":70},{"_61":65},{"_61":963},{"_59":72,"_61":963,"_73":1829},[1830,1831],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":952},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":1833,"_69":70},[1834],{"_59":91,"_92":1835,"_97":1836},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_106":1838,"_116":1842,"_120":1844,"_124":1846,"_128":1848},[1839],{"_109":976,"_111":1840},{"_113":1841},[115],[1843],{"_109":119},[1845],{"_109":123},[1847],{"_109":985},[1849],{"_20":131,"_109":132,"_133":101},{"_8":213,"_18":214,"_20":215,"_12":216,"_23":24,"_25":217,"_27":1851,"_104":1867},{"_29":219,"_31":1852,"_41":214,"_42":43,"_44":45,"_46":219,"_47":214,"_48":49,"_50":51,"_52":1853},{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":1854},[1855,1858,1862],{"_59":60,"_61":214,"_62":214,"_20":219,"_63":1856,"_66":1857,"_69":70},{"_61":65},{"_61":226},{"_59":72,"_61":226,"_73":1859},[1860,1861],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":215},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":1863,"_69":70},[1864],{"_59":91,"_92":1865,"_97":1866},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_106":1868,"_116":1872,"_120":1874,"_124":1876,"_128":1878},[1869],{"_109":239,"_111":1870},{"_113":1871},[115],[1873],{"_109":119},[1875],{"_109":123},[1877],{"_109":248},[1879],{"_20":131,"_109":132,"_133":101},{"_8":252,"_18":253,"_20":254,"_12":255,"_23":24,"_25":256,"_27":1881,"_104":1897},{"_29":258,"_31":1882,"_41":253,"_42":43,"_44":45,"_46":258,"_47":253,"_48":49,"_50":51,"_52":1883},{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":1884},[1885,1888,1892],{"_59":60,"_61":253,"_62":253,"_20":258,"_63":1886,"_66":1887,"_69":70},{"_61":65},{"_61":265},{"_59":72,"_61":265,"_73":1889},[1890,1891],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":254},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":1893,"_69":70},[1894],{"_59":91,"_92":1895,"_97":1896},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_106":1898,"_116":1902,"_120":1904,"_124":1906,"_128":1908},[1899],{"_109":278,"_111":1900},{"_113":1901},[115],[1903],{"_109":119},[1905],{"_109":123},[1907],{"_109":287},[1909],{"_20":131,"_109":132,"_133":101},"

Introduction

Bootstrap 5 is the latest version of the world’s most popular front-end toolkit. It makes building beautiful, responsive websites easy even for beginners. In this tutorial, you’ll learn how to set up Bootstrap 5, understand its key components, and create your first responsive layout.

Why Use Bootstrap 5?

Mobile-first: Designed for responsive, mobile-first design.
Pre-built Components: Includes navbars, cards, modals, and more.
Utility Classes: Helps to style elements quickly with ready-made CSS classes.
Customizable: Easy to override or extend with your own styles.

Step 1: Setting Up Bootstrap 5

Option 1: CDN

The quickest way is to add the Bootstrap CDN to your HTML file:

<link href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css\" rel=\"stylesheet\">\n<script src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js\"></script>\n

Option 2: Using npm

For modern projects, install via npm:

npm install bootstrap

Then, import Bootstrap CSS in your src/index.js or main entry point:

import 'bootstrap/dist/css/bootstrap.min.css';

Step 2: Understanding the Bootstrap 5 Grid

Bootstrap uses a 12-column grid system that makes creating responsive layouts a breeze. Example:

<div class=\"container\">\n  <div class=\"row\">\n    <div class=\"col-6 col-md-4\">Column 1</div>\n    <div class=\"col-6 col-md-4\">Column 2</div>\n    <div class=\"col-12 col-md-4\">Column 3</div>\n  </div>\n</div>\n

Step 3: Using Bootstrap Components

Bootstrap 5 includes dozens of ready-made components. Here are some popular ones:

Button Example

<button class=\"btn btn-primary\">Primary Button</button>\n

Navbar Example

<nav class=\"navbar navbar-expand-lg navbar-light bg-light\">\n  <a class=\"navbar-brand\" href=\"#\">Brand</a>\n  <button class=\"navbar-toggler\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarNav\">\n    <span class=\"navbar-toggler-icon\"></span>\n  </button>\n  <div class=\"collapse navbar-collapse\" id=\"navbarNav\">\n    <ul class=\"navbar-nav\">\n      <li class=\"nav-item\">\n        <a class=\"nav-link active\" aria-current=\"page\" href=\"#\">Home</a>\n      </li>\n      <li class=\"nav-item\">\n        <a class=\"nav-link\" href=\"#\">Features</a>\n      </li>\n    </ul>\n  </div>\n</nav>\n

Card Example

<div class=\"card\" style=\"width: 18rem;\">\n  <img src=\"https://via.placeholder.com/150\" class=\"card-img-top\" alt=\"...\">\n  <div class=\"card-body\">\n    <h5 class=\"card-title\">Card title</h5>\n    <p class=\"card-text\">Some quick example text to build on the card title.</p>\n    <a href=\"#\" class=\"btn btn-primary\">Go somewhere</a>\n  </div>\n</div>\n

Step 4: Customize Bootstrap

Override styles using your own CSS file after the Bootstrap link.
Take advantage of custom Sass variables for advanced themes.

Conclusion

Bootstrap 5 simplifies web design for beginners with responsive grids, flexible components, and easy customization. Start with the examples above and explore more features in Bootstrap’s official documentation. For more web development tutorials, stay tuned to fulldev.pl!

\n","Bootstrap 5 Tutorial for Beginners","

A step-by-step Bootstrap 5 tutorial for beginners. Learn setup, key concepts, and build responsive layouts with live code examples.

\n",["D",1751500283000],[1915],{"_8":304,"_18":305,"_20":306,"_12":307,"_23":308,"_25":309,"_27":1916,"_330":1932,"_104":1933},{"_29":311,"_86":312,"_31":1917,"_41":305,"_42":43,"_44":45,"_46":311,"_314":312,"_47":305,"_48":49,"_50":51,"_52":1918},{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":1919},[1920,1923,1927],{"_59":60,"_61":305,"_62":305,"_20":311,"_63":1921,"_86":312,"_66":1922,"_69":70},{"_61":65},{"_61":320},{"_59":72,"_61":320,"_73":1924},[1925,1926],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":306},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":1928,"_69":70},[1929],{"_59":91,"_92":1930,"_97":1931},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},[],{"_106":1934,"_116":1938,"_120":1940,"_124":1942,"_128":1944},[1935],{"_109":335,"_111":1936},{"_113":1937},[115],[1939],{"_109":340},[1941],{"_109":343},[1943],{"_109":346},[1945],{"_20":131,"_109":132,"_133":101},{"_29":1947,"_86":1948,"_31":1949,"_41":1950,"_42":43,"_44":45,"_46":1947,"_314":1948,"_47":1950,"_48":49,"_354":917,"_356":357,"_358":359,"_50":51,"_360":1951,"_52":1952},"Bootstrap 5 Tutorial for Beginners: Step-by-Step Guide","Bootstrap 5 tutorial for beginners: learn setup, basic grid, components, and customization with code examples for fast, responsive web development.",{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},"https://blog.fulldev.pl/2025/06/30/bootstrap-5-tutorial-for-beginners/",{"_362":359,"_363":364},{"_54":55,"_56":1953},[1954,1962,1966,1971],{"_59":368,"_61":1950,"_62":1950,"_20":1947,"_63":1955,"_370":917,"_371":357,"_358":1956,"_86":1948,"_66":1957,"_69":70,"_88":1959},{"_61":65},{"_61":373},{"_61":1958},"https://blog.fulldev.pl/2025/06/30/bootstrap-5-tutorial-for-beginners/#breadcrumb",[1960],{"_59":378,"_92":1961},[1950],{"_59":72,"_61":1958,"_73":1963},[1964,1965],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":1911},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":1967,"_69":70},[1968],{"_59":91,"_92":1969,"_97":1970},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_59":390,"_61":373,"_20":359,"_391":1972,"_398":1973,"_62":401},{"_59":393,"_69":70,"_61":394,"_62":395,"_396":395,"_397":359},[400],{"_403":1184,"_405":404},{"_8":1976,"_10":1977,"_12":1978,"_14":1979,"_290":2178,"_29":2179,"_293":294,"_295":296,"_297":2180,"_299":2181,"_301":2182,"_27":2214,"_330":2243},116,["D",1751247770000],"getting-started-with-react",[1980,2019,2049,2079,2109,2148],{"_8":1981,"_18":1982,"_20":1983,"_12":1984,"_23":24,"_25":1985,"_27":1986,"_104":2004},34,"https://blog.fulldev.pl/tag/beginner/","Beginner","beginner","\nArchiwa Beginner - Fulldev\n\n\n\n\n\n\n\n\n\n",{"_29":1987,"_31":1988,"_41":1982,"_42":43,"_44":45,"_46":1987,"_47":1982,"_48":49,"_50":51,"_52":1989},"Archiwa Beginner - Fulldev",{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":1990},[1991,1995,1999],{"_59":60,"_61":1982,"_62":1982,"_20":1987,"_63":1992,"_66":1993,"_69":70},{"_61":65},{"_61":1994},"https://blog.fulldev.pl/tag/beginner/#breadcrumb",{"_59":72,"_61":1994,"_73":1996},[1997,1998],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":1983},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":2000,"_69":70},[2001],{"_59":91,"_92":2002,"_97":2003},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_106":2005,"_116":2010,"_120":2012,"_124":2014,"_128":2017},[2006],{"_109":2007,"_111":2008},"https://blog.fulldev.pl/wp-json/wp/v2/tags/34",{"_113":2009},[115],[2011],{"_109":119},[2013],{"_109":123},[2015],{"_109":2016},"https://blog.fulldev.pl/wp-json/wp/v2/posts?tags=34",[2018],{"_20":131,"_109":132,"_133":101},{"_8":213,"_18":214,"_20":215,"_12":216,"_23":24,"_25":217,"_27":2020,"_104":2036},{"_29":219,"_31":2021,"_41":214,"_42":43,"_44":45,"_46":219,"_47":214,"_48":49,"_50":51,"_52":2022},{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":2023},[2024,2027,2031],{"_59":60,"_61":214,"_62":214,"_20":219,"_63":2025,"_66":2026,"_69":70},{"_61":65},{"_61":226},{"_59":72,"_61":226,"_73":2028},[2029,2030],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":215},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":2032,"_69":70},[2033],{"_59":91,"_92":2034,"_97":2035},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_106":2037,"_116":2041,"_120":2043,"_124":2045,"_128":2047},[2038],{"_109":239,"_111":2039},{"_113":2040},[115],[2042],{"_109":119},[2044],{"_109":123},[2046],{"_109":248},[2048],{"_20":131,"_109":132,"_133":101},{"_8":442,"_18":443,"_20":444,"_12":445,"_23":24,"_25":446,"_27":2050,"_104":2066},{"_29":448,"_31":2051,"_41":443,"_42":43,"_44":45,"_46":448,"_47":443,"_48":49,"_50":51,"_52":2052},{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":2053},[2054,2057,2061],{"_59":60,"_61":443,"_62":443,"_20":448,"_63":2055,"_66":2056,"_69":70},{"_61":65},{"_61":455},{"_59":72,"_61":455,"_73":2058},[2059,2060],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":444},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":2062,"_69":70},[2063],{"_59":91,"_92":2064,"_97":2065},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_106":2067,"_116":2071,"_120":2073,"_124":2075,"_128":2077},[2068],{"_109":468,"_111":2069},{"_113":2070},[115],[2072],{"_109":119},[2074],{"_109":123},[2076],{"_109":477},[2078],{"_20":131,"_109":132,"_133":101},{"_8":769,"_18":770,"_20":771,"_12":772,"_23":24,"_25":773,"_27":2080,"_104":2096},{"_29":775,"_31":2081,"_41":770,"_42":43,"_44":45,"_46":775,"_47":770,"_48":49,"_50":51,"_52":2082},{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":2083},[2084,2087,2091],{"_59":60,"_61":770,"_62":770,"_20":775,"_63":2085,"_66":2086,"_69":70},{"_61":65},{"_61":782},{"_59":72,"_61":782,"_73":2088},[2089,2090],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":771},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":2092,"_69":70},[2093],{"_59":91,"_92":2094,"_97":2095},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_106":2097,"_116":2101,"_120":2103,"_124":2105,"_128":2107},[2098],{"_109":795,"_111":2099},{"_113":2100},[115],[2102],{"_109":119},[2104],{"_109":123},[2106],{"_109":804},[2108],{"_20":131,"_109":132,"_133":101},{"_8":2110,"_18":2111,"_20":2112,"_12":2113,"_23":24,"_25":2114,"_27":2115,"_104":2133},80,"https://blog.fulldev.pl/tag/spa/","SPA","spa","\nArchiwa SPA - Fulldev\n\n\n\n\n\n\n\n\n\n",{"_29":2116,"_31":2117,"_41":2111,"_42":43,"_44":45,"_46":2116,"_47":2111,"_48":49,"_50":51,"_52":2118},"Archiwa SPA - Fulldev",{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":2119},[2120,2124,2128],{"_59":60,"_61":2111,"_62":2111,"_20":2116,"_63":2121,"_66":2122,"_69":70},{"_61":65},{"_61":2123},"https://blog.fulldev.pl/tag/spa/#breadcrumb",{"_59":72,"_61":2123,"_73":2125},[2126,2127],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":2112},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":2129,"_69":70},[2130],{"_59":91,"_92":2131,"_97":2132},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_106":2134,"_116":2139,"_120":2141,"_124":2143,"_128":2146},[2135],{"_109":2136,"_111":2137},"https://blog.fulldev.pl/wp-json/wp/v2/tags/80",{"_113":2138},[115],[2140],{"_109":119},[2142],{"_109":123},[2144],{"_109":2145},"https://blog.fulldev.pl/wp-json/wp/v2/posts?tags=80",[2147],{"_20":131,"_109":132,"_133":101},{"_8":252,"_18":253,"_20":254,"_12":255,"_23":24,"_25":256,"_27":2149,"_104":2165},{"_29":258,"_31":2150,"_41":253,"_42":43,"_44":45,"_46":258,"_47":253,"_48":49,"_50":51,"_52":2151},{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":2152},[2153,2156,2160],{"_59":60,"_61":253,"_62":253,"_20":258,"_63":2154,"_66":2155,"_69":70},{"_61":65},{"_61":265},{"_59":72,"_61":265,"_73":2157},[2158,2159],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":254},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":2161,"_69":70},[2162],{"_59":91,"_92":2163,"_97":2164},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_106":2166,"_116":2170,"_120":2172,"_124":2174,"_128":2176},[2167],{"_109":278,"_111":2168},{"_113":2169},[115],[2171],{"_109":119},[2173],{"_109":123},[2175],{"_109":287},[2177],{"_20":131,"_109":132,"_133":101},"

Introduction

React is a popular JavaScript library developed by Facebook for building user interfaces, particularly single-page applications. Thanks to its component-based architecture and efficient rendering, React has become an essential tool for modern web development. If you’re new to React, this guide will help you get started quickly and confidently.

Why Use React?

Component-based: Build encapsulated components that manage their own state.
Declarative: Design simple views for each state in your application.
Large ecosystem and community: Tons of resources, libraries, and support.
Fast rendering: The virtual DOM efficiently updates only what’s necessary.

Setting Up the Development Environment

Option 1: Using Create React App

Make sure Node.js and npm are installed. You can check with node -v and npm -v.
Run the following command in your terminal:
\n npx create-react-app my-app\n
Go to your new project folder and start the development server:
\n cd my-app npm start\n

Option 2: Using Vite (Faster builds)

Install Vite and create a new React project:
\n npm create vite@latest my-app -- --template react\n
Install dependencies and start the server:
\n cd my-app npm install npm run dev\n

Option 3: CodeSandbox/StackBlitz

If you want to experiment fast, try online editors like CodeSandbox or StackBlitz. Choose the React template, and you’re ready to code!

Your First React Component

React applications are built from components. Here’s a simple example:

function Welcome(props) {\n  return <h1>Hello, {props.name}!</h1>;\n}\n\n// Usage\n<Welcome name=\"World\" />

This creates a reusable component that greets a user by name.

Understanding JSX

React components use JSX, a syntax extension that lets you write HTML-like code directly inside JavaScript:

const element = <h1>Hello, React!</h1>;

JSX makes code more readable and expressive, but it’s transpiled to JavaScript under the hood.

Adding State with `useState`

Components can hold their own state using the useState hook:

import React, { useState } from 'react';\n\nfunction Counter() {\n  const [count, setCount] = useState(0);\n  return (\n    <div>\n      <p>Count: {count}</p>\n      <button onClick={() => setCount(count + 1)}>Increment</button>\n    </div>\n  );\n}

Project Structure Overview

src/App.js — Main app component
src/index.js — Entry point (renders App to the DOM)
public/index.html — The root HTML file

Next Steps

Learn about props and component composition
Explore advanced hooks: useEffect, useContext
Style your components using CSS or styled-components
Read the official React documentation

Conclusion

React is a must-learn technology for web development in 2024 and beyond. By mastering the basics—components, state, and JSX—you’ll be well on your way to building modern, responsive web apps. Happy coding!

\n","Getting Started with React","

Begin your journey with React! Learn how to set up your environment, create your first component, and understand the basics every web developer should know.

\n",["D",1751500284000],[2183],{"_8":304,"_18":305,"_20":306,"_12":307,"_23":308,"_25":309,"_27":2184,"_330":2200,"_104":2201},{"_29":311,"_86":312,"_31":2185,"_41":305,"_42":43,"_44":45,"_46":311,"_314":312,"_47":305,"_48":49,"_50":51,"_52":2186},{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":2187},[2188,2191,2195],{"_59":60,"_61":305,"_62":305,"_20":311,"_63":2189,"_86":312,"_66":2190,"_69":70},{"_61":65},{"_61":320},{"_59":72,"_61":320,"_73":2192},[2193,2194],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":306},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":2196,"_69":70},[2197],{"_59":91,"_92":2198,"_97":2199},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},[],{"_106":2202,"_116":2206,"_120":2208,"_124":2210,"_128":2212},[2203],{"_109":335,"_111":2204},{"_113":2205},[115],[2207],{"_109":340},[2209],{"_109":343},[2211],{"_109":346},[2213],{"_20":131,"_109":132,"_133":101},{"_29":2215,"_86":2216,"_31":2217,"_41":2218,"_42":43,"_44":45,"_46":2215,"_314":2216,"_47":2218,"_48":49,"_354":2219,"_356":668,"_358":359,"_50":51,"_360":2220,"_52":2221},"Getting Started with React – Quick Beginner Guide (2024)","Learn how to get started with React. Set up a project, build your first component, and understand basics for modern web development. Beginner-friendly!",{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},"https://blog.fulldev.pl/2025/06/30/getting-started-with-react/","2025-06-30T01:42:50+00:00",{"_362":359,"_363":364},{"_54":55,"_56":2222},[2223,2231,2235,2240],{"_59":368,"_61":2218,"_62":2218,"_20":2215,"_63":2224,"_370":2219,"_371":668,"_358":2225,"_86":2216,"_66":2226,"_69":70,"_88":2228},{"_61":65},{"_61":373},{"_61":2227},"https://blog.fulldev.pl/2025/06/30/getting-started-with-react/#breadcrumb",[2229],{"_59":378,"_92":2230},[2218],{"_59":72,"_61":2227,"_73":2232},[2233,2234],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":2179},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":2236,"_69":70},[2237],{"_59":91,"_92":2238,"_97":2239},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_59":390,"_61":373,"_20":359,"_391":2241,"_398":2242,"_62":401},{"_59":393,"_69":70,"_61":394,"_62":395,"_396":395,"_397":359},[400],{"_403":2244,"_405":1420},115,{"_8":1420,"_10":2246,"_12":2247,"_14":2248,"_290":2486,"_29":2487,"_293":294,"_295":296,"_297":2488,"_299":2489,"_301":2490,"_27":2522,"_330":2550},["D",1751247770000],"vue-3-composition-api-crash-course",[2249,2288,2327,2357,2387,2426,2456],{"_8":2250,"_18":2251,"_20":2252,"_12":2253,"_23":24,"_25":2254,"_27":2255,"_104":2273},85,"https://blog.fulldev.pl/tag/composables/","Composables","composables","\nArchiwa Composables - Fulldev\n\n\n\n\n\n\n\n\n\n",{"_29":2256,"_31":2257,"_41":2251,"_42":43,"_44":45,"_46":2256,"_47":2251,"_48":49,"_50":51,"_52":2258},"Archiwa Composables - Fulldev",{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":2259},[2260,2264,2268],{"_59":60,"_61":2251,"_62":2251,"_20":2256,"_63":2261,"_66":2262,"_69":70},{"_61":65},{"_61":2263},"https://blog.fulldev.pl/tag/composables/#breadcrumb",{"_59":72,"_61":2263,"_73":2265},[2266,2267],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":2252},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":2269,"_69":70},[2270],{"_59":91,"_92":2271,"_97":2272},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_106":2274,"_116":2279,"_120":2281,"_124":2283,"_128":2286},[2275],{"_109":2276,"_111":2277},"https://blog.fulldev.pl/wp-json/wp/v2/tags/85",{"_113":2278},[115],[2280],{"_109":119},[2282],{"_109":123},[2284],{"_109":2285},"https://blog.fulldev.pl/wp-json/wp/v2/posts?tags=85",[2287],{"_20":131,"_109":132,"_133":101},{"_8":2289,"_18":2290,"_20":2291,"_12":2292,"_23":24,"_25":2293,"_27":2294,"_104":2312},83,"https://blog.fulldev.pl/tag/composition-api/","Composition API","composition-api","\nArchiwa Composition API - Fulldev\n\n\n\n\n\n\n\n\n\n",{"_29":2295,"_31":2296,"_41":2290,"_42":43,"_44":45,"_46":2295,"_47":2290,"_48":49,"_50":51,"_52":2297},"Archiwa Composition API - Fulldev",{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":2298},[2299,2303,2307],{"_59":60,"_61":2290,"_62":2290,"_20":2295,"_63":2300,"_66":2301,"_69":70},{"_61":65},{"_61":2302},"https://blog.fulldev.pl/tag/composition-api/#breadcrumb",{"_59":72,"_61":2302,"_73":2304},[2305,2306],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":2291},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":2308,"_69":70},[2309],{"_59":91,"_92":2310,"_97":2311},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_106":2313,"_116":2318,"_120":2320,"_124":2322,"_128":2325},[2314],{"_109":2315,"_111":2316},"https://blog.fulldev.pl/wp-json/wp/v2/tags/83",{"_113":2317},[115],[2319],{"_109":119},[2321],{"_109":123},[2323],{"_109":2324},"https://blog.fulldev.pl/wp-json/wp/v2/posts?tags=83",[2326],{"_20":131,"_109":132,"_133":101},{"_8":213,"_18":214,"_20":215,"_12":216,"_23":24,"_25":217,"_27":2328,"_104":2344},{"_29":219,"_31":2329,"_41":214,"_42":43,"_44":45,"_46":219,"_47":214,"_48":49,"_50":51,"_52":2330},{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":2331},[2332,2335,2339],{"_59":60,"_61":214,"_62":214,"_20":219,"_63":2333,"_66":2334,"_69":70},{"_61":65},{"_61":226},{"_59":72,"_61":226,"_73":2336},[2337,2338],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":215},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":2340,"_69":70},[2341],{"_59":91,"_92":2342,"_97":2343},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_106":2345,"_116":2349,"_120":2351,"_124":2353,"_128":2355},[2346],{"_109":239,"_111":2347},{"_113":2348},[115],[2350],{"_109":119},[2352],{"_109":123},[2354],{"_109":248},[2356],{"_20":131,"_109":132,"_133":101},{"_8":442,"_18":443,"_20":444,"_12":445,"_23":24,"_25":446,"_27":2358,"_104":2374},{"_29":448,"_31":2359,"_41":443,"_42":43,"_44":45,"_46":448,"_47":443,"_48":49,"_50":51,"_52":2360},{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":2361},[2362,2365,2369],{"_59":60,"_61":443,"_62":443,"_20":448,"_63":2363,"_66":2364,"_69":70},{"_61":65},{"_61":455},{"_59":72,"_61":455,"_73":2366},[2367,2368],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":444},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":2370,"_69":70},[2371],{"_59":91,"_92":2372,"_97":2373},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_106":2375,"_116":2379,"_120":2381,"_124":2383,"_128":2385},[2376],{"_109":468,"_111":2377},{"_113":2378},[115],[2380],{"_109":119},[2382],{"_109":123},[2384],{"_109":477},[2386],{"_20":131,"_109":132,"_133":101},{"_8":2388,"_18":2389,"_20":2390,"_12":2391,"_23":24,"_25":2392,"_27":2393,"_104":2411},82,"https://blog.fulldev.pl/tag/vue-3/","Vue 3","vue-3","\nArchiwa Vue 3 - Fulldev\n\n\n\n\n\n\n\n\n\n",{"_29":2394,"_31":2395,"_41":2389,"_42":43,"_44":45,"_46":2394,"_47":2389,"_48":49,"_50":51,"_52":2396},"Archiwa Vue 3 - Fulldev",{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":2397},[2398,2402,2406],{"_59":60,"_61":2389,"_62":2389,"_20":2394,"_63":2399,"_66":2400,"_69":70},{"_61":65},{"_61":2401},"https://blog.fulldev.pl/tag/vue-3/#breadcrumb",{"_59":72,"_61":2401,"_73":2403},[2404,2405],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":2390},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":2407,"_69":70},[2408],{"_59":91,"_92":2409,"_97":2410},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_106":2412,"_116":2417,"_120":2419,"_124":2421,"_128":2424},[2413],{"_109":2414,"_111":2415},"https://blog.fulldev.pl/wp-json/wp/v2/tags/82",{"_113":2416},[115],[2418],{"_109":119},[2420],{"_109":123},[2422],{"_109":2423},"https://blog.fulldev.pl/wp-json/wp/v2/posts?tags=82",[2425],{"_20":131,"_109":132,"_133":101},{"_8":558,"_18":559,"_20":560,"_12":561,"_23":24,"_25":562,"_27":2427,"_104":2443},{"_29":564,"_31":2428,"_41":559,"_42":43,"_44":45,"_46":564,"_47":559,"_48":49,"_50":51,"_52":2429},{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":2430},[2431,2434,2438],{"_59":60,"_61":559,"_62":559,"_20":564,"_63":2432,"_66":2433,"_69":70},{"_61":65},{"_61":571},{"_59":72,"_61":571,"_73":2435},[2436,2437],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":560},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":2439,"_69":70},[2440],{"_59":91,"_92":2441,"_97":2442},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_106":2444,"_116":2448,"_120":2450,"_124":2452,"_128":2454},[2445],{"_109":584,"_111":2446},{"_113":2447},[115],[2449],{"_109":119},[2451],{"_109":123},[2453],{"_109":593},[2455],{"_20":131,"_109":132,"_133":101},{"_8":252,"_18":253,"_20":254,"_12":255,"_23":24,"_25":256,"_27":2457,"_104":2473},{"_29":258,"_31":2458,"_41":253,"_42":43,"_44":45,"_46":258,"_47":253,"_48":49,"_50":51,"_52":2459},{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":2460},[2461,2464,2468],{"_59":60,"_61":253,"_62":253,"_20":258,"_63":2462,"_66":2463,"_69":70},{"_61":65},{"_61":265},{"_59":72,"_61":265,"_73":2465},[2466,2467],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":254},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":2469,"_69":70},[2470],{"_59":91,"_92":2471,"_97":2472},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_106":2474,"_116":2478,"_120":2480,"_124":2482,"_128":2484},[2475],{"_109":278,"_111":2476},{"_113":2477},[115],[2479],{"_109":119},[2481],{"_109":123},[2483],{"_109":287},[2485],{"_20":131,"_109":132,"_133":101},"

Introduction

Vue 3 introduced the Composition API, a powerful new way to write scalable and maintainable components. If you’re coming from Vue 2 or are new to Vue, understanding the Composition API will supercharge your web development workflow! Let’s dive into the essentials with practical code examples.

Why Composition API?

Reusability: Easily share logic across components
Organization: Group related code by feature, not by option
TypeScript-friendly: Improved code completion and type safety
Advanced patterns: Enables more expressive use of Vue on large projects

Basic Setup

Start a new Vue 3 project (if you haven’t already):

npm init vue@latest\ncd my-vue-app\nnpm install\nnpm run dev

In a component, use the <script setup> syntax (recommended):

<script setup>\nimport { ref } from 'vue';\n\nconst name = ref('Vue 3');\n</script>\n\n<template>\n  <h1>Hello, {{ name }}!</h1>\n</template>

Key Composition API Concepts

1. `ref()` – Reactive Variables

<script setup>\nimport { ref } from 'vue';\nconst count = ref(0);\nfunction increment() {\n  count.value++;\n}\n</script>

<template>\n  <button @click=\"increment\">Count: {{ count }}</button>\n</template>

2. `reactive()` – Reactive State Objects

<script setup>\nimport { reactive } from 'vue';\nconst form = reactive({\n  email: '',\n  password: ''\n});\n</script>

3. `computed()` – Derived Data

<script setup>\nimport { ref, computed } from 'vue';\nconst a = ref(2);\nconst b = ref(3);\nconst sum = computed(() => a.value + b.value);\n</script>

<template>\n  <p>Sum: {{ sum }}</p>\n</template>

4. `watch()` – React to Changes

<script setup>\nimport { ref, watch } from 'vue';\nconst keyword = ref('');\nwatch(keyword, (newVal, oldVal) => {\n  console.log('Keyword changed from', oldVal, 'to', newVal);\n});\n</script>

Composing Reusable Logic with Custom Composables

// useCounter.js\nimport { ref } from 'vue';\nexport function useCounter() {\n  const count = ref(0);\n  function increment() { count.value++; }\n  function decrement() { count.value--; }\n  return { count, increment, decrement };\n}

<script setup>\nimport { useCounter } from './useCounter.js';\nconst { count, increment, decrement } = useCounter();\n</script>\n<template>\n  <button @click=\"decrement\">-</button>\n  {{ count }}\n  <button @click=\"increment\">+</button>\n</template>

Mixing Option API and Composition API

You can freely combine Composition API with the traditional Options API if migrating legacy components.

export default {\n  setup() {\n    // Composition API logic here\n  },\n  data() {\n    // Options API data here\n  }\n}\n

Best Practices

Use <script setup> for simpler, cleaner components
Group logic by concern (use custom composables)
Prefer ref for primitives, reactive for objects/arrays
Name composables with use* for convention and clarity

Conclusion

The Composition API in Vue 3 empowers you to build robust, testable, and flexible applications. Practice by refactoring an old component or building something new—you’ll quickly appreciate the benefits!

\n","Vue 3 Composition API Crash Course","

Learn how to leverage Vue 3’s Composition API for more flexible, scalable, and maintainable web apps. Step-by-step code examples included.

\n",["D",1751500283000],[2491],{"_8":304,"_18":305,"_20":306,"_12":307,"_23":308,"_25":309,"_27":2492,"_330":2508,"_104":2509},{"_29":311,"_86":312,"_31":2493,"_41":305,"_42":43,"_44":45,"_46":311,"_314":312,"_47":305,"_48":49,"_50":51,"_52":2494},{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":2495},[2496,2499,2503],{"_59":60,"_61":305,"_62":305,"_20":311,"_63":2497,"_86":312,"_66":2498,"_69":70},{"_61":65},{"_61":320},{"_59":72,"_61":320,"_73":2500},[2501,2502],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":306},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":2504,"_69":70},[2505],{"_59":91,"_92":2506,"_97":2507},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},[],{"_106":2510,"_116":2514,"_120":2516,"_124":2518,"_128":2520},[2511],{"_109":335,"_111":2512},{"_113":2513},[115],[2515],{"_109":340},[2517],{"_109":343},[2519],{"_109":346},[2521],{"_20":131,"_109":132,"_133":101},{"_29":2523,"_86":2524,"_31":2525,"_41":2526,"_42":43,"_44":45,"_46":2523,"_314":2524,"_47":2526,"_48":49,"_354":2219,"_356":357,"_358":359,"_50":51,"_360":2527,"_52":2528},"Vue 3 Composition API Crash Course – Quick Start Guide","Master Vue 3 Composition API with this crash course. Learn ref, reactive, computed, watch, and custom composables for scalable web development.",{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},"https://blog.fulldev.pl/2025/06/30/vue-3-composition-api-crash-course/",{"_362":359,"_363":364},{"_54":55,"_56":2529},[2530,2538,2542,2547],{"_59":368,"_61":2526,"_62":2526,"_20":2523,"_63":2531,"_370":2219,"_371":357,"_358":2532,"_86":2524,"_66":2533,"_69":70,"_88":2535},{"_61":65},{"_61":373},{"_61":2534},"https://blog.fulldev.pl/2025/06/30/vue-3-composition-api-crash-course/#breadcrumb",[2536],{"_59":378,"_92":2537},[2526],{"_59":72,"_61":2534,"_73":2539},[2540,2541],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":2487},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":2543,"_69":70},[2544],{"_59":91,"_92":2545,"_97":2546},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_59":390,"_61":373,"_20":359,"_391":2548,"_398":2549,"_62":401},{"_59":393,"_69":70,"_61":394,"_62":395,"_396":395,"_397":359},[400],{"_403":1976,"_405":1184},{"_8":2552,"_10":2553,"_12":2554,"_14":2555,"_290":2784,"_29":2785,"_293":294,"_295":296,"_297":2786,"_299":2787,"_301":2788,"_27":2820,"_330":2850},118,["D",1751247770000],"building-a-to-do-app-with-react",[2556,2586,2616,2646,2685,2715,2754],{"_8":1981,"_18":1982,"_20":1983,"_12":1984,"_23":24,"_25":1985,"_27":2557,"_104":2573},{"_29":1987,"_31":2558,"_41":1982,"_42":43,"_44":45,"_46":1987,"_47":1982,"_48":49,"_50":51,"_52":2559},{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":2560},[2561,2564,2568],{"_59":60,"_61":1982,"_62":1982,"_20":1987,"_63":2562,"_66":2563,"_69":70},{"_61":65},{"_61":1994},{"_59":72,"_61":1994,"_73":2565},[2566,2567],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":1983},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":2569,"_69":70},[2570],{"_59":91,"_92":2571,"_97":2572},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_106":2574,"_116":2578,"_120":2580,"_124":2582,"_128":2584},[2575],{"_109":2007,"_111":2576},{"_113":2577},[115],[2579],{"_109":119},[2581],{"_109":123},[2583],{"_109":2016},[2585],{"_20":131,"_109":132,"_133":101},{"_8":213,"_18":214,"_20":215,"_12":216,"_23":24,"_25":217,"_27":2587,"_104":2603},{"_29":219,"_31":2588,"_41":214,"_42":43,"_44":45,"_46":219,"_47":214,"_48":49,"_50":51,"_52":2589},{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":2590},[2591,2594,2598],{"_59":60,"_61":214,"_62":214,"_20":219,"_63":2592,"_66":2593,"_69":70},{"_61":65},{"_61":226},{"_59":72,"_61":226,"_73":2595},[2596,2597],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":215},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":2599,"_69":70},[2600],{"_59":91,"_92":2601,"_97":2602},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_106":2604,"_116":2608,"_120":2610,"_124":2612,"_128":2614},[2605],{"_109":239,"_111":2606},{"_113":2607},[115],[2609],{"_109":119},[2611],{"_109":123},[2613],{"_109":248},[2615],{"_20":131,"_109":132,"_133":101},{"_8":442,"_18":443,"_20":444,"_12":445,"_23":24,"_25":446,"_27":2617,"_104":2633},{"_29":448,"_31":2618,"_41":443,"_42":43,"_44":45,"_46":448,"_47":443,"_48":49,"_50":51,"_52":2619},{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":2620},[2621,2624,2628],{"_59":60,"_61":443,"_62":443,"_20":448,"_63":2622,"_66":2623,"_69":70},{"_61":65},{"_61":455},{"_59":72,"_61":455,"_73":2625},[2626,2627],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":444},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":2629,"_69":70},[2630],{"_59":91,"_92":2631,"_97":2632},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_106":2634,"_116":2638,"_120":2640,"_124":2642,"_128":2644},[2635],{"_109":468,"_111":2636},{"_113":2637},[115],[2639],{"_109":119},[2641],{"_109":123},[2643],{"_109":477},[2645],{"_20":131,"_109":132,"_133":101},{"_8":2647,"_18":2648,"_20":2649,"_12":2650,"_23":24,"_25":2651,"_27":2652,"_104":2670},87,"https://blog.fulldev.pl/tag/project/","Project","project","\nArchiwa Project - Fulldev\n\n\n\n\n\n\n\n\n\n",{"_29":2653,"_31":2654,"_41":2648,"_42":43,"_44":45,"_46":2653,"_47":2648,"_48":49,"_50":51,"_52":2655},"Archiwa Project - Fulldev",{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":2656},[2657,2661,2665],{"_59":60,"_61":2648,"_62":2648,"_20":2653,"_63":2658,"_66":2659,"_69":70},{"_61":65},{"_61":2660},"https://blog.fulldev.pl/tag/project/#breadcrumb",{"_59":72,"_61":2660,"_73":2662},[2663,2664],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":2649},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":2666,"_69":70},[2667],{"_59":91,"_92":2668,"_97":2669},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_106":2671,"_116":2676,"_120":2678,"_124":2680,"_128":2683},[2672],{"_109":2673,"_111":2674},"https://blog.fulldev.pl/wp-json/wp/v2/tags/87",{"_113":2675},[115],[2677],{"_109":119},[2679],{"_109":123},[2681],{"_109":2682},"https://blog.fulldev.pl/wp-json/wp/v2/posts?tags=87",[2684],{"_20":131,"_109":132,"_133":101},{"_8":769,"_18":770,"_20":771,"_12":772,"_23":24,"_25":773,"_27":2686,"_104":2702},{"_29":775,"_31":2687,"_41":770,"_42":43,"_44":45,"_46":775,"_47":770,"_48":49,"_50":51,"_52":2688},{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":2689},[2690,2693,2697],{"_59":60,"_61":770,"_62":770,"_20":775,"_63":2691,"_66":2692,"_69":70},{"_61":65},{"_61":782},{"_59":72,"_61":782,"_73":2694},[2695,2696],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":771},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":2698,"_69":70},[2699],{"_59":91,"_92":2700,"_97":2701},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_106":2703,"_116":2707,"_120":2709,"_124":2711,"_128":2713},[2704],{"_109":795,"_111":2705},{"_113":2706},[115],[2708],{"_109":119},[2710],{"_109":123},[2712],{"_109":804},[2714],{"_20":131,"_109":132,"_133":101},{"_8":2716,"_18":2717,"_20":2718,"_12":2719,"_23":24,"_25":2720,"_27":2721,"_104":2739},86,"https://blog.fulldev.pl/tag/to-do-app/","To-Do App","to-do-app","\nArchiwa To-Do App - Fulldev\n\n\n\n\n\n\n\n\n\n",{"_29":2722,"_31":2723,"_41":2717,"_42":43,"_44":45,"_46":2722,"_47":2717,"_48":49,"_50":51,"_52":2724},"Archiwa To-Do App - Fulldev",{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":2725},[2726,2730,2734],{"_59":60,"_61":2717,"_62":2717,"_20":2722,"_63":2727,"_66":2728,"_69":70},{"_61":65},{"_61":2729},"https://blog.fulldev.pl/tag/to-do-app/#breadcrumb",{"_59":72,"_61":2729,"_73":2731},[2732,2733],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":2718},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":2735,"_69":70},[2736],{"_59":91,"_92":2737,"_97":2738},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_106":2740,"_116":2745,"_120":2747,"_124":2749,"_128":2752},[2741],{"_109":2742,"_111":2743},"https://blog.fulldev.pl/wp-json/wp/v2/tags/86",{"_113":2744},[115],[2746],{"_109":119},[2748],{"_109":123},[2750],{"_109":2751},"https://blog.fulldev.pl/wp-json/wp/v2/posts?tags=86",[2753],{"_20":131,"_109":132,"_133":101},{"_8":252,"_18":253,"_20":254,"_12":255,"_23":24,"_25":256,"_27":2755,"_104":2771},{"_29":258,"_31":2756,"_41":253,"_42":43,"_44":45,"_46":258,"_47":253,"_48":49,"_50":51,"_52":2757},{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":2758},[2759,2762,2766],{"_59":60,"_61":253,"_62":253,"_20":258,"_63":2760,"_66":2761,"_69":70},{"_61":65},{"_61":265},{"_59":72,"_61":265,"_73":2763},[2764,2765],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":254},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":2767,"_69":70},[2768],{"_59":91,"_92":2769,"_97":2770},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_106":2772,"_116":2776,"_120":2778,"_124":2780,"_128":2782},[2773],{"_109":278,"_111":2774},{"_113":2775},[115],[2777],{"_109":119},[2779],{"_109":123},[2781],{"_109":287},[2783],{"_20":131,"_109":132,"_133":101},"\n

Introduction

\n\n\n\n

One of the best ways to get comfortable with React is by building a simple to-do app. In this tutorial, you’ll create a fully functional React to-do app from scratch. We’ll cover state management, handling user input, updating lists, and best practices for structuring React components.

\n\n\n\n

Setting Up Your Project

\n\n\n\n

Install Node.js and npm if you haven’t already.
Use npx create-react-app todo-app to scaffold your project.
cd todo-app and npm start to run your development server.

\n\n\n\n

Planning App Structure

\n\n\n\n

App – main component, holds state for all todos
TodoList – lists all todo items
TodoItem – displays individual todo with a remove button
TodoForm – input to add a new todo

\n\n\n\n

Building the Components

\n\n\n\n

App.js

\n\n\n\n

import React, { useState } from 'react';\nimport TodoForm from './TodoForm';\nimport TodoList from './TodoList';\n\nfunction App() {\n  const [todos, setTodos] = useState([]);\n\n  const addTodo = text => {\n    setTodos([...todos, { text, completed: false, id: Date.now() }]);\n  };\n\n  const removeTodo = id => {\n    setTodos(todos.filter(todo => todo.id !== id));\n  };\n\n  return (\n    <div>\n      <h1>To-Do App</h1>\n      <TodoForm addTodo={addTodo} />\n      <TodoList todos={todos} removeTodo={removeTodo} />\n    </div>\n  );\n}\n\nexport default App;

\n\n\n\n

TodoForm.js

\n\n\n\n

import React, { useState } from 'react';\n\nfunction TodoForm({ addTodo }) {\n  const [value, setValue] = useState('');\n\n  const handleSubmit = e => {\n    e.preventDefault();\n    if (!value.trim()) return;\n    addTodo(value);\n    setValue('');\n  };\n\n  return (\n    <form onSubmit={handleSubmit}>\n      <input type=\"text\" value={value} onChange={(e) => setValue(e.target.value)} placeholder=\"Enter a new task\" />\n      <button type=\"submit\">Add</button>\n    </form>\n  );\n}\n\nexport default TodoForm;

\n\n\n\n

TodoList.js

\n\n\n\n

import React from 'react';\nimport TodoItem from './TodoItem';\n\nfunction TodoList({ todos, removeTodo }) {\n  return (\n    <ul>\n      {todos.map(todo => (\n        <TodoItem key={todo.id} todo={todo} removeTodo={removeTodo} />\n      ))}\n    </ul>\n  );\n}\n\nexport default TodoList;

\n\n\n\n

TodoItem.js

\n\n\n\n

import React from 'react';\n\nfunction TodoItem({ todo, removeTodo }) {\n  return (\n    <li>\n      {todo.text}\n      <button onClick={() => removeTodo(todo.id)}>Remove</button>\n    </li>\n  );\n}\n\nexport default TodoItem;

\n\n\n\n

Enhancements

\n\n\n\n

Add completion toggling (with a line-through style)
Save todos in localStorage for persistence
Add editing capability
Improve the UI with CSS frameworks like TailwindCSS or Material UI

\n\n\n\n

Conclusion

\n\n\n\n

Building a to-do app in React is a fantastic way to learn the basics of building components, managing state, and handling events. As you gain confidence, try adding more features to make your app truly unique. Happy coding!

\n","Building a To-Do App with React","

Learn how to build a simple and interactive to-do app using React. Step-by-step guide with code examples and best practices.

\n",["D",1751732382000],[2789],{"_8":304,"_18":305,"_20":306,"_12":307,"_23":308,"_25":309,"_27":2790,"_330":2806,"_104":2807},{"_29":311,"_86":312,"_31":2791,"_41":305,"_42":43,"_44":45,"_46":311,"_314":312,"_47":305,"_48":49,"_50":51,"_52":2792},{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":2793},[2794,2797,2801],{"_59":60,"_61":305,"_62":305,"_20":311,"_63":2795,"_86":312,"_66":2796,"_69":70},{"_61":65},{"_61":320},{"_59":72,"_61":320,"_73":2798},[2799,2800],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":306},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":2802,"_69":70},[2803],{"_59":91,"_92":2804,"_97":2805},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},[],{"_106":2808,"_116":2812,"_120":2814,"_124":2816,"_128":2818},[2809],{"_109":335,"_111":2810},{"_113":2811},[115],[2813],{"_109":340},[2815],{"_109":343},[2817],{"_109":346},[2819],{"_20":131,"_109":132,"_133":101},{"_29":2821,"_86":2822,"_31":2823,"_41":2824,"_42":43,"_44":45,"_46":2821,"_314":2822,"_47":2824,"_48":49,"_354":2219,"_356":2825,"_358":359,"_50":51,"_360":2826,"_52":2828},"Building a To-Do App with React: Step-by-Step Guide","Learn how to build a basic to-do app in React. Includes full code examples, best practices, and tips for modern web development.",{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},"https://blog.fulldev.pl/2025/06/30/building-a-to-do-app-with-react/","2025-07-05T16:19:42+00:00",{"_362":359,"_363":2827},"1 minute",{"_54":55,"_56":2829},[2830,2838,2842,2847],{"_59":368,"_61":2824,"_62":2824,"_20":2821,"_63":2831,"_370":2219,"_371":2825,"_358":2832,"_86":2822,"_66":2833,"_69":70,"_88":2835},{"_61":65},{"_61":373},{"_61":2834},"https://blog.fulldev.pl/2025/06/30/building-a-to-do-app-with-react/#breadcrumb",[2836],{"_59":378,"_92":2837},[2824],{"_59":72,"_61":2834,"_73":2839},[2840,2841],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":2785},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":2843,"_69":70},[2844],{"_59":91,"_92":2845,"_97":2846},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_59":390,"_61":373,"_20":359,"_391":2848,"_398":2849,"_62":401},{"_59":393,"_69":70,"_61":394,"_62":395,"_396":395,"_397":359},[400],{"_403":943,"_405":943},{"_8":304,"_2852":2853,"_86":2854,"_18":305,"_20":306,"_12":307,"_23":308,"_2855":2856,"_2857":2858,"_330":2859,"_25":309,"_27":2860,"_104":2876},"count",10,"Discover the power of front-end frameworks like React, Vue, Angular, and Svelte. Learn how to build dynamic user interfaces and manage complex state with ease.","parent",0,"meta",[],[],{"_29":311,"_86":312,"_31":2861,"_41":305,"_42":43,"_44":45,"_46":311,"_314":312,"_47":305,"_48":49,"_50":51,"_52":2862},{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":2863},[2864,2867,2871],{"_59":60,"_61":305,"_62":305,"_20":311,"_63":2865,"_86":312,"_66":2866,"_69":70},{"_61":65},{"_61":320},{"_59":72,"_61":320,"_73":2868},[2869,2870],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":306},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":2872,"_69":70},[2873],{"_59":91,"_92":2874,"_97":2875},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_106":2877,"_116":2881,"_120":2883,"_124":2885,"_128":2887},[2878],{"_109":335,"_111":2879},{"_113":2880},[115],[2882],{"_109":340},[2884],{"_109":343},[2886],{"_109":346},[2888],{"_20":131,"_109":132,"_133":101},[2890,2931,2973,3014,3056,3088,3131,3173,3213,3254],{"_8":2891,"_2852":2856,"_86":943,"_18":2892,"_20":2893,"_12":2894,"_23":308,"_2855":2856,"_2857":2895,"_330":2896,"_25":2897,"_27":2898,"_104":2916},155,"https://blog.fulldev.pl/category/ai/","AI","ai",[],[],"\nAI - Fulldev\n\n\n\n\n\n\n\n\n\n\n\n",{"_29":2899,"_86":312,"_31":2900,"_41":2892,"_42":43,"_44":45,"_46":2899,"_314":312,"_47":2892,"_48":49,"_50":51,"_52":2901},"AI - Fulldev",{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":2902},[2903,2907,2911],{"_59":60,"_61":2892,"_62":2892,"_20":2899,"_63":2904,"_86":312,"_66":2905,"_69":70},{"_61":65},{"_61":2906},"https://blog.fulldev.pl/category/ai/#breadcrumb",{"_59":72,"_61":2906,"_73":2908},[2909,2910],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":2893},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":2912,"_69":70},[2913],{"_59":91,"_92":2914,"_97":2915},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_106":2917,"_116":2922,"_120":2924,"_124":2926,"_128":2929},[2918],{"_109":2919,"_111":2920},"https://blog.fulldev.pl/wp-json/wp/v2/categories/155",{"_113":2921},[115],[2923],{"_109":340},[2925],{"_109":343},[2927],{"_109":2928},"https://blog.fulldev.pl/wp-json/wp/v2/posts?categories=155",[2930],{"_20":131,"_109":132,"_133":101},{"_8":2932,"_2852":2853,"_86":2933,"_18":2934,"_20":2935,"_12":2936,"_23":308,"_2855":2856,"_2857":2937,"_330":2938,"_25":2939,"_27":2940,"_104":2958},103,"Learn how to create robust servers, APIs, and connect to databases using technologies like Node.js, Express, MongoDB, and PostgreSQL. Everything you need to build the back-end of your apps.","https://blog.fulldev.pl/category/back-end-development/","Back-End Development","back-end-development",[],[],"\nBack-End Development - Fulldev\n\n\n\n\n\n\n\n\n\n\n\n",{"_29":2941,"_86":312,"_31":2942,"_41":2934,"_42":43,"_44":45,"_46":2941,"_314":312,"_47":2934,"_48":49,"_50":51,"_52":2943},"Back-End Development - Fulldev",{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":2944},[2945,2949,2953],{"_59":60,"_61":2934,"_62":2934,"_20":2941,"_63":2946,"_86":312,"_66":2947,"_69":70},{"_61":65},{"_61":2948},"https://blog.fulldev.pl/category/back-end-development/#breadcrumb",{"_59":72,"_61":2948,"_73":2950},[2951,2952],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":2935},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":2954,"_69":70},[2955],{"_59":91,"_92":2956,"_97":2957},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_106":2959,"_116":2964,"_120":2966,"_124":2968,"_128":2971},[2960],{"_109":2961,"_111":2962},"https://blog.fulldev.pl/wp-json/wp/v2/categories/103",{"_113":2963},[115],[2965],{"_109":340},[2967],{"_109":343},[2969],{"_109":2970},"https://blog.fulldev.pl/wp-json/wp/v2/posts?categories=103",[2972],{"_20":131,"_109":132,"_133":101},{"_8":2974,"_2852":2856,"_86":943,"_18":2975,"_20":2976,"_12":2977,"_23":308,"_2855":2856,"_2857":2978,"_330":2979,"_25":2980,"_27":2981,"_104":2999},154,"https://blog.fulldev.pl/category/blockchain/","Blockchain","blockchain",[],[],"\nBlockchain - Fulldev\n\n\n\n\n\n\n\n\n\n\n\n",{"_29":2982,"_86":312,"_31":2983,"_41":2975,"_42":43,"_44":45,"_46":2982,"_314":312,"_47":2975,"_48":49,"_50":51,"_52":2984},"Blockchain - Fulldev",{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":2985},[2986,2990,2994],{"_59":60,"_61":2975,"_62":2975,"_20":2982,"_63":2987,"_86":312,"_66":2988,"_69":70},{"_61":65},{"_61":2989},"https://blog.fulldev.pl/category/blockchain/#breadcrumb",{"_59":72,"_61":2989,"_73":2991},[2992,2993],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":2976},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":2995,"_69":70},[2996],{"_59":91,"_92":2997,"_97":2998},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_106":3000,"_116":3005,"_120":3007,"_124":3009,"_128":3012},[3001],{"_109":3002,"_111":3003},"https://blog.fulldev.pl/wp-json/wp/v2/categories/154",{"_113":3004},[115],[3006],{"_109":340},[3008],{"_109":343},[3010],{"_109":3011},"https://blog.fulldev.pl/wp-json/wp/v2/posts?categories=154",[3013],{"_20":131,"_109":132,"_133":101},{"_8":3015,"_2852":2856,"_86":3016,"_18":3017,"_20":3018,"_12":3019,"_23":308,"_2855":2856,"_2857":3020,"_330":3021,"_25":3022,"_27":3023,"_104":3041},105,"Learn how to deploy your applications using modern DevOps tools and cloud platforms. Get started with Git, Docker, CI/CD pipelines, and site hosting best practices.","https://blog.fulldev.pl/category/devops-deployment/","DevOps & Deployment","devops-deployment",[],[],"\nDevOps & Deployment - Fulldev\n\n\n\n\n\n\n\n\n\n\n\n",{"_29":3024,"_86":312,"_31":3025,"_41":3017,"_42":43,"_44":45,"_46":3024,"_314":312,"_47":3017,"_48":49,"_50":51,"_52":3026},"DevOps & Deployment - Fulldev",{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":3027},[3028,3032,3036],{"_59":60,"_61":3017,"_62":3017,"_20":3024,"_63":3029,"_86":312,"_66":3030,"_69":70},{"_61":65},{"_61":3031},"https://blog.fulldev.pl/category/devops-deployment/#breadcrumb",{"_59":72,"_61":3031,"_73":3033},[3034,3035],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":3018},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":3037,"_69":70},[3038],{"_59":91,"_92":3039,"_97":3040},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_106":3042,"_116":3047,"_120":3049,"_124":3051,"_128":3054},[3043],{"_109":3044,"_111":3045},"https://blog.fulldev.pl/wp-json/wp/v2/categories/105",{"_113":3046},[115],[3048],{"_109":340},[3050],{"_109":343},[3052],{"_109":3053},"https://blog.fulldev.pl/wp-json/wp/v2/posts?categories=105",[3055],{"_20":131,"_109":132,"_133":101},{"_8":304,"_2852":2853,"_86":2854,"_18":305,"_20":306,"_12":307,"_23":308,"_2855":2856,"_2857":3057,"_330":3058,"_25":309,"_27":3059,"_104":3075},[],[],{"_29":311,"_86":312,"_31":3060,"_41":305,"_42":43,"_44":45,"_46":311,"_314":312,"_47":305,"_48":49,"_50":51,"_52":3061},{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":3062},[3063,3066,3070],{"_59":60,"_61":305,"_62":305,"_20":311,"_63":3064,"_86":312,"_66":3065,"_69":70},{"_61":65},{"_61":320},{"_59":72,"_61":320,"_73":3067},[3068,3069],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":306},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":3071,"_69":70},[3072],{"_59":91,"_92":3073,"_97":3074},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_106":3076,"_116":3080,"_120":3082,"_124":3084,"_128":3086},[3077],{"_109":335,"_111":3078},{"_113":3079},[115],[3081],{"_109":340},[3083],{"_109":343},[3085],{"_109":346},[3087],{"_20":131,"_109":132,"_133":101},{"_8":3089,"_2852":3090,"_86":3091,"_18":3092,"_20":3093,"_12":3094,"_23":308,"_2855":2856,"_2857":3095,"_330":3096,"_25":3097,"_27":3098,"_104":3116},104,6,"Get hands-on with full-stack projects that combine front-end and back-end skills. Master popular stacks like MERN and Jamstack while building real-world apps.","https://blog.fulldev.pl/category/full-stack-development/","Full-Stack Development","full-stack-development",[],[],"\nFull-Stack Development - Fulldev\n\n\n\n\n\n\n\n\n\n\n\n",{"_29":3099,"_86":312,"_31":3100,"_41":3092,"_42":43,"_44":45,"_46":3099,"_314":312,"_47":3092,"_48":49,"_50":51,"_52":3101},"Full-Stack Development - Fulldev",{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":3102},[3103,3107,3111],{"_59":60,"_61":3092,"_62":3092,"_20":3099,"_63":3104,"_86":312,"_66":3105,"_69":70},{"_61":65},{"_61":3106},"https://blog.fulldev.pl/category/full-stack-development/#breadcrumb",{"_59":72,"_61":3106,"_73":3108},[3109,3110],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":3093},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":3112,"_69":70},[3113],{"_59":91,"_92":3114,"_97":3115},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_106":3117,"_116":3122,"_120":3124,"_124":3126,"_128":3129},[3118],{"_109":3119,"_111":3120},"https://blog.fulldev.pl/wp-json/wp/v2/categories/104",{"_113":3121},[115],[3123],{"_109":340},[3125],{"_109":343},[3127],{"_109":3128},"https://blog.fulldev.pl/wp-json/wp/v2/posts?categories=104",[3130],{"_20":131,"_109":132,"_133":101},{"_8":3132,"_2852":2853,"_86":3133,"_18":3134,"_20":3135,"_12":3136,"_23":308,"_2855":2856,"_2857":3137,"_330":3138,"_25":3139,"_27":3140,"_104":3158},3,"Explore the building blocks of the web. Learn how to create responsive layouts, write semantic HTML, and style your projects using modern CSS techniques like Flexbox, Grid, and animations.","https://blog.fulldev.pl/category/html-css/","HTML & CSS","html-css",[],[],"\nHTML & CSS - Fulldev\n\n\n\n\n\n\n\n\n\n\n\n",{"_29":3141,"_86":312,"_31":3142,"_41":3134,"_42":43,"_44":45,"_46":3141,"_314":312,"_47":3134,"_48":49,"_50":51,"_52":3143},"HTML & CSS - Fulldev",{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":3144},[3145,3149,3153],{"_59":60,"_61":3134,"_62":3134,"_20":3141,"_63":3146,"_86":312,"_66":3147,"_69":70},{"_61":65},{"_61":3148},"https://blog.fulldev.pl/category/html-css/#breadcrumb",{"_59":72,"_61":3148,"_73":3150},[3151,3152],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":3135},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":3154,"_69":70},[3155],{"_59":91,"_92":3156,"_97":3157},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_106":3159,"_116":3164,"_120":3166,"_124":3168,"_128":3171},[3160],{"_109":3161,"_111":3162},"https://blog.fulldev.pl/wp-json/wp/v2/categories/3",{"_113":3163},[115],[3165],{"_109":340},[3167],{"_109":343},[3169],{"_109":3170},"https://blog.fulldev.pl/wp-json/wp/v2/posts?categories=3",[3172],{"_20":131,"_109":132,"_133":101},{"_8":3174,"_2852":2853,"_86":3175,"_18":3176,"_20":444,"_12":445,"_23":308,"_2855":2856,"_2857":3177,"_330":3178,"_25":3179,"_27":3180,"_104":3198},16,"Master the core language of the web. From basic syntax to advanced features like ES6+, async/await, and DOM manipulation – this category helps you understand JavaScript inside out.","https://blog.fulldev.pl/category/javascript/",[],[],"\nJavaScript - Fulldev\n\n\n\n\n\n\n\n\n\n\n\n",{"_29":3181,"_86":312,"_31":3182,"_41":3176,"_42":43,"_44":45,"_46":3181,"_314":312,"_47":3176,"_48":49,"_50":51,"_52":3183},"JavaScript - Fulldev",{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":3184},[3185,3189,3193],{"_59":60,"_61":3176,"_62":3176,"_20":3181,"_63":3186,"_86":312,"_66":3187,"_69":70},{"_61":65},{"_61":3188},"https://blog.fulldev.pl/category/javascript/#breadcrumb",{"_59":72,"_61":3188,"_73":3190},[3191,3192],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":444},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":3194,"_69":70},[3195],{"_59":91,"_92":3196,"_97":3197},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_106":3199,"_116":3204,"_120":3206,"_124":3208,"_128":3211},[3200],{"_109":3201,"_111":3202},"https://blog.fulldev.pl/wp-json/wp/v2/categories/16",{"_113":3203},[115],[3205],{"_109":340},[3207],{"_109":343},[3209],{"_109":3210},"https://blog.fulldev.pl/wp-json/wp/v2/posts?categories=16",[3212],{"_20":131,"_109":132,"_133":101},{"_8":3214,"_2852":2856,"_86":943,"_18":3215,"_20":3216,"_12":3217,"_23":308,"_2855":2856,"_2857":3218,"_330":3219,"_25":3220,"_27":3221,"_104":3239},102,"https://blog.fulldev.pl/category/python/","Python","python",[],[],"\nPython - Fulldev\n\n\n\n\n\n\n\n\n\n\n\n",{"_29":3222,"_86":312,"_31":3223,"_41":3215,"_42":43,"_44":45,"_46":3222,"_314":312,"_47":3215,"_48":49,"_50":51,"_52":3224},"Python - Fulldev",{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":3225},[3226,3230,3234],{"_59":60,"_61":3215,"_62":3215,"_20":3222,"_63":3227,"_86":312,"_66":3228,"_69":70},{"_61":65},{"_61":3229},"https://blog.fulldev.pl/category/python/#breadcrumb",{"_59":72,"_61":3229,"_73":3231},[3232,3233],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":3216},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":3235,"_69":70},[3236],{"_59":91,"_92":3237,"_97":3238},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_106":3240,"_116":3245,"_120":3247,"_124":3249,"_128":3252},[3241],{"_109":3242,"_111":3243},"https://blog.fulldev.pl/wp-json/wp/v2/categories/102",{"_113":3244},[115],[3246],{"_109":340},[3248],{"_109":343},[3250],{"_109":3251},"https://blog.fulldev.pl/wp-json/wp/v2/posts?categories=102",[3253],{"_20":131,"_109":132,"_133":101},{"_8":3255,"_2852":2856,"_86":943,"_18":3256,"_20":3257,"_12":3258,"_23":308,"_2855":2856,"_2857":3259,"_330":3260,"_25":3261,"_27":3262,"_104":3280},100,"https://blog.fulldev.pl/category/shopify/","Shopify","shopify",[],[],"\nShopify - Fulldev\n\n\n\n\n\n\n\n\n\n\n\n",{"_29":3263,"_86":312,"_31":3264,"_41":3256,"_42":43,"_44":45,"_46":3263,"_314":312,"_47":3256,"_48":49,"_50":51,"_52":3265},"Shopify - Fulldev",{"_33":33,"_34":34,"_35":36,"_37":38,"_39":40},{"_54":55,"_56":3266},[3267,3271,3275],{"_59":60,"_61":3256,"_62":3256,"_20":3263,"_63":3268,"_86":312,"_66":3269,"_69":70},{"_61":65},{"_61":3270},"https://blog.fulldev.pl/category/shopify/#breadcrumb",{"_59":72,"_61":3270,"_73":3272},[3273,3274],{"_59":76,"_77":78,"_20":79,"_80":81},{"_59":76,"_77":83,"_20":3257},{"_59":85,"_61":65,"_62":81,"_20":49,"_86":87,"_88":3276,"_69":70},[3277],{"_59":91,"_92":3278,"_97":3279},{"_59":94,"_95":96},{"_59":99,"_100":101,"_102":103},{"_106":3281,"_116":3286,"_120":3288,"_124":3290,"_128":3293},[3282],{"_109":3283,"_111":3284},"https://blog.fulldev.pl/wp-json/wp/v2/categories/100",{"_113":3285},[115],[3287],{"_109":340},[3289],{"_109":343},[3291],{"_109":3292},"https://blog.fulldev.pl/wp-json/wp/v2/posts?categories=100",[3294],{"_20":131,"_109":132,"_133":101},"actionData","errors"]

Understanding the Angular Component Lifecycle

What Is a Component Lifecycle?

Major Lifecycle Hooks in Angular

Lifecycle Hook Example

Lifecycle Hook Order

When to Use Each Lifecycle Hook

Tips for Working with Lifecycle Hooks

Conclusion

Why Choose Vite for Vue.js?

Prerequisites

Step 1: Creating a New Vite + Vue Project

Step 2: Running the Development Server

Step 3: Understanding the Project Structure

Sample vite.config.js for Vue

Step 4: Installing Additional Dependencies

Step 5: Production Build & Deployment

Troubleshooting & Tips

Conclusion

Introduction

React: The UI Library Powerhouse

Overview

Pros

Cons

Sample Code (React Component)

Vue.js: The Progressive Framework

Overview

Pros

Cons

Sample Code (Vue Component)

Angular: The All-In-One Framework

Overview

Pros

Cons

Sample Code (Angular Component)

When Should You Use Each?

Conclusion

Introduction

Why Use Tailwind CSS with React?

Step 1: Setting Up a React Project

Step 2: Installing Tailwind CSS

Step 3: Configuring Tailwind CSS

Step 4: Add Tailwind to Your CSS

Step 5: Using Tailwind in React Components

Best Practices

Conclusion

Introduction

What is Svelte?

Why Beginners Love Svelte

Basic Example: Your First Svelte Component

How to Start with Svelte

Set Up Your First Project

When Should You Choose Svelte?

Conclusion

Introduction

What is State in React?

Local vs. Global State

Using useState for Local State

When to Use useReducer

Lifting State Up

Context API for Global State

When to Use External State Libraries

Best Practices for State Management in React

Conclusion

Introduction

Why Use Bootstrap 5?

Step 1: Setting Up Bootstrap 5

Option 1: CDN

Option 2: Using npm

Step 2: Understanding the Bootstrap 5 Grid

Step 3: Using Bootstrap Components

Button Example

Navbar Example

Card Example

Step 4: Customize Bootstrap

Conclusion

Introduction

Why Use React?

Setting Up the Development Environment

Option 1: Using Create React App

Option 2: Using Vite (Faster builds)

Sample `vite.config.js` for Vue

Using `useState` for Local State

When to Use `useReducer`

Adding State with `useState`

1. `ref()` – Reactive Variables

2. `reactive()` – Reactive State Objects

3. `computed()` – Derived Data

4. `watch()` – React to Changes