create-react-app ile oluşturulan projeye hot-reload özelliği eklemek

create-react-app ile oluşturulan bir projede default olarak bir hot-reload özelliği bulunuyor. Ancak tüm sayfa yenilendiği için, başlarda çok problem olmasa da, proje büyüdükçe faydalı olmaktan çıkıyor.

"index.js" dosyasında, webpack'in "module.hot" özelliğine ekleme yapılarak hot-reload özelliği işlevsel hale getirilebiliyor.


Bunun için "index.js" dosyasında aşağıdaki gibi değişiklik yapmak gerekiyor:

import React from 'react';

import ReactDOM from 'react-dom';

import './assets/index.css';

import App from './App';

import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App/>, document.getElementById('root'));

if (module.hot) {

module.hot.accept('./App', () => {

const NextApp = require('./App').default;

ReactDOM.render(<NextApp/>, document.getElementById('root'));

});

}

registerServiceWorker();

Vagrant vb. uygulamalar aracılığı ile geliştirme yaparken bu yeterli olmayabiliyor. Örneğin, geliştirme ortamı windows, kod derleme ortamı linux ise, windows tarafındaki dosya değişiklikleri, linux tarafından algılanamayabiliyor.

Bunun için ise root dizinde ".env" dosyasına aşağıdaki kodun eklenerek polling'in enable edilmesi gerekiyor. 

CHOKIDAR_USEPOLLING=true

Root dizinde bir ".env" dosyası yoksa, önce bunu oluşturmak gerekiyor.

Bu işlemler sonrasında hot-reload neredeyse sorunsuz çalışıyor. 

Kaynaklar:

• https://medium.com/superhighfives/hot-reloading-create-react-app-73297a00dcad
• https://stackoverflow.com/questions/42025225/react-auto-reload-with-vagrant
• https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-development-environment-variables-in-env

create-react-app ile oluşturulmuş bir uygulamayı apache server altına deploy etmek

create-react-app tüm konfigurasyonlar ile (webpack, babel vs.) geliştirmeye hazır bir react uygulaması oluşturmaya yarar. Bunun için create-react-app global olarak yüklenmiş olmalıdır. Aşağıdaki komut ile global olarak yüklenebilir:

npm install -g create-react-app

Yükleme sonrası aşağıdaki komut ile bir react projesi oluşturulabilir:

create-react-app my-app

Bu komut içinde bulunulan bir dizinde “my-app” adında bir klasör açacak ve bizim react uygulamamızı bunun altında oluşturacaktır.

Bu dizine girip aşağıdaki komutu terminalde yazdığımızda uygulamanın local’de ayağa kalktığı görülecektir.

cd my-app

npm start

Bu uygulamayı derleyerek çıkan dosyayı Apache server altına deploy etmek istersek my-app altındaki public klasörüne aşağıdaki gibi bir “.htaccess” dosyası eklemek gerekiyor:

RewriteEngine On

RewriteBase  /

RewriteRule ^index\.html$ - [L]

RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

RewriteRule . /index.html [L]

Eğer uygulamayı bir alt dizine deploy edeceksek package.json’a aşağıdaki satırı eklemek gerekemektedir.

"homepage": "/tstest/",

Sonrasında aşağıdaki komut ile uygulama derlenebilir:

npm run build

Bu komutun çalışması bitince my-app altında “build” klasörünün oluştuğu görülebilir.

Bunun altındaki dosyaların hepsi alınıp Apache server’da uygun yere kopyalandıktan sonra uygulamanın buradan da çalıştığı görülebilir.

Kaynaklar:

https://github.com/facebookincubator/create-react-app

https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md

https://medium.com/@baphemot/understanding-react-deployment-5a717d4378fd

React Router file kullanırken faydalı olabilir: https://stackoverflow.com/questions/37396427/how-to-bundle-a-react-app-to-a-subdirectory-on-a-server

https://stackoverflow.com/a/43197576/6593949

Redux store fonksiyonları

The store binds together the three principles of redux. It holds the current applications state object. It lets you dispatch actions. When you create it, you need to specify the reducer that tells how state is updated with actions.

The store has three important methods.

The first method of store is "getState". It retrieves the current state of the redux store.

The second and the most commonly used store method is called "dispatch". And it lets you dispatch actions that changes the state of your application.

Third redux store method is called "subscribe". It lets you register a callback that the redux store will call anytime an action has been dispatched.

Store, redux’ın üç prensibini birleştirir. Uygulamanın state objesini tutar. Action’ları dispatch eder (dağıtır). Store’u oluştururken state’lerin action’larla nasıl güncelleneceği belirtilmelidir. (createStore function’ına parametre olarak reducer verilmelidir.)

Store’un 3 önemli yöntemi/metodu/fonksiyonu vardır.

İlki “getState”tir. Redux store’unun mevcuttaki state’ini getirir.

İkincisi ve en çok kullanılanı “dispatch”tir. Uygulamadaki state’leri değiştirecek action’ları dağıtır.

Üçüncüsü “subscribe”dır. Store’a bir callback ekler. Bir action çalıştığında redux store tarafında çağrılır.

Kaynak: https://egghead.io/lessons/javascript-redux-the-single-immutable-state-tree

ve devamındaki videolar.

Redux prensipleri

First principle of redux; everything that changes in your application including the data and the ui state is contained in a single object. we call that state or state tree. (store)

Second principle of redux is that the state tree is read only. You cannot modify or write through it.

The pure functions are the functions whose return value depends only on the values of arguments. They do not have any observable side affects. They do not modify the values passed to them.

Impure functions may call the database or the network. They may have side affects. They may operate on the DOM. They may override the values passed to them.

The third principle of redux is some functions that makes the changes on states have to be pure in redux. (Reducer must be pure.)

Redux’ın ilk prensibi, uygulama içindeki herhangi bir data olsun veya ui olsun, olan herhangi bir değişikliğinin tek bir obje içerisinde tutulmasıdır. Buna “state” veya “state tree” denir.

Redux’ın ikinci prensibi, “state”in sadece okunur olması, üzerinde herhangi bir değişiklik yapılamaması veya üzerine yazılamamasıdır.

“Pure functions (Katışıksız fonksiyonlar)” sadece aldığı parametreleri kullanarak değer dönen metotlardır. Bu fonksiyonların herhangi bir yan etkisi yoktur. Fonksiyon, kendisine geçirilen parametreleri değiştirmez.

“Impure functions (karışık fonlsiyonlar)” database’den veya network’ten bilgi çekiyor olabilir. Yan etkileri olabilir, DOM’u yönetebilir. Kendilerine geçirilen parametreleri değiştirebilirler.

Redux’ın üçüncü prensibi state’lerde değişiklik yapan fonksiyonlar “pure function” olmalı. (Reducer pure function olmalı.)

Kaynak: https://egghead.io/lessons/javascript-redux-the-single-immutable-state-tree

ve devamındaki videolar.