Catamyst React

Discussion on React for fun and profit.

Let's discuss one of the most popular UI JavaScript libraries, React. With various related ecosystems and frameworks like Vite, Next.js, Gatsby, Remix, Tailwind CSS, Radix UI, Headless UI, etc. || Membahas dan demo live coding salah satu JavaScript UI library paling populer yaitu React. Dengan berbagai ekosistem terkait dan framework-nya seperti Vite, Next.js, Gatsby, Remix, Tailwind CSS, Radix UI, Headless UI, dll.

Prerequisites

• Terminal
• Git
• Markdown
• HTML
• CSS
• JavaScript
  • Conditional
  • Loop
  • Function
  • Error
  • Objects
  • Browser Storage
  • Module
  • Async
  • DOM (document object model)
    • document and window object
  • OOP (object-oriented programming)
  • FP (functional programming)
• Node.js vs Deno vs Bun.sh
  • npm vs yarn vs pnpm
  • process object and environment variable (.env)
• ESLint
• TypeScript
• API
  • REST API
  • GraphQL

Links

• https://github.com/catamyst-community/catamyst-frontend-stack
• https://catamyst.codepolitan.com

Fun

• React
  • React DOM
  • Props & State
  • Form
  • Routing
    • React Router
    • wouter
• Bundler + Transpiler
  • Webpack + Babel
  • Vite + ?
  • Parcel
  • rollup.js
• CRA (Create React App)
• Vite
• Gatsby
• Next.js
• Remix
• Astro
• Versus
  • Vue
  • Svelte
  • Solid
  • Angular
• Generic styling
  • Tailwind CSS
  • CSS Module
  • Sass
• Generic style system
  • Bootstrap
  • Bulma
  • Tailwind UI
  • daisyUI
  • VechaiUI
• CSS-in-JS
  • styled-components
  • @emotion
  • Stitches
• Component behavior/functionality
  • Radix UI
  • Headless UI
  • React Aria
• Component design system
  • Chakra UI
  • MUI
  • Mantine
• State management
  • Redux
  • MobX
  • Zustand & Jotai
  • Recoil
  • Nano Stores
• HTTP Client / Request library
  • SWR -> REST
  • React Query -> REST & GraphQL
  • Apollo -> GraphQL
• ORM (object relational mapping)
  • Prisma
  • TypeORM
• Internationalization
  • i18next
• Deployment
  • Vercel
  • Netlify
  • Cloudflare Pages & Workers
  • Fly.io
• Backend / BaaS
  • KeystoneJS
• Testing
  • Jest
  • @testing-library

Profit

• Jobs
  • Employment
  • Partnership
  • Teaching
    • egghead.io
    • Udemy
• Freelance
  • Hourly Rate
  • Per Project Rate
• Open Source
  • Donation

References

• https://youtu.be/zrCjrtCyGbk?t=2537