We want to hear from you!Take our 2021 Community Survey!
This site is no longer updated.Go to react.dev

React

Kullanıcı arayüzleri geliştirebileceğiniz bir JavaScript kütüphanesi

Bildirimsel

React, interaktif kullanıcı arayüzü geliştirmeyi zahmetsiz hale getirir. Siz uygulamanızdaki her durum için basit sayfalar tasarlayın. React, veriniz değiştiğinde sadece doğru bileşenleri verimli bir şekilde güncellesin ve oluştursun.

Bildirimsel sayfalar, kodunuzu daha öngörülebilir ve hata ayıklaması daha kolay hale getirir.

Bileşen Tabanlı

Kendi state’ini yöneten bileşenler geliştirin ve onları bir araya getirerek kompleks kullanıcı arayüzleri oluşturun.

Bileşen mantığı, şablonlar yerine JavaScript’te yazıldığı için, uygulamanız boyunca kolayca zengin veri iletebilir ve state bilgisini DOM dışında tutabilirsiniz.

Bir kere öğrenin, Her yerde yazın

Kullandığınız diğer teknolojilerle ilgili varsayımlar yapmıyoruz. Bu nedenle yeni özellikleri, mevcut kodunuzu baştan yazmadan React ile geliştirebilirsiniz.

Aynı zamanda React, Node kullanarak sunucu tarafında sayfa oluşturabilir ve React Native ile mobil uygulamalara güç sağlar.


Basit Bir Bileşen

React bileşenleri, girdi verileri alan ve ne gösterileceğini dönen bir render() methodu sağlar. Bu örnekte, XML benzeri bir sentaks olan JSX kullanılıyor. Bileşene iletilen girdi verilerine, render() methodunda this.props aracılığıyla ulaşılabilir.

JSX isteğe bağlıdır ve React’i kullanmak için gerekli değildir. JSX derleme adımı ile üretilen ham JavaScript kodunu görmek için Babel REPL‘i deneyin.

Canlı JSX Editörü
class HelloMessage extends React.Component {
  render() {
    return <div>Merhaba {this.props.name}</div>;
  }
}

root.render(<HelloMessage name="Ali" />);
Sonuç
Merhaba Ali

Durumlu Bir Bileşen

Bir bileşen, girdi verileri (this.props ile ulaşılabilir) almanın yanı sıra, dahili state verisi (this.state ile ulaşılabilir) yönetebilir. Bir bileşenin durum verileri değiştiğinde, oluşturulan görüntü render() methodunun tekrar çağırılması ile güncellenecektir.

Canlı JSX Editörü
class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { seconds: 0 };
  }

  tick() {
    this.setState(state => ({
      seconds: state.seconds + 1
    }));
  }

  componentDidMount() {
    this.interval = setInterval(() => this.tick(), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return (
      <div>
        Saniye: {this.state.seconds}
      </div>
    );
  }
}

root.render(<Timer />);
Sonuç
Saniye: 2

Bir Uygulama

props ve state kullanarak, küçük bir Yapılacaklar (Todo) uygulaması oluşturabiliriz. Bu örnekte state, hem öğelerin bulunduğu güncel listeyi hem de kullanıcının girmiş olduğu metni takip etmek için kullanılıyor. Olay yöneticileri, satıriçi oluşturuluyor gibi gözükmelerine rağmen, olay delagasyonu ile toplanıp gerçekleştirilir.

Canlı JSX Editörü
class TodoApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = { items: [], text: '' };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  render() {
    return (
      <div>
        <h3>YAPILACAKLAR</h3>
        <TodoList items={this.state.items} />
        <form onSubmit={this.handleSubmit}>
          <label htmlFor="new-todo">
            Ne yapılması gerekiyor?
          </label>
          <input
            id="new-todo"
            onChange={this.handleChange}
            value={this.state.text}
          />
          <button>
            Ekle #{this.state.items.length + 1}
          </button>
        </form>
      </div>
    );
  }

  handleChange(e) {
    this.setState({ text: e.target.value });
  }

  handleSubmit(e) {
    e.preventDefault();
    if (this.state.text.length === 0) {
      return;
    }
    const newItem = {
      text: this.state.text,
      id: Date.now()
    };
    this.setState(state => ({
      items: state.items.concat(newItem),
      text: ''
    }));
  }
}

class TodoList extends React.Component {
  render() {
    return (
      <ul>
        {this.props.items.map(item => (
          <li key={item.id}>{item.text}</li>
        ))}
      </ul>
    );
  }
}

root.render(<TodoApp />);
Sonuç

YAPILACAKLAR

    Harici Eklentiler Kullanan Bir Bileşen

    React, başka kütüphaneler ve frameworkleri arayüz olarak kullanmanıza olanak sağlar. Bu örnek, <textarea> değerini anlık dönüştürmek amacıyla, bir Markdown kütüphanesi olan remarkable‘ı kullanmaktadır.

    Canlı JSX Editörü
    class MarkdownEditor extends React.Component {
      constructor(props) {
        super(props);
        this.md = new Remarkable();
        this.handleChange = this.handleChange.bind(this);
        this.state = { value: 'Merhaba, **dünya**!' };
      }
    
      handleChange(e) {
        this.setState({ value: e.target.value });
      }
    
      getRawMarkup() {
        return { __html: this.md.render(this.state.value) };
      }
    
      render() {
        return (
          <div className="MarkdownEditor">
            <h3>Girdi</h3>
            <label htmlFor="markdown-content">
              Biraz markdown yazın
            </label>
            <textarea
              id="markdown-content"
              onChange={this.handleChange}
              defaultValue={this.state.value}
            />
            <h3>Sonuç</h3>
            <div
              className="content"
              dangerouslySetInnerHTML={this.getRawMarkup()}
            />
          </div>
        );
      }
    }
    
    root.render(<MarkdownEditor />);
    
    Sonuç

    Girdi

    Sonuç

    Merhaba, dünya!