Top 10 JavaScript Frameworks to Learn in 2025

 

Introduction: Why JavaScript Frameworks Matter in 2025

In the fast-paced world of web development, JavaScript continues to dominate as the language of choice for both frontend and backend applications. As we dive into 2025, frameworks and libraries have evolved to handle everything from lightning-fast user interfaces to scalable server-side logic. Whether you're building a simple blog, an e-commerce platform, or a real-time collaboration tool, these tools can accelerate development, improve performance, and enhance maintainability.

This comprehensive guide explores the top 10 JavaScript frameworks and libraries for frontend and backend development. We've selected them based on popularity, community support, performance metrics, and emerging trends from sources like Stack Overflow surveys, GitHub stars, and industry reports up to September 2025. The list includes stalwarts like React and Next.js, alongside rising stars like Astro and SolidJS.

For each framework/library, we'll cover:

• Overview: What it is and its real-world applications.
• Pros and Cons: Honest evaluation.
• Alternatives: What else you could use.
• Best Practices and Standards: Tips for efficient, secure coding.
• Tutorials: From basic to advanced scenarios, with interactive, realistic examples and code snippets.
• Examples: Multiple code samples tied to real-life use cases, like building a todo app or an API for a social media platform.

This blog is designed for all readers—beginners starting with "Hello World," intermediates tackling state management, and experts optimizing for production. We'll use real-life scenarios, such as developing a freelance marketplace or a health tracking app, to make concepts engaging and practical. Let's get started!

Module 1: React - The King of Component-Based Frontend Development

React, developed by Facebook (now Meta), is a declarative library for building user interfaces. In 2025, it's still the most used frontend tool, powering apps like Netflix and Airbnb. It's ideal for single-page applications (SPAs) where dynamic UI updates are key.

Pros and Cons

Pros:

• Component reusability speeds up development.
• Huge ecosystem with hooks, Redux, and React Native for mobile.
• Virtual DOM for efficient rendering.
• Strong community and job market demand.

Cons:

• Steep learning curve for state management.
• Not a full framework—requires additional libraries for routing, etc.
• Potential overkill for simple static sites.
• Boilerplate code can accumulate without discipline.

Alternatives

• Vue.js: For lighter, more flexible reactivity.
• Svelte: Compile-time optimization for smaller bundles.
• Angular: If you need a full-featured framework with built-in tools.

Best Practices and Standards

• Use functional components with hooks over class components (ESLint rule: react/prefer-stateless-function).
• Follow accessibility standards (ARIA attributes) for inclusive apps.
• Implement code splitting for performance (Webpack or Vite).
• Use TypeScript for type safety in large projects.
• Adhere to React's one-way data flow to avoid bugs.

Basic Tutorial: Setting Up a Simple Todo App

Start with the basics: Install React via Create React App (CRA) or Vite for faster setups in 2025.

Real-life scenario: You're a freelancer building a task manager for clients.

1. Install: npx create-react-app my-todo-app or npm init vite@latest.
2. Basic component:

jsx

// App.js

import React, { useState } from 'react';

function App() {

const [todos, setTodos] = useState([]);

const [input, setInput] = useState('');

const addTodo = () => {

if (input) {

setTodos([...todos, input]);

setInput('');

}

};

return (

<div>

<h1>Todo App</h1>

<input value={input} onChange={(e) => setInput(e.target.value)} />

<button onClick={addTodo}>Add</button>

<ul>

{todos.map((todo, index) => <li key={index}>{todo}</li>)}

</ul>

</div>

);

}

export default App;

This uses useState for local state—basic interactivity.

Advanced Scenario: Integrating API Calls and State Management

For a health tracking app (real-life: User logs workouts, fetches data from a backend).

Use Redux or Context API for global state. Here's with Context and fetch:

jsx

// context/WorkoutContext.js

import React, { createContext, useState, useEffect } from 'react';

export const WorkoutContext = createContext();

