muhtesem-react

En çok kullandığım, yararlı bulduğum ve sevdiğim React ve Next.js kaynaklarının bir listesi

Başlıklar

• React ve Next.js

  • React Paketleri
    • Formlar
    • Veri Çekmek
    • State Yönetimi
    • Testing
    • İşe Yarar Paketler
  • Next.js Paketleri
  • React UI Kitleri ve Geliştirme Araçları
  • TailwindCSS
  • React Şablonları
  • Bazı güzel repolar
  • React Youtube Kanalları
  • React Udemy Kursları
  • Paket Menajeri

• Projeye Başlarken

  • Projenin kurulumu
  • Production Action Workflow
  • Preview Action Workflow

React Paketleri

• Formlar için

  • React Hook Form => Önerdiğim
  • Formik
  • Yup
  • zod => önerdiğim

• Veri Çekerken

  • React Query => önerdiğim
  • SWR
  • axios => HTTP isteklerini yapmak için SWR ve react-query için önerdiğim

• State Yönetimi

  • Zustand => önerdiğim
  • Redux Toolkit

• Testing

  • cypress
  • @testing-library/react
  • jest

• İşe Yarar Paketler

  • react-icons => Popüler ikon kütüphanelerinden ikonları React uygulamasına eklemek için
  • react-csv
  • react-toastify => Bildirimler için
  • react-hot-toast => Bildirimler için
  • sonner => Bildirimler için
  • react-helmet => SEO ayarı için
  • react-modal => Modal penceresi oluşturmak için
  • react-beautiful-dnd => Sürükle ve bırak özellikleri eklemek için
  • @react-pdf/renderer => pdf oluşturmak için
  • @editorjs/editorjs => Markdown content oluşturmak için
  • react-email => Email oluşturmak için
  • react-infinite-scroller => Sonsuz kaydırma için
  • react-leaflet => Harita kullanımı için
  • framer-motion => Animasyonlar için
  • react-chartjs-2 => Grafikler için
  • react-joyride => Site turu için
  • query-string => query'İ stringe çevirmek için
  • lodash.debounce => Optimizasyon için
  • storybook => UI bileşenlerin geliştirilip test edilmesi için
  • react-loading-skeleton => Yükleme göstergesi için
  • react-table => Tablo oluşturmak ve yönetmek için
  • firebase
  • supabase
  • clerkjs => Sadece birkaç satır kodla bütün kullanıcı doğrulama işlemlerini halledin

Next.js Paketleri

• next-offline => Next.js uygulamasını çevrimdışı kullanabilmek için
• next-auth => Doğrulama işlemleri için
• next-translate => Çoklu dil desteği için
• next-i18next => Çoklu dil desteği için
• next-intl => Çoklu dil desteği için
• next-sitemap => sitemap oluşturmak için
• nextjs-progressbar => progress bar için
• @next/mdx => mdx dosyaları için
• next-mdx-remote => Serverdan mdx dosyası çekmek için
• @next/bundle-analyzer => Uygulamanızdaki paketlerin boyutunu analiz etmenize yardım eder
• next-pwa
• next-compose-plugins => Birden fazla paketi bir arada kullanmak için
• next-themes => Next.js uygulamasında tema kulanmak için
• pusher-js => Realtime işlemler için
• database-js => Database
• prisma => Database orm
• drizzle => database orm
• stripe => Ödeme işlemleri
• nextjs-toploader

Paket Menajeri

• npm
• yarn
• pnpm => Önerdiğim

React UI Kitleri ve Geliştirme Araçları

• TailwindCSS => Önerdiğim

• shadcnUI => Önerdiğim

• aceternity => Framer motion ile yapılmış animasyonlu UI componentleri

• Material UI

• Material Tailwind

• Radix UI

• Mantine

TailwindCSS paketleri

• class-variance-authority
• tailwind-merge
• @tailwindcss/forms
• @tailwindcss/typography
• tailwindcss-debug-screens
• prettier-plugin-tailwindcss

React Şablonları

Bazı güzel repolar

• Reddit clone Next.js
• Spotify clone Next.js
• Messanger clone Next.js
• E-commerce clone Next.js
• Real time chat app Next.js

React Youtube Kanalları

• Türkçe

  • Prototürk | React ile Proje Geliştirme Serisi => React için önerdiğim kaynak
  • Yunus Eş => React başlangıç için önerdiğim Kaynak
  • Mehmet Pekcan | Sıfırdan İleri Seviye Next.js v13 => Next.js için önerdiğim kaynak

• İngilizce

  • frontendfyi
  • Josh tried coding
  • JavaScript Mastery
  • Jack Herrington
  • React & Next js Projects with Sahand
  • RoadsideCoder
  • Sakura Dev
  • Shadee Merhi
  • Smoljames
  • Sonny Sangha

React Udemy Kursları

• Mehmet Pekcan | Sıfırdan, İleri Seviye Next.js 13 ile Web App Geliştirme => Next.js için önerdiğim

Nextjs ile Projeye Başlarken

Projenin kurulumu. Eslint prettier tailwindcss ve dosya yapısı içerir.

pnpx  create-next-app -e https://github.com/dukeofsoftware/next-project-starter

Projenin otomatik olarak her committe yayınlanması için ayarlar (CI/CD)

Full döküman

pnpm add -D vercel

pnpx vercel login

pnpx vercel link

VERCEL_ORG_ID, VERCEL_PROJECT_ID, VERCEL_TOKEN repository secrets olarak girilmelidir.

production deploy için action workflow

name: deploy
on:
  push:
    branches:
      - main
  workflow_dispatch:
env:
  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: pnpm/action-setup@v2
        with:
          node-version: 16
          cache: pnpm
      - run: pnpm install --immutable --frozen-lockfile
      - run: pnpx vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
      - run: pnpx vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
      - run: pnpx vercel deploy --prod --prebuilt --token=${{ secrets.VERCEL_TOKEN }}
      - id: deploy
        run: echo "::set-output name=url::$(pnpx vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }})"

Preview build için action workflow

name: preview
on:
  pull_request:
  workflow_dispatch:
env:
  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
jobs:
  preview:
    runs-on: ubuntu-latest
    environment:
      name: preview
      url: ${{ steps.deploy.outputs.url }}
    steps:
      - uses: actions/checkout@v3
      - uses: pnpm/action-setup@v2
        with:
          node-version: 16
          check-latest: true
          cache: pnpm
      - run: pnpm install --immutable
      - run: pnpx vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }}
      - run: pnpx vercel build --token=${{ secrets.VERCEL_TOKEN }}
      - id: deploy
        run: echo "::set-output name=url::$(pnpx vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }})"