Razzle React 1 (FontAwesome/ ReactHelmet)

Razzle SSR için kullanılıyor. Javascript kütüphaneleri ile configuration yapmak genelde zordur. Bu yüzden projemize
npm install -g create-razzle-app
Komutu ile başlıyoruz, Bu komutu kendi pc mize razzle kuruyor ardından
create-razzle-app my-app
komutu ile tıpkı create-react-app gibi react configurations larının yanında razzle yani server side rendering configlerinide getiriyor.
Bu komut aşağıda ki paketleride içerisinde getiriyor :
    react
    react-dom
    react-router-dom
    razzle
    express

komutunu çalıştırdıktan sonra

cd my-app
komutu ile proje dizinimizin içine girelim. ardından
npm start ile projemizi başlatalım ve dizin yapısını inceleyelim.

Hatta şuan aldığım kararla React Helmet kütüphanesini de ekleyim. Bu kütüphane meta tagları yönetmemi sağlayacak.
npm install --save react-helmet
Not: Daha önce bu kütüphaneleri kullanmadım kapsam araştırması yaparken öğrendim sadece yani bu ilk uygulamam olacak.

Yukarıdaki komut ile projemize dahil edelim.

npm start komutundan sonra normalde react kendini otomatik olarak açıyordu. Razzle ile açmadı
http://localhost:3000
bu porta ilk açılan uygulamamızı görebilirisiniz.
index.js dosyamız bildiğimiz index yapısından biraz daha değik aslında burada anladığım kadarıyla bir server oluşturup iki taraflı bundle yapıyor.
Projeye başlayabilmemiz için zaten App.js ye geçiyoruz. App.js klasik react-router-dom mekanızması ile route oluşturma . Orayıda değiştirecez. İş hayatındaki gerçek projelerde daha farklı bir yaklaşım var. Bu yaklaşım aslında şöyle eğer route lerimi gruplamam gerekiyorsa ve bu gruplarda erişim farklılıkları var ise kullanılıyor. En basitinde user authenticate mi değil mi ?
 Neyse araştırmalarım da Font- Awesome de kullanmamız gerekiyor. Çünkü SSR yaparken şaşırıyormuş. Bu yüzden doğru öğrenelim.
npm i --save @fortawesome/fontawesome-svg-core \
  npm i --save @fortawesome/free-solid-svg-icons \
  npm i --save @fortawesome/react-fontawesome

Komutları ile projemize iconlarımızı dahil ediyoruz.

Devam edecek

https://medium.com/yld-engineering-blog/a-tale-of-react-server-side-rendering-cb95a441ca01


Yorumlar

Bu blogdaki popüler yayınlar

Laravel & React 1

React ile Kişisel Blog Sayfası Oluşturma 1

Github' a proje atma (Visual Studio Code ile)