🌶 Frontend Frameworks

• JavaScript
• Frontend Frameworks
• Frontend
• React
• Vue
• Svelte
• js

I will keep this list updated as I use and/or recommend new JavaScript libraries and frameworks. I will also try to keep it short and don't include too many libraries. It would be great if this section could be filled with useful resources and links from the community. Than lets start with the obvious ones ^^.

Prerequisites

Here are what Tania Rasica consider to be React prerequisites but is also needed for other JavaScript libraries and framework.

• Basic familiarity with HTML & CSS.
• Basic knowledge of JavaScript and programming.
• Basic understanding of the DOM.
• Familiarity with ES6 syntax and features.
• Node.js and npm installed globally as well as a basic understanding of it.

React

React is the most popular JavaScript library for building user interfaces. It is written in a functional style and is highly unopinionated. It is intended to be used with other libraries and frameworks, but it can be used on its own. It is developed by Facebook and is used by many other companies and is widely used in production. React is based on the Virtual DOM combining it with a component based architecture.

Useful links and resources

• React Docs
• React Patterns
• Intro to Hooks
• Thinking in React Hooks
• Awesome React Hooks
• How to fetch data with React Hooks?
• Optimizing Performance

Packages for React

visit Awesome React

Prerequisites before using React Frameworks

Before using frameworks that build on top of React you have to understand the core concepts of React:

• state
• props
• components
• events
• lifecycle methods
• rendering
• refs
• context
• component state.

Gatsby

Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps.

• Get all the benefits of static websites. Gatsby sites are fully functional React apps, so you can create high-quality, dynamic web apps, from blogs to e-commerce sites to user dashboards.
• No matter where the data comes from, Gatsby sites are built using React and GraphQL.
• Gatsby pulls in data from any data source, whether it’s Markdown files, a headless CMS like Contentful or WordPress, or a REST or GraphQL API. Use source plugins to load your data, then develop using Gatsby’s uniform GraphQL interface.
• Gatsby automates code splitting, image optimization, inlining critical styles, lazy-loading, prefetching resources, and more.
• Gatsby sites don’t require servers, so you can host your entire site on a CDN for a fraction of the cost of a server-rendered site.

NextJs

Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.

• Image Optimization: Image-Tag and Automatic Image Optimization with instant builds.
• Zero Config: Automatic compilation and bundling. Optimized for production from the start.
• Hybrid: SSG and SSR: Pre-render pages at build time (SSG) or request time (SSR) in a single project.
• Incremental Static Regeneration: Add and update statically pre-rendered pages incrementally after build time.
• File-system Routing: Every component in the pages directory becomes a route.
• API Routes: Optionally create API endpoints to provide backend functionality.
• Code-splitting and Bundling: Optimized bundle splitting algorithm created by the Google Chrome team.

Preact

Preact coming soon...

React Native

React Native coming soon...

Vue

Vue coming soon...

Svelte

Svelte coming soon...