export function WorkoutProvider({ children }) {

const [workouts, setWorkouts] = useState([]);

useEffect(() => {

fetch('https://api.example.com/workouts')

.then(res => res.json())

.then(data => setWorkouts(data));

}, []);

const addWorkout = (newWorkout) => {

setWorkouts([...workouts, newWorkout]);

// POST to API

};

return (

<WorkoutContext.Provider value={{ workouts, addWorkout }}>

{children}

</WorkoutContext.Provider>

);

}

Wrap App in Provider. Best practice: Handle errors with try-catch in async functions.

Additional Examples

1. Counter with Hooks (Basic): Interactive button counter for a shopping cart.

jsx

function Counter() {

const [count, setCount] = useState(0);

return <button onClick={() => setCount(count + 1)}>{count} Items</button>;

}

2. Form Validation (Intermediate): Real-life user registration.

jsx

function RegisterForm() {

const [email, setEmail] = useState('');

const [error, setError] = useState('');

const validate = () => {

if (!email.includes('@')) setError('Invalid email');

else setError('');

};

return (

<>

<input value={email} onChange={(e) => setEmail(e.target.value)} onBlur={validate} />

{error && <p>{error}</p>}

</>

);

}

3. Lazy Loading Images (Advanced): For a photo gallery app, using React.lazy and Suspense.

jsx

const LazyImage = React.lazy(() => import('./ImageComponent'));

function Gallery() {

return (

<Suspense fallback={<div>Loading...</div>}>

<LazyImage src="https://example.com/image.jpg" />

</Suspense>

);

}

This optimizes load times for large apps.

Module 2: Next.js - Server-Side Rendering Powerhouse for React

Next.js is a React framework for production-grade apps, emphasizing SSR, SSG, and API routes. In 2025, with App Router stable, it's perfect for e-commerce sites like Shopify integrations.

Pros and Cons

Pros:

• Built-in SSR/SSG for SEO and performance.
• API routes for full-stack without separate backend.
• Image optimization and internationalized routing.
• Vercel deployment ease.

Cons:

• Learning curve for routing and data fetching.
• Less flexible than pure React for custom setups.
• Build times can be longer for large sites.
• Dependency on React ecosystem.

Alternatives

• Gatsby: For static sites with GraphQL.
• Remix: Run-focused, great for data mutations.
• Nuxt.js: If you're in Vue ecosystem.

Best Practices and Standards

• Use App Router over Pages Router for future-proofing.
• Implement getStaticProps/getServerSideProps wisely to avoid over-fetching.
• Follow Next.js security headers (e.g., CSP) for production.
• Use TypeScript and ESLint for maintainability.
• Optimize with next/image and lazy loading.

Basic Tutorial: Building a Static Blog

Real-life: A personal portfolio blog.

1. Install: npx create-next-app@latest my-blog.
2. Page example:

jsx

// pages/index.js

export default function Home() {

return <h1>Welcome to My Blog</h1>;

}

Run npm run dev—instant server.

Add dynamic route:

jsx

// pages/posts/[id].js

import { useRouter } from 'next/router';

export default function Post() {

const router = useRouter();

const { id } = router.query;

return <h1>Post {id}</h1>;

}

Advanced Scenario: Full-Stack E-Commerce with API Routes

For a freelance marketplace (real-life: Sellers list products, buyers browse).

API route:

js

// pages/api/products.js

export default function handler(req, res) {

if (req.method === 'GET') {

res.status(200).json([{ id: 1, name: 'Product A' }]);

} else if (req.method === 'POST') {

// Add product logic

res.status(201).json({ message: 'Added' });

}

}

Client-side fetch in component:

jsx

// components/ProductList.js

import { useEffect, useState } from 'react';

function ProductList() {

const [products, setProducts] = useState([]);

useEffect(() => {

fetch('/api/products')

.then(res => res.json())

.then(setProducts);

}, []);

return (

<ul>

{products.map(p => <li key={p.id}>{p.name}</li>)}

</ul>

);

}

