Visual Studio Code

Next JS

React JS

Strapi Headless CMS

Chakra UI

Agik Setiawan

React JS adalah Library javascript berbasis komponen yang sangat populer pada saat ini mulai dari Web maupun Mobile dan banyak digunakan oleh banyak developer bahkan perusahaan - perusahaan besar banyak menggunakan React JS karena fitur yang ditawarkan sangat lengkap, Flexible, dan memiliki dukungan komunitas yang sangat besar.
 dengan belajar react JS kalian akan berkesempatan menjadi Frontend Developer Web maupun Mobile Developer
Peluang menjadi Frontend Developer sangatlah besar. banyak sekali perusahaan - perusahaan besar yang membutuhkan Frontend Developer khususnya menggunakan React JS maupun React Native (Mobile).
 Di kelas ini kita akan belajar React JS mulai dari dasar sampai dengan fitur - fitur yang advanced akan kita bedah satu persatu.
&nbsp;
Kita juga akan belajar Next JS mulai dari dasar sampai fitur - fitur yang advanced akan kita pelajari satu persatu.
&nbsp;
Next.js adalah kerangka kerja (framework) JavaScript yang digunakan untuk membangun aplikasi web berbasis React. Next JS dirancang untuk membuat pengembangan aplikasi web yang lebih mudah dengan menyediakan beberapa fitur bawaan seperti routing yang mudah, server-side rendering (SSR), Image Optimision dan banykan lagi.
&nbsp;
Kemudian kita juga akan belajar membangun API dengan menggunakan Headless CMS yaitu Strapi.
&nbsp;
Diakhir sesi kita akan melakukan Deployment API dan Frontend Ke Sever Production dan menggunakan Custom Domain kita sendiri.

Pendahuluan

Persiapan

Persiapan & Intro

Pengenalan React JS

Pengenalan Sintaks JSX / TSX

Konsep Penting

Latihan Buat Project dengan Create React App (CRA)

Struktur Project

React Component

React Props

React State

State VS Props

React Event

Conditional in React

React Fragment

Penggunaan List di React

Menggunakan Form

Implementasi Form dengan Mockup API

React Hooks

useState

useEffect

useContext

useRef

useCallback

useMemo

Custom Hook

React JS Fundamental

Pengenalan, Install & Konfigurasi Dependensi

Membuat Component dengan Tailwind CSS

React JS & Tailwind CSS

Pengenalan, Install & Konfigurasi

Membuat Form dengan Chakra UI

React JS & Chakra UI

Install & Konfigurasi Dependensi

Todo List CRUD Chakra UI & Recoil (Part 1)

Todo List CRUD Chakra UI & Recoil (Part 2)

React JS & Recoil (State Management)

Persiapan Dan Membuat Mockup API Task

Pengenalan Redux RTK Query

Install Dependensi dan Konfigurasi Redux Toolkit

Install React Hook Form , Yup & React Icon

Mockup Design CRUD

Component Tasks & Child Component

Gabungkan Component Tasks

Buat Interface Task

Setup API Redux RTK Query

Get Task Data dari API

Add Task Menggunakan API

Edit Task via API

Delete Task via API

CRUD API dengan Validation & Redux RTK Query

Pengenalan Next JS

Buat Project & Installasi

Server Component

Struktur Folder Next JS

Routing, Layout & Page

Layouting

Link & Navigation

Route Group

Dynamic Route

Loading UI

Page Not Found

Middleware

Simple Auth with Middleware

Data Fetching & Konfigurasi API

Lazy Loading

Next JS Fundamental

Pengenalan

Persiapan Database (PostgreSQL)

Install Strapi

Admin Panel Strapi

Merancang Skema Blog

Pembuatan Skema

Membuat Konten

Konfigurasi Akses API

Uji Coba API

Strapi (Headless CMS) & API

Persiapan VPS

Install Node JS, NPM, Yarn, Git, PM2

Deploy & Run di VPS

Login Admin Strapi

Custom Port Strapi

Deployment API

Pengenalan Caddy Server

Konfig Domain & DNS

Update Port Strapi

Install Caddy

Konfigurasi Caddyfile & Test Https

Setup Domain API & HTTPS (Free) dengan Caddy Server

Design Tampilan Blog

Buat Project Next JS

Install Chakra UI, Icon, Markdown dan Konfigurasi

Structuring Project

Setup Utils API & Services

Catatan Penting

Halaman Home & Feature Posts

Buat component Page Title

Halaman Detail Post

Halaman About

Halaman Contact

Buat Link Medsos

Membuat Blog dengan Next , Chakra UI & Strapi

Upload Project ke Git

Deployment with Vercel

Custom Domain Vercel

Deployment Frontend (Blog)

Belajar React JS , Next JS dari dasar sampai Mahir plus Strapi Headless CMS

Mahir React JS & Next JS App Directory + Strapi Sampai Production