ReactJS: Başlangıç ve Temel Kavramlar

HTML ve CSS’yi bilen bir front-end geliştiricisi veya front-end çalışmaya geçmek isteyen bir back-end geliştiricisiyseniz ReactJS öğreneceğiniz en yeni teknolojilerden biridir. Şu anda dünya üzerinde en hızlı büyüyen front-end teknolojisi olduğu için React geliştiricileri için gelecekte çok sayıda kârlı istihdam olanakları olduğu da konuşulmakta.

ReactJS Nedir?

ReactJS, etkileşimli, durum bilgisi olan ve yeniden kullanılabilir UI bileşenlerinin oluşturulmasını kolaylaştırmak için Facebook’ta geliştirilmiş bir UI kütüphanesi. Facebook’ta kullanılır ve Instagram.com tamamen ReactJS ile yazılmıştır.

En iyi yönlerinden biri, yalnızca istemci tarafında performans göstermekle kalmaz, aynı zamanda sunucu tarafında oluşturulabilir ve birlikte çalışabilir.

Facebook geliştiricilerinin de destek vermesi popülaritesini daha da artıyor. ReactJS ayrıca web uygulamaları için yeni bir standart belirledi. Bununla birlikte şunu da belirtelim, aslında bu bir framework değil, bir kütüphane.

React, beklemek yerine daha iyi kütüphaneler için uygulamanızın küçük parçalarını değiştirmenizi ve yenilik yapmasını amaçlıyor.Yalnızca gerekli olduğunda katmanları ekler, bu nedenle bazı kalıplanmış dilleri kullanmak yerine HTML ve JavaScript yazmaya devam edersiniz.

Bu tekrar kullanılabilir bileşenler React uygulamasının özüdür. Bu yalnızca kullanıcı arabirimi unsurları anlamına gelmez. Veritabanından aldığınız her veri türü için bir bileşen oluşturabilir ve ihtiyaç duyduğunuzda bunları oluşturabilirsiniz. Nesne yönelimli programlamaya paralel olarak, öğrenilebilir bir kütüphane olduğunu söyleyebilirim.

ReactJS, Reakt Native’in piyasaya sürülmesiyle birlikte çapraz platformda kullanılmaya başlandı. Reakt Native, karma bir uygulama oluşturmaz. Gerçekten, Objective-C, Java veya Swift’de yerleşik bir uygulamadan ayırt edilemeyen gerçek bir mobil uygulama oluşturuyor. React Native, normal iOS ve Android uygulamaları ile aynı temel UI yapı taşlarını kullanıyor.

React’i sunucuda da oluşturabilirsiniz. Bu, gerçekten hızlı ve arama motoru dostu sayfaları oluşturmanızı sağlar.

Başlangıç

React’i kullanmaya başlamak için, yayınlanmış başlangıç kitini indirmeniz gereklidir.

React Starter Kit
Örnek kullanıma buradan ulaşabilirsiniz.

Kurulum

Sayfanızı ayarlarken, react.js, react-dom.js ve JSXTransformer.js komutlarını eklemeyi unutmayın.

<!DOCTYPE html>
<html>
  <head>
    <script src="build/react.js"></script>
    <script src="build/react-dom.js"></script>
    <script src="build/JSXTransformer.js"></script>
  </head>
  <body>
    <div id="mount-point"></div>
    <script type="text/jsx">
      // React kodları burada olacak
    </script>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

// React kodları burada olacak

</script>

</body>

</html>

ReaktJS DOM kütüphanesini destekliyor, React’in son sürümünde tanıtıldı. React DOM uygulaması başlangıçta React kütüphanesinde idi ancak v0.14’te bağımsız bir kütüphane haline getirildi.

Bir örnek uygulama gerçekleştirelim:

<script type="text/jsx">
    /** @jsx React.DOM */
    ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('myDiv')
    );
</script>

/** @jsx React.DOM */

ReactDOM.render(

<h1>Hello, world!</h1>,

document.getElementById('myDiv')

);

</script>

/** @jsx React.DOM */

var Counter = React.createClass({
  incrementCount: function(){
    this.setState({
      count: this.state.count + 1
    });
  },
  getInitialState: function(){
     return {
       count: 0
     }
  },
  render: function(){
    return (
      <div class="my-component">
        <h1>Count: {this.state.count}</h1>
        <button type="button" onClick={this.incrementCount}>Increment</button>
      </div>
    );
  }
});

ReactDOM.render(<Counter/>, document.getElementById('mount-point'));

/** @jsx React.DOM */

var Counter = React.createClass({

incrementCount: function(){

this.setState({

count: this.state.count + 1

});

getInitialState: function(){

return {

count: 0

}

render: function(){

return (

<h1>Count: {this.state.count}</h1>

<button type="button" onClick={this.incrementCount}>Increment</button>

</div>

);

}

});

ReactDOM.render(<Counter/>, document.getElementById('mount-point'));

See the Pen zopQvR by Fatih Soysal (@fatihsoysal) on CodePen.

Sonuç

Bu makalede bazı ReactJS temellerini inceledik, React API’sını kontrol etmek için biraz zaman ayırın ve JSX üzerinde biraz çalışmaya başlayın.

Hoşçakalın!

Javascript

Permalink: https://fatihsoysal.com/blog/reactjs-baslangic-ve-temel-kavramlar/

0 Yorum

Inline Feedbacks

View all comments

Freelance Proje İş Alımı

Kategoriler

ReactJS: Başlangıç ve Temel Kavramlar

Fatih Soysal