Best practice: Use SWR or React Query for caching.

Additional Examples

1. Static Generation (Basic): Pre-render pages.

js

// pages/posts.js

export async function getStaticProps() {

const data = await fetch('https://api.example.com/posts').then(res => res.json());

return { props: { posts: data } };

}

export default function Posts({ posts }) {

return <ul>{posts.map(p => <li key={p.id}>{p.title}</li>)}</ul>;

}

2. Authentication (Intermediate): With NextAuth. Install next-auth, then:

js

// pages/api/auth/[...nextauth].js

import NextAuth from 'next-auth';

export default NextAuth({

providers: [/* Credentials, Google, etc. */],

});

3. Dynamic Imports (Advanced): For code splitting.

jsx

import dynamic from 'next/dynamic';

const DynamicComponent = dynamic(() => import('../components/HeavyComponent'));

Module 3: Vue.js - Progressive Framework for Intuitive UIs

Vue.js is a flexible framework for building interactive UIs, known for its gentle learning curve. In 2025, Vue 3 with Composition API is standard, used in apps like Alibaba.

Pros and Cons

Pros:

• Easy to learn and integrate progressively.
• Reactive data binding with minimal boilerplate.
• Small size (20KB min+gzip).
• Excellent for both SPAs and multi-page apps.

Cons:

• Smaller community than React.
• Fragmented ecosystem for advanced features.
• Template syntax can feel limiting for complex logic.
• Performance overhead in very large apps without optimization.

Alternatives

• React: For more component-focused development.
• Angular: For enterprise-scale with dependency injection.
• Svelte: If you want compile-time magic.

Best Practices and Standards

• Use Composition API for reusable logic.
• Follow Vue Style Guide for consistent code.
• Implement slots and provide/inject for component communication.
• Use Pinia for state management over Vuex in new projects.
• Ensure SSR with Nuxt for SEO.

Basic Tutorial: Interactive Counter App

Real-life: A voting system for a community forum.

Install: npm init vue@latest.

vue

<!-- App.vue -->

<script setup>

import { ref } from 'vue';

const count = ref(0);

</script>

<template>

<button @click="count++">Count: {{ count }}</button>

</template>

Advanced Scenario: Form Handling with Validation

For a job application portal (real-life: Users submit resumes).

Use Vuelidate for validation.

Install: npm install @vuelidate/core @vuelidate/validators

vue

<script setup>

import { ref } from 'vue';

import useVuelidate from '@vuelidate/core';

import { required, email } from '@vuelidate/validators';

const form = ref({ email: '' });

const rules = { email: { required, email } };

const v$ = useVuelidate(rules, form);

</script>

<template>

<input v-model="form.email" />

<button @click="v$.$validate()">Submit</button>

<p v-if="v$.email.$error">Invalid email</p>

</template>

Additional Examples

1. List Rendering (Basic): Todo list.

vue

<script setup>

import { ref } from 'vue';

const todos = ref(['Task 1', 'Task 2']);

</script>

<template>

<ul>

<li v-for="todo in todos" :key="todo">{{ todo }}</li>

</ul>

</template>

2. Computed Properties (Intermediate): Real-time search filter for products.

vue

<script setup>

import { ref, computed } from 'vue';

const search = ref('');

const products = ref(['Apple', 'Banana', 'Cherry']);

const filtered = computed(() => products.value.filter(p => p.includes(search.value)));

</script>

<template>

<input v-model="search" />

<ul><li v-for="p in filtered" :key="p">{{ p }}</li></ul>

</template>

3. Custom Directives (Advanced): Focus directive for accessibility.

vue

<script>

const focus = {

mounted(el) { el.focus(); }

};

</script>

<template>

<input v-focus />

</template>

Module 4: Nuxt.js - Vue's Full-Stack Companion

