React from the Ground 🌏

❓ whoami

Hendra Agil

hendraaagil.dev

🤔 React

React website

🤯 Skena frontend saat ini

Web chaos https://x.com/yoavbls/status/1829570644692123802
React uwu

🤓 How to start

Paham HTML + CSS + JS dulu

(+) Paham module bundler

https://react.dev/learn

Versi Indonesia: https://id.react.dev/learn

😁 Mending langsung Next.js atau React dulu bang?

It depends meme

Next.js punya konsep dan aturan sendiri.

App vs pages router Next.js

Server first vs Client first

Pages router (client first)

  • SSR (getServerSideProps)
  • SSG (getStaticProps)
  • CSR (useEffect)
  • API routes (pages/api/*)
  • Etc.

App router (server first)

  • Client component (use client)
  • Server Action (use server)
  • React Server Component (RSC)
  • New routing
    • layout.tsx
    • page.tsx
    • route.ts
  • Partial prerendering (experimental)
  • Etc.
Welcome to Next.js

😭 Bang pusing pake Next, bisa pake React aja ga?

Bisa aja, tapi ..

Perlu banyak manual setup.

Atau opsi lain ...

💍 Find ur match!

Web chaos

🔥 Latest News

🏝️ TanStack Start

Release of tanstack start beta https://x.com/tannerlinsley/status/1859012733930528803

🎨 Tailwind v4

Release of tailwind v4 beta https://x.com/adamwathan/status/1859669606190940368

🐣 React Ecosystem

State of React 2023

State of React 2024 (Open)

📰 Rekomendasi Newsletter

Syntax.fm

Bytes (ui.dev)

This Week in React

🍌 Thanks!

Gracias

Any questions?