React 16 props Kullanımı

ReactJS çalışma ortamında sürekli bazı değişiklikler oluyor. Yeni değişiklik ise props kullanımıyla alakalı. ReactJS 16 sürümüyle beraber npx create-react-app my-app yaparak yeni bir tek sayfalık uygulama oluşturmaya başlamak bize kolaylık sağlıyor fakat props kullanımında da dikkat edilmesi gereken noktalar ortaya çıkıyor.
Bu yolla oluşturduğunuz app.js app.js dosyanızın içeriği standart olarak aşağıdaki gibi geliyor:

import React from 'react';
import logo from './logo.svg';
import './App.css';
 
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}
 
export default App;

burada porps kulanmak için yapılacak değişiklik sonucu app.js aşağıdaki gibi olmalıdır:

import React from 'react';
import logo from './logo.svg';
import './App.css';
 
function App(props) {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
         merhaba {props.name}
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}
 
export default App;

index.js dosyamız ise:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
 
ReactDOM.render(<App name="kod günlüğüm"/>, document.getElementById('root'));
 
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

Jquery Tarih Saat Seçme DateTimepicker Eklentisi

Şüphesiz jQuery Eklentileri projeleri süsleyen ve kullanıcıya güzel deneyimler sunmamıza yarayan araçlardan oluyor işte bu da onlardan biri; özellikle PHP projelerinizde tarih ve saat seçme olayını daha estetik hale getiren bir eklenti DateTimepicker eklentisi;
tarih ve saati kullanıcıdan almanın güzel bir yolu ben aktif olarak kullanıyorum paylaşmak istedim eklentinin ekran görüntüsü:

Kullanımı çok basit örnek olması açısından html kodlarını paylaşıyorum ve yazının altına kaynak dosyaları da aşağıya zip olarak ekliyorum; Okumaya devam et Jquery Tarih Saat Seçme DateTimepicker Eklentisi

javascript jquery ajax birden çok fazla veriyi post etme

ajax ile sayfa yenilemeden veri transveri işlemleri yaparken birden fazla değer gönderme ihtiyacı doğduğunda bunun çok farlı yolları elbet bulunabilir bu sadece bir yöntemdir.
hatalı kullanım: **data: “status=”+status+”name=”+name”**,
doğrusu: data: {status: status, name: name}

baştan sona tamamı örnek:

                    type: 'POST',
                    url: 'islem.php',
                    data: {id:id,mail:mail,kulad:kulad}
                    })

ajax multi data post

example 2

function gonder(){
    //Verileri Gönderme
    $.ajax({
        type:'POST',
        url:'islem2.php',
        data:$('#form1').serialize(),
        success: function (msg) {
            $('#yaz').html(msg);
            $('#btn').removeAttr('disabled');
        }
    });
}

buradaki örnekte ID değeri form1 olan formun içindeki bütün name alanları post edilecektir.

Javascript ile Scroll’a göre CSS Class vermek

Navbar yapımında en çok kullanacağımız yapılardan biri de scrolll aşağı kaydırıldığında gerçekleşecek olaylar zinciridir. Javascript ile CSS vermek, Javascript ile Class vermek,

örnek classımızın içeriği de padding

 $(window).scroll(function(){
 if($(document).scrollTop() > 50) { 
  	$('nav').addClass('shrink');
 	 } else {
  		$('nav').removeClass('shrink');
  		}
})

ornek css

nav.shrink {
	padding: 0;
	background-color:#f74c3c!important;
}

* bu örneğimizde scrollTop 50 den büyük olduğunda shrink classı uygulanmaya başlayacaktır.

JavaScript jquery Zıplama Efeckti Vermek

HTML’de Tanımlı bir div etiketine zıplama efekti vermek için kullanacağımız kod yapısı

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>effect demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
  <style>
  div {
    width: 100px;
    height: 100px;
    background: #ccc;
    border: 1px solid #000;
  }
  </style>
  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
 
<p>Click anywhere to apply the effect.</p>
<div></div>
 
<script>
$( document ).click(function() {
  $( "div" ).effect( "bounce", "slow" );
});
</script>
 
</body>

DEMO SAYFASI

Sayfa Yüklenince Toast yada Butona Tıklayınca Toast Örnekleri

Öncelikle jQuery toast plugin yazarı by Kamran Ahmede emeğinden dolayı teşekkür ederiz. Genel olarak başarılı bir eklenti olmuş kolaylıkla projelerine adapte edebilirsiniz projeyi arkadaş sadece butonlara tıklanma ile beraber tetiklenecek şekilde ayarlamış ama ben vereceğim örnekle sayfa yüklenince de toast mesajı görüntülenebilecek şekilde ayarladım.

Örneğin bir site içi mesajlaşma uygulamanız var yeni mesaj geldiğinde ekrana toast basmak için ilgili if yapısının içerisine hazırladığım 2. demodaki çalışmanın kaynak kodunu kullanabilirsiniz.

Projenin Kaynağı: https://kamranahmed.info/toast

DEMO1 – VARSAYILAN HALİYLE TÜM ÖRNEKLER

DEMO2 – SADECE SAYFA YÜKLENİNCE ÇALIŞACAK TOAST ÖRNEĞİ

2. DEMODA toast görünmesini sağlayan kod:

    <script type="text/javascript">
        $(document).ready(function() {
 
$.toast({
    heading: 'Information',
    text: 'Yeni Mesajınız var lütfen mesaj kutunuzu kontrol ediniz. <a href="#">tıklayın</a>',
	position: 'mid-center',
	icon: 'info',
    stack: false
})
 
    });
    </script>

burada dikkat edilecek nokta bu kod blogunun hemen yukarısında mutlaka ilgili jquery dosyaları include edilmiş olması gerekir aksi halde çalışmayacaktır.

ilgili jquery kod blogu:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.toast.js"></script>

JavaScript ile Dizi Oluşturma ve For Döngüsü

dizi.length ile oluşturulan dizinin boyutunu buluyoruz. Akabinde bilindik for döngüsünde kullanıyoruz dizi içeriği kaç adetse o kadar çalışıyor.

Örnek Uygulama

var dizi = ['ali', 'soyad', 35, 0.5];
console.log(dizi.length);
 for (var i = 0; i<dizi.length; i++) {
     console.log(dizi[i]);
 }

Callback fonksiyon kullanarak yazdırmak istersek:

dizi.forEach(function (k) {
    console.log(k);
});

setTimeout ile Belli bir süre sonra başlayan fonksiyon yazma

JavaScript’te x saniye sonra çalıştırmak istediğiniz fonksiyonlar için iki farklı yazımını yaptığım şu fonksiyonu kullanabilirsiniz

1. Kullanım şekli:

setTimeout( function () {
 
    console.log("çalışıyor");
 
}, 3000)

2. Kullanım Şekli:

var baslat = function () {
 
    console.log ("çalışıyor");
}
 
setTimeout(baslat, 3000);

3000 = 3 saniye

JavaScript setInterval Fonksiyon Kullanımı

Bir işlemi belli aralıklarla tekrarlamak bir fonksiyonu x saniyede 1 kere çağırmak gibi çok amaçlarda günü kurtaran bir fonksiyondur.

Örneğin aşağıdaki kullanımda program 10’a kadar sayacaktır kendinize göre uyarlayabilirsiniz

var s = 1;
var interval = setInterval(function () {
 
    if(s== 10) {
        clearInterval(interval);
    }
 
    console.log("sayınız "+ s);
    s++;
 
}, 1000);