Nuxt.js is a meta-framework for Vue, similar to Next.js for React. In 2025, Nuxt 3 with Nitro engine excels in universal apps, like content-heavy sites.

Pros and Cons

Pros:

• Automatic code splitting and prefetching.
• Built-in SSR, static generation, and API handling.
• Modules for easy extensions (e.g., content, auth).
• Great for SEO-driven projects.

Cons:

• Overhead for simple Vue apps.
• Configuration can be complex.
• Tied to Vue ecosystem.
• Slower builds for massive sites.

Alternatives

• Next.js: For React users.
• SvelteKit: Lighter alternative.
• Gatsby: Static-focused.

Best Practices and Standards

• Use auto-imports for components.
• Leverage useAsyncData for server fetching.
• Implement middleware for auth.
• Follow Nuxt's layering for scalable architecture.
• Use TypeScript for robust typing.

Basic Tutorial: Simple Page Setup

Real-life: A news aggregator site.

Install: npx nuxi@latest init my-nuxt-app.

vue

<!-- pages/index.vue -->

<template>

<h1>News Home</h1>

</template>

Advanced Scenario: API Integration for Social Feed

For a social media dashboard (real-life: Fetch user posts).

vue

<!-- pages/feed.vue -->

<script setup>

const { data: posts } = await useAsyncData('posts', () => $fetch('/api/posts'));

</script>

<template>

<ul>

<li v-for="post in posts" :key="post.id">{{ post.title }}</li>

</ul>

</template>

Server API:

js

// server/api/posts.js

export default defineEventHandler(() => {

return [{ id: 1, title: 'Post 1' }];

});

Additional Examples

1. Static Generation (Basic): Use generate mode for pre-building.
2. Authentication (Intermediate): With Nuxt Auth module. Install @nuxtjs/auth-next, configure providers.
3. Dynamic Routes (Advanced):

vue

<!-- pages/users/[id].vue -->

<script setup>

const { params } = useRoute();

const { data: user } = await useAsyncData(`user-${params.id}`, () => $fetch(`/api/users/${params.id}`));

</script>

Module 5: Angular - Enterprise-Ready Full Framework

Angular, from Google, is a comprehensive framework for large-scale apps. In 2025, Angular 18+ with signals brings reactivity improvements, used in enterprise like IBM.

Pros and Cons

Pros:

• Built-in everything: Routing, forms, HTTP.
• Dependency injection for testable code.
• Strong typing with TypeScript.
• CLI for scaffolding.

Cons:

• Steep learning curve.
• Larger bundle sizes.
• Verbose code.
• Slower for small projects.

Alternatives

• React: More lightweight.
• Vue: Easier entry.
• Blazor: If moving to .NET.

Best Practices and Standards

• Use standalone components in Angular 17+.
• Follow Angular Style Guide.
• Implement lazy loading modules.
• Use RxJS for observables efficiently.
• Secure with built-in sanitization.

Basic Tutorial: Hello World App

Real-life: Internal dashboard for a company.

Install: npm install -g @angular/cli, then ng new my-app.

ts

// app.component.ts

import { Component } from '@angular/core';

@Component({

selector: 'app-root',

template: `<h1>Hello {{title}}</h1>`,

})

export class AppComponent {

title = 'Angular';

}

Advanced Scenario: Reactive Forms with API

For a banking app (real-life: Transaction form).

ts

// app.module.ts

import { ReactiveFormsModule } from '@angular/forms';

import { HttpClientModule } from '@angular/common/http';

// transaction.component.ts

import { FormBuilder, Validators } from '@angular/forms';

import { HttpClient } from '@angular/common/http';

@Component({

template: `

<form [formGroup]="form" (ngSubmit)="submit()">

<input formControlName="amount" />

<button type="submit">Send</button>

</form>

`

})

