🌶 Frontend Frameworks
- Frontend Frameworks
- Basic familiarity with HTML & CSS.
- 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.
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:
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.
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 coming soon...
React Native coming soon...
Vue coming soon...
Svelte coming soon...