Bu makale, Ruby on Rails 5 \u00e7at\u0131s\u0131n\u0131n g\u00fc\u00e7l\u00fc arka y\u00fcz yeteneklerini React’in dinamik ve modern \u00f6n y\u00fcz geli\u015ftirme kabiliyetleriyle birle\u015ftirerek Ubuntu 18.04 i\u015fletim sistemi \u00fczerinde nas\u0131l bir uygulama olu\u015fturulaca\u011f\u0131n\u0131 ad\u0131m ad\u0131m a\u00e7\u0131klamaktad\u0131r. Rails ve React’in birle\u015fimi, geli\u015ftiricilere hem h\u0131zl\u0131 API geli\u015ftirme imkan\u0131 sunan sa\u011flam bir arka u\u00e7 hem de zengin, etkile\u015fimli kullan\u0131c\u0131 deneyimleri sa\u011flayan bir \u00f6n u\u00e7 olu\u015fturma esnekli\u011fi tan\u0131r.<\/p>\n
Ruby on Rails, “Convention over Configuration” (Yap\u0131land\u0131rma Yerine Kural) felsefesiyle bilinen, web uygulamalar\u0131n\u0131 h\u0131zl\u0131 bir \u015fekilde geli\u015ftirmek i\u00e7in tasarlanm\u0131\u015f a\u00e7\u0131k kaynakl\u0131 bir web uygulama \u00e7at\u0131s\u0131d\u0131r. Geli\u015ftiricilerin tekrarlayan g\u00f6revler yerine i\u015f mant\u0131\u011f\u0131na odaklanmas\u0131na olanak tan\u0131yan bir dizi ara\u00e7, k\u00fct\u00fcphane ve yap\u0131sal desen sunar. Rails 5 s\u00fcr\u00fcm\u00fcyle birlikte Action Cable (ger\u00e7ek zamanl\u0131 ileti\u015fim), API modu ve Webpacker gibi modern \u00f6zellikler entegre edilmi\u015ftir, bu da onu modern web geli\u015ftirme ihtiya\u00e7lar\u0131 i\u00e7in daha da g\u00fc\u00e7l\u00fc k\u0131lmaktad\u0131r.<\/p>\n
React ise Facebook taraf\u0131ndan geli\u015ftirilen, kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmak i\u00e7in kullan\u0131lan bir JavaScript k\u00fct\u00fcphanesidir. Bile\u015fen tabanl\u0131 yap\u0131s\u0131, sanal DOM (Document Object Model) kullan\u0131m\u0131 ve tek y\u00f6nl\u00fc veri ak\u0131\u015f\u0131 sayesinde y\u00fcksek performansl\u0131, \u00f6l\u00e7eklenebilir ve bak\u0131m\u0131 kolay \u00f6n y\u00fcz uygulamalar\u0131 geli\u015ftirmeye olanak tan\u0131r. \u00d6zellikle tek sayfal\u0131k uygulamalar (Single Page Applications – SPA) ve karma\u015f\u0131k kullan\u0131c\u0131 aray\u00fczleri i\u00e7in tercih edilen bir \u00e7\u00f6z\u00fcmd\u00fcr.<\/p>\n
Rails’i bir arka u\u00e7 API’si olarak kullan\u0131p React’i ayr\u0131 bir \u00f6n u\u00e7 olarak konumland\u0131rmak, uygulaman\u0131n farkl\u0131 katmanlar\u0131n\u0131n ba\u011f\u0131ms\u0131z olarak geli\u015ftirilmesine ve \u00f6l\u00e7eklenmesine olanak tan\u0131r. Bu ayr\u0131m, geli\u015ftirme ekiplerinin farkl\u0131 alanlara odaklanmas\u0131n\u0131 kolayla\u015ft\u0131r\u0131r, kod taban\u0131n\u0131 daha d\u00fczenli hale getirir ve gelecekteki de\u011fi\u015fiklikler i\u00e7in daha fazla esneklik sunar. Rails 5.1 ile tan\u0131t\u0131lan Webpacker gem’i, Rails projelerine modern JavaScript ara\u00e7 zincirini (\u00f6zellikle Webpack) sorunsuz bir \u015fekilde entegre etmeyi m\u00fcmk\u00fcn k\u0131larak bu entegrasyonu b\u00fcy\u00fck \u00f6l\u00e7\u00fcde basitle\u015ftirmi\u015ftir.<\/p>\n
Bu makalede, Ubuntu 18.04 \u00fczerinde gerekli t\u00fcm ba\u011f\u0131ml\u0131l\u0131klar\u0131 kurmaktan, yeni bir Rails 5 projesi olu\u015fturmaya, React bile\u015fenlerini entegre etmeye ve basit bir etkile\u015fimli uygulama geli\u015ftirmeye kadar t\u00fcm ad\u0131mlar\u0131 detayl\u0131 bir \u015fekilde ele alaca\u011f\u0131z.<\/p>\n
Bu kurulum rehberini takip etmek i\u00e7in a\u015fa\u011f\u0131daki \u00f6n ko\u015fullara sahip olman\u0131z gerekmektedir:<\/p>\n
* Ubuntu 18.04 LTS:<\/strong> Bu makale \u00f6zellikle Ubuntu 18.04 i\u00e7in yaz\u0131lm\u0131\u015ft\u0131r. Ancak, genel ad\u0131mlar di\u011fer Debian tabanl\u0131 Linux da\u011f\u0131t\u0131mlar\u0131 i\u00e7in de benzer olacakt\u0131r. Kuruluma ba\u015flamadan \u00f6nce, sisteminizin g\u00fcncel oldu\u011fundan emin olmak her zaman iyi bir uygulamad\u0131r. Terminali a\u00e7\u0131n (Ctrl+Alt+T) ve a\u015fa\u011f\u0131daki komutlar\u0131 \u00e7al\u0131\u015ft\u0131r\u0131n:<\/p>\n Bu komutlar, paket listelerinizi g\u00fcncelleyecek ve mevcut t\u00fcm paketleri en son s\u00fcr\u00fcmlerine y\u00fckseltecektir.<\/p>\n Ruby, Node.js ve di\u011fer geli\u015ftirme ara\u00e7lar\u0131n\u0131 derlemek ve \u00e7al\u0131\u015ft\u0131rmak i\u00e7in \u00e7e\u015fitli sistem ba\u011f\u0131ml\u0131l\u0131klar\u0131na ihtiyac\u0131m\u0131z olacak.<\/p>\n Ruby ve di\u011fer yaz\u0131l\u0131mlar\u0131 kaynak koddan derlemek i\u00e7in Bu komut, derleme ara\u00e7lar\u0131n\u0131n yan\u0131 s\u0131ra, Ruby’nin ihtiya\u00e7 duyabilece\u011fi SSL, readline, zlib, YAML, SQLite, XML\/XSLT, cURL gibi k\u00fct\u00fcphaneleri ve Node.js ile npm’i kurar. Node.js ve npm’i bu \u015fekilde kurmak yerine, daha esnek bir s\u00fcr\u00fcm y\u00f6netimi i\u00e7in Node.js ve npm, React uygulamalar\u0131n\u0131 derlemek ve y\u00f6netmek i\u00e7in gereklidir. Birden fazla Node.js s\u00fcr\u00fcm\u00fcn\u00fc y\u00f6netmek i\u00e7in Node Version Manager (nvm) kullanmak en iyi y\u00f6ntemdir.<\/p>\n 1. nvm Kurulumu:<\/strong><\/p>\n Kurulumdan sonra, terminali kapat\u0131p yeniden a\u00e7man\u0131z veya a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131rman\u0131z gerekebilir:<\/p>\n 2. Node.js Kurulumu:<\/strong><\/p>\n \u015eimdi Kurulumu do\u011frulamak i\u00e7in:<\/p>\n Bu komutlar Node.js ve npm s\u00fcr\u00fcmlerini g\u00f6stermelidir.<\/p>\n 3. Yarn Kurulumu (\u0130ste\u011fe Ba\u011fl\u0131 ama \u00d6nerilir):<\/strong><\/p>\n Yarn, npm’e alternatif olarak daha h\u0131zl\u0131 ve g\u00fcvenilir bir paket y\u00f6neticisidir. Webpacker genellikle Yarn ile daha iyi \u00e7al\u0131\u015f\u0131r.<\/p>\n Kurulumu do\u011frulamak i\u00e7in:<\/p>\n Benzer \u015fekilde, Ruby’nin farkl\u0131 s\u00fcr\u00fcmlerini y\u00f6netmek i\u00e7in Ruby Version Manager (rbenv) kullanmak en iyi y\u00f6ntemdir. Bu, farkl\u0131 projeler i\u00e7in farkl\u0131 Ruby s\u00fcr\u00fcmlerine ihtiyac\u0131n\u0131z oldu\u011funda esneklik sa\u011flar.<\/p>\n 1. rbenv ve ruby-build Kurulumu:<\/strong><\/p>\n 2. Ruby Kurulumu:<\/strong><\/p>\n Rails 5.x serisi genellikle Ruby 2.5.x veya 2.6.x ile uyumludur. Bu makalede Ruby 2.5.3 kullanaca\u011f\u0131z.<\/p>\n Kurulumu do\u011frulamak i\u00e7in:<\/p>\n Bu komut Ruby 2.5.3 s\u00fcr\u00fcm\u00fcn\u00fc g\u00f6stermelidir.<\/p>\n 3. Bundler Kurulumu:<\/strong><\/p>\n Bundler, Ruby projelerinin ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 y\u00f6netmek i\u00e7in kullan\u0131lan bir gem’dir.<\/p>\n Rails projeleri i\u00e7in genellikle PostgreSQL tercih edilir. Sa\u011flaml\u0131\u011f\u0131 ve geli\u015fmi\u015f \u00f6zellikleri nedeniyle b\u00fcy\u00fck \u00f6l\u00e7ekli uygulamalar i\u00e7in idealdir.<\/p>\n 1. PostgreSQL Sunucusunu Kurma:<\/strong><\/p>\n 2. PostgreSQL Kullan\u0131c\u0131s\u0131 Olu\u015fturma:<\/strong><\/p>\n PostgreSQL varsay\u0131lan olarak Bu komut, mevcut Linux kullan\u0131c\u0131 ad\u0131n\u0131z\u0131 (\u00f6rne\u011fin, Soruldu\u011funda, kullan\u0131c\u0131 ad\u0131n\u0131z\u0131 girin ve s\u00fcper kullan\u0131c\u0131 yetkileri verin.<\/p>\n Art\u0131k t\u00fcm \u00f6n ko\u015fullar ve ba\u011f\u0131ml\u0131l\u0131klar y\u00fcklendi\u011fine g\u00f6re, yeni bir Rails projesi olu\u015fturmaya ba\u015flayabiliriz.<\/p>\n \u0130lk olarak, Rails gem’ini kurmal\u0131y\u0131z. Rails 5.2.4 s\u00fcr\u00fcm\u00fcn\u00fc hedefleyece\u011fiz.<\/p>\n \u015eimdi, React \u00f6n y\u00fcz\u00fc ve PostgreSQL veritaban\u0131 ile yeni bir Rails projesi olu\u015ftural\u0131m. Bu komut \u015funlar\u0131 yapacakt\u0131r:<\/p>\n * Proje dizinine ge\u00e7in:<\/p>\n Rails projesi olu\u015fturulduktan sonra, veritaban\u0131n\u0131 olu\u015fturmam\u0131z gerekir:<\/p>\n Bu komut, Rails 5.1 ile birlikte tan\u0131t\u0131lan Webpacker gem’i, modern JavaScript ara\u00e7 zincirini (Webpack, Babel, PostCSS vb.) Rails projelerine sorunsuz bir \u015fekilde entegre etmenin standart yoludur. Projenizin dizin yap\u0131s\u0131nda, React ile ilgili \u00f6nemli dosyalar\u0131 * \u015eimdi, projemizde basit bir React bile\u015feni olu\u015ftural\u0131m ve onu Rails g\u00f6r\u00fcn\u00fcm\u00fcm\u00fcze entegre edelim.<\/p>\n 1. React Bile\u015feni Olu\u015fturma:<\/strong><\/p>\n Bu, Rails 5 ve React ile olu\u015fturulmu\u015f basit bir uygulamad\u0131r.<\/p>\n Props'tan gelen mesaj: {props.message}<\/p>\n <\/div>\n );\n };\n\n export default App;<\/code><\/pre>\n 2. Yukar\u0131daki kod, DOM y\u00fcklendi\u011finde 3. Rails G\u00f6r\u00fcn\u00fcm\u00fcn\u00fc Olu\u015fturma:<\/strong><\/p>\n React bile\u015fenimizi g\u00f6sterecek bir Rails g\u00f6r\u00fcn\u00fcm\u00fcne ihtiyac\u0131m\u0131z var. Bir Bu komut, \u015eimdi Art\u0131k Rails ve React entegrasyonumuzun temelini att\u0131\u011f\u0131m\u0131za g\u00f6re, uygulamay\u0131 \u00e7al\u0131\u015ft\u0131rabilir ve geli\u015ftirmeye ba\u015flayabiliriz.<\/p>\n Terminalde proje dizininizdeyken Rails sunucusunu ba\u015flat\u0131n:<\/p>\n Bu komut, Rails uygulamas\u0131n\u0131 varsay\u0131lan olarak React bile\u015fenlerinde yapt\u0131\u011f\u0131n\u0131z de\u011fi\u015fikliklerin an\u0131nda taray\u0131c\u0131da g\u00f6r\u00fcnmesini sa\u011flamak i\u00e7in Webpack geli\u015ftirme sunucusunu ayr\u0131 bir terminalde \u00e7al\u0131\u015ft\u0131rman\u0131z \u00f6nerilir. Bu, “Hot Module Replacement” (HMR) veya “Hot Reloading” olarak bilinen \u00f6zelli\u011fi etkinle\u015ftirir.<\/p>\n Yeni bir terminal a\u00e7\u0131n, proje dizininize gidin ve a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131r\u0131n:<\/p>\n Bu sunucu varsay\u0131lan olarak \u00d6nemli Not:<\/strong> Rails’in API yeteneklerini kullanarak React \u00f6n y\u00fcz\u00fcm\u00fczden veri \u00e7ekelim. Bir 1. Post Kayna\u011f\u0131 Olu\u015fturma:<\/strong><\/p>\n Bu komutlar, 2. \u00d6rnek Veri Ekleme (Rails Konsolu):<\/strong><\/p>\n 3. React Bile\u015fenini G\u00fcncelleme:<\/strong><\/p>\n Y\u00fckleniyor...<\/p>;\n if (error) return Hata: {error.message}<\/p>;\n\n return (\n Bu, Rails 5 ve React ile olu\u015fturulmu\u015f basit bir uygulamad\u0131r.<\/p>\n Props'tan gelen mesaj: {props.message}<\/p>\n\n Hen\u00fcz g\u00f6nderi yok.<\/p>\n ) : (\n {post.content}<\/p>\n <\/li>\n ))}\n <\/ul>\n )}\n <\/div>\n );\n };\n\n export default App;<\/code><\/pre>\n De\u011fi\u015fiklikleri kaydettikten sonra, taray\u0131c\u0131n\u0131zda Geli\u015ftirme ortam\u0131nda her \u015fey yolunda gitse de, uygulamay\u0131 \u00fcretim ortam\u0131na da\u011f\u0131t\u0131rken baz\u0131 farkl\u0131l\u0131klar olacakt\u0131r.<\/p>\n * Varl\u0131klar\u0131n Derlenmesi:<\/strong> \u00dcretim ortam\u0131nda, Webpack geli\u015ftirme sunucusunu \u00e7al\u0131\u015ft\u0131rmazs\u0131n\u0131z. Bunun yerine, t\u00fcm JavaScript ve CSS varl\u0131klar\u0131n\u0131 tek bir seferde derlemeniz gerekir. Bu i\u015flem genellikle a\u015fa\u011f\u0131daki komutla yap\u0131l\u0131r:<\/p>\n Bu komut, t\u00fcm varl\u0131klar\u0131 optimize eder ve \u00fcretim i\u00e7in uygun hale getirir. Bu makale, da\u011f\u0131t\u0131m\u0131n ayr\u0131nt\u0131lar\u0131na girmeyecektir, ancak bu noktalar\u0131n fark\u0131nda olmak \u00f6nemlidir.<\/p>\n Kurulum ve geli\u015ftirme s\u0131ras\u0131nda kar\u015f\u0131la\u015fabilece\u011finiz baz\u0131 yayg\u0131n sorunlar ve \u00e7\u00f6z\u00fcmleri:<\/p>\n * <\/code> ve Bu kapsaml\u0131 makale boyunca, Ubuntu 18.04 i\u015fletim sistemi \u00fczerinde Ruby on Rails 5 arka y\u00fcz\u00fc ile modern bir React \u00f6n y\u00fcz\u00fcn\u00fc birle\u015ftiren bir uygulaman\u0131n nas\u0131l kurulaca\u011f\u0131n\u0131 ve geli\u015ftirilece\u011fini ad\u0131m ad\u0131m \u00f6\u011frendiniz. Sistem ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131n kurulumundan, Rails ve React projelerinin yap\u0131land\u0131r\u0131lmas\u0131na, basit bir React bile\u015feninin entegrasyonuna ve Rails API’si ile veri al\u0131\u015fveri\u015fine kadar bir\u00e7ok \u00f6nemli konuyu ele ald\u0131k.<\/p>\n Rails’in sa\u011flam API yetenekleri ve React’in dinamik kullan\u0131c\u0131 aray\u00fcz\u00fc olu\u015fturma g\u00fcc\u00fc, modern ve \u00f6l\u00e7eklenebilir web uygulamalar\u0131 geli\u015ftirmek i\u00e7in m\u00fckemmel bir kombinasyon sunar. Webpacker gem’i sayesinde bu entegrasyon hi\u00e7 olmad\u0131\u011f\u0131 kadar kolay ve verimli hale gelmi\u015ftir.<\/p>\n Bu ba\u015flang\u0131\u00e7 noktas\u0131ndan itibaren, uygulaman\u0131z\u0131 daha da geli\u015ftirebilirsiniz:<\/p>\n * React Router:<\/strong> Tek sayfal\u0131k uygulama deneyimi i\u00e7in React Router kullanarak \u00f6n y\u00fcz rotalar\u0131n\u0131 y\u00f6netin. Unutmay\u0131n, web geli\u015ftirme s\u00fcrekli evrilen bir aland\u0131r. Yeni ara\u00e7lar\u0131 ve en iyi uygulamalar\u0131 \u00f6\u011frenmeye devam etmek, becerilerinizi g\u00fcncel tutmak i\u00e7in hayati \u00f6neme sahiptir. Bu kurulum rehberi, Rails ve React ile sa\u011flam bir ba\u015flang\u0131\u00e7 yapman\u0131z i\u00e7in gereken temeli sa\u011flam\u0131\u015ft\u0131r.<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Ubuntu 18.04 \u00dczerinde Ruby on Rails v5 Projesi ve React Frontend Kurulumu\nBu makale, Ruby on Rails 5 \u00e7at\u0131s\u0131n\u0131n g\u00fc\u00e7l\u00fc arka y\u00fcz yeteneklerini","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1468],"tags":[],"class_list":{"0":"post-32765","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-ubuntu","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n
\n* Temel Linux Komut Bilgisi:<\/strong> Terminalde temel komutlar\u0131 (cd, ls, sudo vb.) kullanma yetene\u011fi.
\n* \u0130nternet Ba\u011flant\u0131s\u0131:<\/strong> Gerekli paketleri ve ba\u011f\u0131ml\u0131l\u0131klar\u0131 indirmek i\u00e7in.<\/p>\nsudo apt update\nsudo apt upgrade -y<\/code><\/pre>\nSistem Ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131n Kurulumu<\/h3>\n
Gerekli Derleme Ara\u00e7lar\u0131n\u0131 Kurma<\/h4>\n
build-essential<\/code> paketi ve \u00e7e\u015fitli k\u00fct\u00fcphaneler gereklidir.<\/p>\nsudo apt install -y build-essential git curl libssl-dev libreadline-dev zlib1g-dev \\\nlibyaml-dev libsqlite3-dev sqlite3 libxml2-dev libxslt1-dev libcurl4-openssl-dev \\\nsoftware-properties-common libffi-dev nodejs npm<\/code><\/pre>\nnvm<\/code> kullanmay\u0131 tercih edece\u011fiz.<\/p>\nNode.js ve npm (veya Yarn) Kurulumu (nvm ile \u00d6nerilen)<\/h4>\n
curl -o- https:\/\/raw.githubusercontent.com\/nvm-sh\/nvm\/v0.39.1\/install.sh | bash<\/code><\/pre>\nsource ~\/.bashrc<\/code><\/pre>\nnvm<\/code> kullanarak Node.js’in en son LTS (Uzun S\u00fcreli Destek) s\u00fcr\u00fcm\u00fcn\u00fc kurabiliriz:<\/p>\nnvm install --lts\n nvm use --lts<\/code><\/pre>\nnode -v\n npm -v<\/code><\/pre>\nnpm install -g yarn<\/code><\/pre>\nyarn -v<\/code><\/pre>\nRuby Kurulumu (rbenv ile \u00d6nerilen)<\/h4>\n
git clone https:\/\/github.com\/rbenv\/rbenv.git ~\/.rbenv\n echo 'export PATH=\"$HOME\/.rbenv\/bin:$PATH\"' >> ~\/.bashrc\n echo 'eval \"$(rbenv init -)\"' >> ~\/.bashrc\n\n git clone https:\/\/github.com\/rbenv\/ruby-build.git ~\/.rbenv\/plugins\/ruby-build\n echo 'export PATH=\"$HOME\/.rbenv\/plugins\/ruby-build\/bin:$PATH\"' >> ~\/.bashrc\n\n source ~\/.bashrc<\/code><\/pre>\nrbenv install 2.5.3\n rbenv global 2.5.3<\/code><\/pre>\nruby -v<\/code><\/pre>\ngem install bundler\n rbenv rehash # rbenv'e yeni gem'leri tan\u0131tmak i\u00e7in<\/code><\/pre>\nPostgreSQL Veritaban\u0131 Kurulumu<\/h4>\n
sudo apt install -y postgresql postgresql-contrib libpq-dev<\/code><\/pre>\nlibpq-dev<\/code> paketi, Ruby’nin PostgreSQL ile etkile\u015fime girmesi i\u00e7in gereken geli\u015ftirme ba\u015fl\u0131klar\u0131n\u0131 i\u00e7erir.<\/p>\npostgres<\/code> adl\u0131 bir s\u00fcper kullan\u0131c\u0131 olu\u015fturur. Kendi sistem kullan\u0131c\u0131n\u0131zla veritaban\u0131 olu\u015fturabilmek i\u00e7in bir PostgreSQL kullan\u0131c\u0131s\u0131 olu\u015fturman\u0131z gerekir.<\/p>\nsudo -u postgres createuser -s $(whoami)<\/code><\/pre>\nkullaniciadi<\/code>) PostgreSQL’de bir s\u00fcper kullan\u0131c\u0131 olarak olu\u015fturur. Alternatif olarak, etkile\u015fimli olarak bir kullan\u0131c\u0131 olu\u015fturmak i\u00e7in:<\/p>\nsudo -u postgres createuser --interactive<\/code><\/pre>\nRails Projesi Kurulumu<\/h3>\n
Rails Gem’ini Kurma<\/h4>\n
gem install rails -v 5.2.4\nrbenv rehash # rbenv'e yeni gem'i tan\u0131tmak i\u00e7in<\/code><\/pre>\nYeni Bir Rails Projesi Olu\u015fturma<\/h4>\n
--webpack=react<\/code> bayra\u011f\u0131, Rails’in Webpacker gem’ini React ile birlikte kurmas\u0131n\u0131 sa\u011flar ve React bile\u015fenleri i\u00e7in varsay\u0131lan bir yap\u0131land\u0131rma yapar.<\/p>\nrails new my_react_app --webpack=react --database=postgresql<\/code><\/pre>\nmy_react_app<\/code> ad\u0131nda yeni bir Rails projesi dizini olu\u015fturur.
\n* Gerekli t\u00fcm Rails gem’lerini kurar (Bundler arac\u0131l\u0131\u011f\u0131yla).
\n* PostgreSQL veritaban\u0131 adapt\u00f6r\u00fcn\u00fc yap\u0131land\u0131r\u0131r.
\n* Webpacker gem’ini ekler ve React ile \u00e7al\u0131\u015fmak \u00fczere yap\u0131land\u0131r\u0131r.
\n* React i\u00e7in \u00f6rnek dosyalar\u0131 (hello_react.jsx<\/code> gibi) olu\u015fturur.<\/p>\ncd my_react_app<\/code><\/pre>\nVeritaban\u0131 Olu\u015fturma<\/h4>\n
rails db:create<\/code><\/pre>\nconfig\/database.yml<\/code> dosyas\u0131nda tan\u0131mlanan geli\u015ftirme ve test veritabanlar\u0131n\u0131 PostgreSQL’de olu\u015fturacakt\u0131r.<\/p>\nReact Frontend’i Webpacker ile Kurulumu<\/h3>\n
--webpack=react<\/code> bayra\u011f\u0131 ile bir Rails projesi olu\u015fturdu\u011fumuzda, Webpacker zaten React i\u00e7in yap\u0131land\u0131r\u0131lm\u0131\u015f olarak gelir.<\/p>\nWebpacker Yap\u0131s\u0131n\u0131 Anlama<\/h4>\n
app\/javascript<\/code> alt\u0131nda bulacaks\u0131n\u0131z:<\/p>\napp\/javascript\/packs\/<\/code>: Bu dizin, Webpack’in giri\u015f noktalar\u0131 olan “pack” dosyalar\u0131n\u0131 i\u00e7erir. Her pack<\/code> dosyas\u0131, uygulaman\u0131z\u0131n bir b\u00f6l\u00fcm\u00fcn\u00fc veya t\u00fcm\u00fcn\u00fc temsil edebilir. \u00d6rne\u011fin, application.js<\/code> veya hello_react.jsx<\/code>.
\n* app\/javascript\/components\/<\/code>: Genellikle React bile\u015fenlerinizi d\u00fczenlemek i\u00e7in kullan\u0131lan bir dizin.
\n* config\/webpacker.yml<\/code>: Webpacker’\u0131n ana yap\u0131land\u0131rma dosyas\u0131d\u0131r. Geli\u015ftirme, test ve \u00fcretim ortamlar\u0131 i\u00e7in farkl\u0131 ayarlar\u0131 i\u00e7erir.
\n* package.json<\/code>: Node.js paket y\u00f6neticisi (npm veya Yarn) i\u00e7in ba\u011f\u0131ml\u0131l\u0131klar\u0131 ve script’leri tan\u0131mlayan dosya.<\/p>\nBasit Bir React Bile\u015feni Olu\u015fturma<\/h4>\n
app\/javascript\/components<\/code> dizinini olu\u015fturun ve i\u00e7ine App.jsx<\/code> ad\u0131nda bir dosya ekleyin:<\/p>\nmkdir -p app\/javascript\/components\n touch app\/javascript\/components\/App.jsx<\/code><\/pre>\napp\/javascript\/components\/App.jsx<\/code> i\u00e7eri\u011fi:<\/p>\nimport React from 'react';\n\n const App = (props) => {\n return (\n application.js<\/code> Pack Dosyas\u0131n\u0131 G\u00fcncelleme:<\/strong><\/p>\napp\/javascript\/packs\/application.js<\/code> dosyas\u0131, uygulaman\u0131z\u0131n ana JavaScript giri\u015f noktas\u0131d\u0131r. Burada React bile\u015fenimizi i\u00e7e aktaraca\u011f\u0131z ve DOM’a render edece\u011fiz.<\/p>\napp\/javascript\/packs\/application.js<\/code> i\u00e7eri\u011fi:<\/p>\n\/\/ Rails'in varsay\u0131lan Webpacker pack dosyas\u0131\n require(\"@rails\/ujs\").start()\n require(\"turbolinks\").start()\n require(\"@rails\/activestorage\").start()\n require(\"channels\")\n\n \/\/ React entegrasyonu i\u00e7in gerekli import'lar\n import React from 'react';\n import ReactDOM from 'react-dom';\n import App from '..\/components\/App'; \/\/ Kendi App bile\u015fenimizi import ediyoruz\n\n document.addEventListener('DOMContentLoaded', () => {\n ReactDOM.render(\n App<\/code> bile\u015fenini react-root<\/code> id’sine sahip bir HTML eleman\u0131na render edecektir.<\/p>\nWelcome<\/code> kontrolc\u00fcs\u00fc ve index<\/code> eylemi olu\u015ftural\u0131m:<\/p>\nrails generate controller Welcome index<\/code><\/pre>\napp\/controllers\/welcome_controller.rb<\/code> ve app\/views\/welcome\/index.html.erb<\/code> dosyalar\u0131n\u0131 olu\u015fturacakt\u0131r.<\/p>\nconfig\/routes.rb<\/code> dosyas\u0131n\u0131 g\u00fcncelleyerek index<\/code> eylemini uygulaman\u0131n k\u00f6k yolu yapal\u0131m:<\/p>\n# config\/routes.rb\n Rails.application.routes.draw do\n root 'welcome#index'\n # Di\u011fer rotalar buraya gelebilir\n end<\/code><\/pre>\napp\/views\/welcome\/index.html.erb<\/code> dosyas\u0131n\u0131 d\u00fczenleyerek React bile\u015fenimizin yerle\u015fece\u011fi div<\/code> eleman\u0131n\u0131 ve Webpacker taraf\u0131ndan olu\u015fturulan JavaScript pack dosyas\u0131n\u0131 ekleyelim:<\/p>\n\n javascript_pack_tag 'application'<\/code> yard\u0131mc\u0131 y\u00f6ntemi, Webpacker’\u0131n app\/javascript\/packs\/application.js<\/code> dosyas\u0131n\u0131 derleyip taray\u0131c\u0131ya sunmas\u0131n\u0131 sa\u011flar.<\/p>\nUygulamay\u0131 Geli\u015ftirme ve \u00c7al\u0131\u015ft\u0131rma<\/h3>\n
Rails Sunucusunu Ba\u015flatma<\/h4>\n
rails s<\/code><\/pre>\nhttp:\/\/localhost:3000<\/code> adresinde ba\u015flat\u0131r. Taray\u0131c\u0131n\u0131zda bu adrese gitti\u011finizde, React bile\u015feninizin i\u00e7eri\u011fini g\u00f6rmelisiniz.<\/p>\nWebpack Geli\u015ftirme Sunucusunu Ba\u015flatma (Hot Reloading i\u00e7in)<\/h4>\n
bin\/webpack-dev-server<\/code><\/pre>\nhttp:\/\/localhost:8080<\/code> adresinde \u00e7al\u0131\u015f\u0131r ve JavaScript\/React dosyalar\u0131n\u0131zdaki de\u011fi\u015fiklikleri izler. De\u011fi\u015fiklik yapt\u0131\u011f\u0131n\u0131zda, sayfan\u0131n tamam\u0131n\u0131 yenilemeden yaln\u0131zca ilgili mod\u00fcl\u00fc g\u00fcnceller.<\/p>\nrails s<\/code> ve bin\/webpack-dev-server<\/code> komutlar\u0131n\u0131n ayn\u0131 anda \u00e7al\u0131\u015f\u0131yor olmas\u0131 gerekmektedir. Rails sunucusu HTML’i ve API isteklerini sunarken, Webpack geli\u015ftirme sunucusu JavaScript ve CSS varl\u0131klar\u0131n\u0131 y\u00f6netir.<\/p>\nBasit Bir API Entegrasyonu<\/h4>\n
Post<\/code> modeli olu\u015ftural\u0131m ve bu post’lar\u0131 React bile\u015fenimizde g\u00f6sterelim.<\/p>\nrails generate scaffold Post title:string content:text\n rails db:migrate<\/code><\/pre>\nPost<\/code> modeli, kontrolc\u00fcs\u00fc, g\u00f6r\u00fcn\u00fcmleri ve veritaban\u0131 migrasyonunu olu\u015fturur. Ayr\u0131ca, API u\u00e7 noktalar\u0131n\u0131 da tan\u0131mlar.<\/p>\nrails console<\/code><\/pre>\nPost.create(title: \"\u0130lk G\u00f6nderi\", content: \"Bu bir Rails API'sinden gelen ilk g\u00f6nderidir.\")\n Post.create(title: \"\u0130kinci G\u00f6nderi\", content: \"React taraf\u0131ndan g\u00f6r\u00fcnt\u00fclenecek ikinci g\u00f6nderi.\")\n exit<\/code><\/pre>\napp\/javascript\/components\/App.jsx<\/code> dosyas\u0131n\u0131, Rails API’sinden post’lar\u0131 \u00e7ekecek \u015fekilde g\u00fcncelleyelim. useState<\/code> ve useEffect<\/code> hook’lar\u0131n\u0131 kullanaca\u011f\u0131z.<\/p>\n\/\/ app\/javascript\/components\/App.jsx\n import React, { useState, useEffect } from 'react';\n\n const App = (props) => {\n const [posts, setPosts] = useState([]);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n\n useEffect(() => {\n fetch('\/posts') \/\/ Rails API'sinden post'lar\u0131 \u00e7ekiyoruz\n .then(response => {\n if (!response.ok) {\n throw new Error(HTTP error! status: ${response.status}<\/code>);\n }\n return response.json();\n })\n .then(data => {\n setPosts(data);\n setLoading(false);\n })\n .catch(error => {\n setError(error);\n setLoading(false);\n });\n }, []); \/\/ Bo\u015f ba\u011f\u0131ml\u0131l\u0131k dizisi, yaln\u0131zca bile\u015fen ilk y\u00fcklendi\u011finde \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar\n\n if (loading) return G\u00f6nderiler<\/h2>\n {posts.length === 0 ? (\n
\n {posts.map(post => (\n
{post.title}<\/h3>\n
http:\/\/localhost:3000<\/code> adresini ziyaret etti\u011finizde, Rails API’sinden \u00e7ekilen g\u00f6nderileri React bile\u015feninizde g\u00f6rmelisiniz.<\/p>\nDa\u011f\u0131t\u0131m Hususlar\u0131<\/h3>\n
RAILS_ENV=production bundle exec rails assets:precompile\n # veya sadece Webpacker varl\u0131klar\u0131 i\u00e7in\n RAILS_ENV=production bundle exec rails webpacker:compile<\/code><\/pre>\n
\n* Web Sunucusu:<\/strong> Geli\u015ftirme s\u0131ras\u0131nda Puma (Rails’in varsay\u0131lan\u0131) kullan\u0131rken, \u00fcretimde genellikle Nginx gibi bir ters proxy sunucu ile Puma veya Passenger gibi bir uygulama sunucusu kullan\u0131l\u0131r. Nginx, statik varl\u0131klar\u0131 sunarken, uygulama sunucusu dinamik Rails isteklerini i\u015fler.
\n* Veritaban\u0131 Yap\u0131land\u0131rmas\u0131:<\/strong> config\/database.yml<\/code> dosyas\u0131ndaki \u00fcretim ortam\u0131 ayarlar\u0131n\u0131n do\u011fru oldu\u011fundan ve veritaban\u0131 kimlik bilgilerinin g\u00fcvenli bir \u015fekilde y\u00f6netildi\u011finden emin olun (\u00f6rne\u011fin, ortam de\u011fi\u015fkenleri kullanarak).
\n* Ortam De\u011fi\u015fkenleri:<\/strong> API anahtarlar\u0131, gizli s\u0131rlar gibi hassas bilgileri do\u011frudan kodunuza yazmak yerine ortam de\u011fi\u015fkenleri (\u00f6rne\u011fin, SECRET_KEY_BASE<\/code>) arac\u0131l\u0131\u011f\u0131yla y\u00f6netin.<\/p>\nSorun Giderme<\/h3>\n
rbenv: command not found<\/code> veya nvm: command not found<\/code>:<\/strong> ~\/.bashrc<\/code> dosyan\u0131za ekledi\u011finiz sat\u0131rlar\u0131n do\u011fru oldu\u011fundan ve source ~\/.bashrc<\/code> komutunu \u00e7al\u0131\u015ft\u0131rd\u0131\u011f\u0131n\u0131zdan emin olun. Terminali kapat\u0131p yeniden a\u00e7mak da yard\u0131mc\u0131 olabilir.
\n* bundle install<\/code> hatalar\u0131:<\/strong> Genellikle eksik sistem ba\u011f\u0131ml\u0131l\u0131klar\u0131ndan (\u00f6rne\u011fin, libpq-dev<\/code> gibi) kaynaklan\u0131r. Hata mesaj\u0131n\u0131 dikkatlice okuyun ve eksik paketi sudo apt install<\/code> ile kurun.
\n* Webpacker::Manifest::MissingEntryError<\/code>:<\/strong> Bu hata, Webpack’in bir pack dosyas\u0131n\u0131 bulamad\u0131\u011f\u0131 anlam\u0131na gelir. bin\/webpack-dev-server<\/code> komutunun \u00e7al\u0131\u015ft\u0131\u011f\u0131ndan emin olun veya RAILS_ENV=development bundle exec rails webpacker:compile<\/code> komutunu \u00e7al\u0131\u015ft\u0131rarak varl\u0131klar\u0131 manuel olarak derlemeyi deneyin. yarn install<\/code> komutunu \u00e7al\u0131\u015ft\u0131rarak t\u00fcm Node.js ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131n kurulu oldu\u011fundan emin olun.
\n* React bile\u015feni g\u00f6r\u00fcnm\u00fcyor:<\/strong>
\n * Taray\u0131c\u0131n\u0131z\u0131n geli\u015ftirici ara\u00e7lar\u0131n\u0131 (F12) a\u00e7\u0131n ve konsolda hata olup olmad\u0131\u011f\u0131n\u0131 kontrol edin.
\n * app\/views\/welcome\/index.html.erb<\/code> dosyas\u0131nda <\/p>\n<%= javascript_pack_tag 'application' %><\/code> sat\u0131rlar\u0131n\u0131n do\u011fru yerle\u015ftirildi\u011finden emin olun.
\n * app\/javascript\/packs\/application.js<\/code> dosyas\u0131nda ReactDOM.render<\/code> \u00e7a\u011fr\u0131s\u0131n\u0131n do\u011fru oldu\u011fundan ve react-root<\/code> id’sini hedefledi\u011finden emin olun.
\n* API \u00e7a\u011fr\u0131lar\u0131 ba\u015far\u0131s\u0131z oluyor:<\/strong>
\n * Rails sunucusunun \u00e7al\u0131\u015ft\u0131\u011f\u0131ndan emin olun (rails s<\/code>).
\n * Taray\u0131c\u0131n\u0131z\u0131n geli\u015ftirici ara\u00e7lar\u0131ndaki “Network” sekmesinde API iste\u011finin durumunu kontrol edin (404 Not Found, 500 Internal Server Error vb.).
\n * Rails sunucu konsolunda hata mesajlar\u0131n\u0131 kontrol edin.
\n * config\/routes.rb<\/code> dosyas\u0131nda API rotalar\u0131n\u0131n do\u011fru tan\u0131mland\u0131\u011f\u0131ndan emin olun.<\/p>\nSonu\u00e7<\/h3>\n
\n* Durum Y\u00f6netimi:<\/strong> Uygulaman\u0131z b\u00fcy\u00fcd\u00fck\u00e7e Redux veya Context API gibi durum y\u00f6netim k\u00fct\u00fcphanelerini entegre edin.
\n* Kimlik Do\u011frulama:<\/strong> Devise gem’i ve JWT (JSON Web Tokens) kullanarak Rails API’nizde kullan\u0131c\u0131 kimlik do\u011frulama ve yetkilendirme uygulay\u0131n.
\n* Testler:<\/strong> Hem Rails arka y\u00fcz\u00fcn\u00fcz hem de React \u00f6n y\u00fcz\u00fcn\u00fcz i\u00e7in kapsaml\u0131 testler yaz\u0131n.<\/p>\n