export class TransactionComponent {

form = this.fb.group({ amount: ['', Validators.required] });

constructor(private fb: FormBuilder, private http: HttpClient) {}

submit() {

if (this.form.valid) {

this.http.post('/api/transactions', this.form.value).subscribe();

}

}

}

Additional Examples

1. Directives (Basic): Custom highlighter.

ts

@Directive({ selector: '[appHighlight]' })

export class HighlightDirective {

@HostBinding('style.backgroundColor') bg = 'yellow';

}

2. Services (Intermediate): Shared data service.

ts

@Injectable({ providedIn: 'root' })

export class DataService {

data = new BehaviorSubject<string>('Initial');

}

3. Routing Guards (Advanced): Auth guard.

ts

@Injectable()

export class AuthGuard implements CanActivate {

canActivate() {

return true; // Check auth

}

}

Module 6: Svelte - Compile-Time Framework for Efficient Apps

Svelte shifts work to compile time, resulting in tiny bundles. In 2025, Svelte 5 with runes is mature, great for interactive sites like games.

Pros and Cons

Pros:

• No virtual DOM—faster runtime.
• Simple syntax, less code.
• Built-in transitions and stores.
• Easy to learn.

Cons:

• Smaller ecosystem.
• Tooling less mature than React.
• Compile step adds build time.
• Less suitable for huge teams.

Alternatives

• React: Larger community.
• SolidJS: Similar reactivity.
• Vue: Progressive adoption.

Best Practices and Standards

• Use runes for reactivity in Svelte 5.
• Leverage SvelteKit for full apps.
• Follow accessibility with svelte-a11y.
• Optimize with code splitting.
• Test with Vitest.

Basic Tutorial: Reactive Counter

Real-life: Live poll in an event app.

Install: npm create svelte@latest my-app.

svelte

<script>

let count = 0;

</script>

<button on:click={() => count++}>Count: {count}</button>

Advanced Scenario: Store Management for Cart

For an online store (real-life: Shopping cart updates).

Use writable store.

svelte

<script>

import { writable } from 'svelte/store';

const cart = writable([]);

function addItem(item) {

cart.update(items => [...items, item]);

}

</script>

<button on:click={() => addItem('Product')}>Add</button>

<ul>

