React.js Eğitimi #1
Merhaba,
son zamanlarda oldukça ünlenen JavaScript tabanlı user interface (kullanıcı arayüzü) kütüphanesi ayrıntılı şekilde ele alıcam. Sizinle beraber öğrenerek ilerleyeceğiz.
Giriş
React bir kullanıcı arayüz kütüphanesidir. Facebook'un Instagram'ı satın almasından sonra Instagram için hali hazırda Facebook içerisinde bulunan bu kütüphanenin Facebook'un kod tabanından bağımsız hale getirilmesiyle Mayıs 2013' te open source haline getirildi. İlk ortaya çıktığında oldukça büyük tepkiler aldı. Angular varken React'ın başarılı olamayacağı söylenmekteydi. Fakat günümüzde Netflix, WhatsApp, airbnb, Flipboard, HipChat gibi bir çok uygulama React kullanmaktadır.
Resmi sayfası : Link
React ile Angular popülerliğini aşağıdaki grafikten görebilirsiniz.
Mavi çizgi React'ı kırmızı çizgi ise Angular'ı ifade etmektedir.
React'ın asıl amacı verinin zaman içerisinde değiştiği büyük uygulamaları basit ve hızlı bir şekilde geliştirebilmektir.
Sunucu tabanlı arayüzlerde bu işlem oldukça basittir. Veri database'den çekilir ve formatlanmış bir şekilde kullanıcıya gösterilir. Fakat istemci tabanlı arayüzlerde bu işlem zaman faktörünün devreye girmesi ile oldukça sıkıntılı bir hal alabilmektedir. Bu aşamada devreye React girmektedir. Aşağıdaki grafikte bunu daha kolay kavrayabiliriz.
Kullanıcı yapmış olduğunuz sayfaya girdi ve sizin yapmış olduğunuz sayfayı görüntüledi. Şuan için herhangi bir sorun yok. Arayüz ile veri birbirini tamamlıyor. Fakat kullanıcı sayfa içerisinde zaman geçirdikçe veri ile arayüz arasındaki senkronizasyon kopmakta ve birbiri ile örtüşmemektedir. Bu işlemi React kullanarak yaptığımızda grafiğimiz aşağıdaki gibi olacaktır.
Artık zaman faktörümüz ilerledikçe arayüz ile veri birbiri ile örtüşecektir.
React Kullanımı
Yeni bir React uygulaması oluşturmak başlamanın en iyi yoludur. En yeni JavaScript özelliklerini kullanabilmemizi, güzel bir geliştirici deneyimi yaşayabilmemizi ve uygulamamızı deploy etmek için optimize olanakları sağlamaktadır. Bu metod için makinenizde Node 6 ya da üstü bir sürüm olması gerekir.
npm install -g create-react-app
create-react-app my-app
cd my-app
npm start
bu işlemleri yaptıktan sonra npm start komutu browser'ınızda uygulamanızı görüntülemenize olanak sağlayacaktır.
ayrıca React'ı projenize cdn kullanarakta dahil edebilirsiniz.
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
Minified ve optimize edilmiş;
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
güzel bir anlatım olmuş emeğine sağlık
Teşekkür ederim, öğrenirken pekiştirmek ve uygulamak için oldukça iyi oldu bu :)
Congratulations! This post has been upvoted from the communal account, @minnowsupport, by levent.eren from the Minnow Support Project. It's a witness project run by aggroed, ausbitbank, teamsteem, theprophet0, someguy123, neoxian, followbtcnews/crimsonclad, and netuoso. The goal is to help Steemit grow by supporting Minnows and creating a social network. Please find us in the Peace, Abundance, and Liberty Network (PALnet) Discord Channel. It's a completely public and open space to all members of the Steemit community who voluntarily choose to be there.
If you would like to delegate to the Minnow Support Project you can do so by clicking on the following links: 50SP, 100SP, 250SP, 500SP, 1000SP, 5000SP. Be sure to leave at least 50SP undelegated on your account.
@originalworks !originalworks @originalworks2