{#each $cart as item}

<li>{item}</li>

{/each}

</ul>

Additional Examples

1. Bindings (Basic): Two-way input.

svelte

<script>

let name = '';

</script>

<input bind:value={name} />

<p>Hello {name}</p>

2. Transitions (Intermediate): Fade effect.

svelte

<script>

import { fade } from 'svelte/transition';

let visible = true;

</script>

<button on:click={() => visible = !visible}>Toggle</button>

{#if visible}

<p transition:fade>Content</p>

{/if}

3. Actions (Advanced): Custom resize action.

svelte

<script>

function resizable(node) {

// Resize logic

return { destroy() {} };

}

</script>

<div use:resizable>Resizable</div>

Module 7: Express.js - Minimalist Backend Framework

Express is a fast, unopinionated web framework for Node.js. In 2025, it's still foundational for APIs, powering microservices in companies like Uber.

Pros and Cons

Pros:

• Lightweight and flexible.
• Middleware ecosystem.
• Easy routing and HTTP utilities.
• Great for quick prototypes.

Cons:

• No built-in structure—can lead to spaghetti code.
• Requires additional modules for common tasks.
• Not as scalable out-of-box as NestJS.
• Security setup manual.

Alternatives

• Koa: Cleaner middleware.
• Fastify: Faster performance.
• NestJS: For structured apps.

Best Practices and Standards

• Use helmet for security headers.
• Implement error handling middleware.
• Use environment variables (dotenv).
• Follow RESTful standards.
• Test with Jest/Supertest.

Basic Tutorial: Simple API Server

Real-life: Backend for a blog API.

Install: npm init -y; npm i express.

js

const express = require('express');

const app = express();

app.use(express.json());

app.get('/', (req, res) => res.send('Hello World'));

app.listen(3000, () => console.log('Server running'));

Advanced Scenario: CRUD Operations with Database

For a task management app (real-life: Integrate with MongoDB).

Install mongoose.

js

const mongoose = require('mongoose');

mongoose.connect('mongodb://localhost/tasks');

const Task = mongoose.model('Task', { name: String });

app.post('/tasks', async (req, res) => {

const task = new Task(req.body);

await task.save();

res.send(task);

});

app.get('/tasks', async (req, res) => {

const tasks = await Task.find();

res.send(tasks);

});

Additional Examples

1. Middleware (Basic): Logging.

js

app.use((req, res, next) => {

console.log(`${req.method} ${req.url}`);

next();

});

2. Routing (Intermediate): Grouped routes.

js

const router = express.Router();

router.get('/', (req, res) => res.send('Tasks'));

app.use('/tasks', router);

3. Authentication (Advanced): JWT with express-jwt. Install jsonwebtoken, express-jwt.

js

const jwt = require('jsonwebtoken');

app.post('/login', (req, res) => {

const token = jwt.sign({ user: 'id' }, 'secret');

res.send({ token });

});

Module 8: NestJS - Structured Backend Framework

NestJS is a progressive Node.js framework for efficient, scalable servers. In 2025, with GraphQL and microservices support, it's ideal for enterprise APIs.

Pros and Cons

Pros:

• Modular architecture with decorators.
• Built-in TypeScript support.
• Integrates with ORMs like TypeORM.
• Excellent for monoliths or microservices.

Cons:

• Opinionated—less flexible.
• Learning curve for decorators.
• Heavier than Express.
• Overhead for tiny APIs.

Alternatives

• Express: Lighter.
• AdonisJS: Laravel-like.
• Fastify: Performance-focused.

Best Practices and Standards

• Use modules for organization.
• Implement guards and interceptors for security.
• Follow SOLID principles.
• Use Swagger for API docs.
• Containerize with Docker.

Basic Tutorial: Hello World API

Real-life: User service for an app.

Install: npm i -g @nestjs/cli; nest new my-app.

ts

// app.controller.ts

import { Controller, Get } from '@nestjs/common';

@Controller()

export class AppController {

@Get()

getHello(): string {

return 'Hello World';

}

}

Advanced Scenario: CRUD with Prisma ORM

For a e-learning platform (real-life: Manage courses).

Install @nestjs/prisma, prisma.

ts

// course.module.ts

import { PrismaService } from './prisma.service';

// course.service.ts

import { Injectable } from '@nestjs/common';

@Injectable()

export class CourseService {

constructor(private prisma: PrismaService) {}

async create(data) {

return this.prisma.course.create({ data });

}

}

// course.controller.ts

import { Post, Body } from '@nestjs/common';

@Controller('courses')

export class CourseController {

constructor(private service: CourseService) {}

@Post()

create(@Body() data) {

return this.service.create(data);

}

}

Additional Examples

1. Validation (Basic): DTO with class-validator.

ts

import { IsString } from 'class-validator';

export class CreateCourseDto {

@IsString()

title: string;

}

2. Guards (Intermediate): Auth guard.

ts

import { CanActivate, ExecutionContext } from '@nestjs/common';

@Injectable()

export class AuthGuard implements CanActivate {

canActivate(context: ExecutionContext) {

// Check token

return true;

}

}

3. Microservices (Advanced): Message pattern.

ts

@MessagePattern('add')

add(data: number[]): number {

return data.reduce((a, b) => a + b);

}

Module 9: Astro - Build Faster Websites with Islands Architecture

Astro is a modern frontend framework for content-driven sites. In 2025, Astro 4+ supports multiple frameworks, perfect for blogs and marketing sites.

Pros and Cons

Pros:

• Zero JS by default—fast loading.
• Islands for interactive parts.
• Integrates React/Vue/Svelte.
• Great for static/hybrid sites.

Cons:

• Not for heavy SPAs.
• Learning islands concept.
• Limited dynamic capabilities without SSR.
• Emerging ecosystem.

Alternatives

• Next.js: More full-stack.
• Gatsby: GraphQL-focused.
• Eleventy: Simpler static gen.

Best Practices and Standards

• Use islands sparingly for interactivity.
• Leverage content collections for MDX.
• Optimize images with astro:assets.
• Follow web vitals for performance.
• Use TypeScript for safety.

Basic Tutorial: Static Page

Real-life: Portfolio site.

Install: npm create astro@latest.

astro

---

// frontmatter

const title = 'Home';

---

<html>

<head><title>{title}</title></head>

<body><h1>Welcome</h1></body>

</html>

Advanced Scenario: Interactive Component with React Island

For a interactive quiz app (real-life: Educational site).

astro

---

import Quiz from '../components/Quiz.jsx';

---

<Quiz client:load />

Quiz.jsx:

jsx

import { useState } from 'react';

export default function Quiz() {

const [score, setScore] = useState(0);

return <button onClick={() => setScore(score + 1)}>Score: {score}</button>;

}

Additional Examples

1. Dynamic Data (Basic): Fetch in frontmatter.

astro

---

const data = await fetch('https://api.example.com').then(res => res.json());

---

<p>{data.message}</p>

2. Routing (Intermediate): File-based. Create pages/about.astro.
3. SSR (Advanced): Enable in astro.config.mjs.

js

export default defineConfig({

output: 'server'

});

Module 10: SolidJS - Reactive Library for Fine-Grained Updates

SolidJS offers React-like API with fine-grained reactivity, no VDOM. In 2025, Solid 2+ is gaining traction for performant apps like real-time dashboards.

Pros and Cons

Pros:

• Extremely fast updates.
• Small bundle size.
• Familiar syntax for React devs.
• Built-in stores and signals.

Cons:

• Smaller community.
• Less mature tooling.
• Debugging reactivity can be tricky.
• Not as feature-rich out-of-box.

Alternatives

• React: Broader adoption.
• Svelte: Similar performance.
• Preact: Lightweight React alt.

Best Practices and Standards

• Use signals for state.
• Avoid unnecessary effects.
• Integrate with SolidStart for full apps.
• Test with solid-testing-library.
• Follow JSX best practices.

Basic Tutorial: Signal-Based Counter

Real-life: Stock ticker update.

Install: npm init solid@latest.

jsx

import { createSignal } from 'solid-js';

function Counter() {

const [count, setCount] = createSignal(0);

return <button onClick={() => setCount(count() + 1)}>{count()}</button>;

}

Advanced Scenario: Store for Complex State

For a project management tool (real-life: Task dependencies).

jsx

import { createStore } from 'solid-js/store';

function Tasks() {

const [tasks, setTasks] = createStore([]);

const addTask = (task) => setTasks([...tasks, task]);

return (

<>

<button onClick={() => addTask({ name: 'New' })}>Add</button>

<ul>{tasks.map(t => <li>{t.name}</li>)}</ul>

</>

);

}

Additional Examples

1. Effects (Basic): Log changes.

jsx

import { createEffect } from 'solid-js';

createEffect(() => console.log(count()));

2. Resources (Intermediate): Async data.

jsx

import { createResource } from 'solid-js';

const [data] = createResource(() => fetch('/api').then(res => res.json()));

<Show when={data()}>{data().message}</Show>

3. Portals (Advanced): Modal with createPortal. Use for overlays.

Conclusion: Choosing the Right Tool for 2025

Selecting a framework depends on your project—React/Next.js for dynamic UIs, Express/NestJS for backends, or Astro/Solid for performance. Experiment with these tutorials in real projects. Stay updated via official docs and communities. Happy coding! 

📘Free Job Preparation Zone 🎯 Visit Free Learning Zone