sticky ile çözebilirsiniz. Şöyle bir örnek var => https://codepen.io/simevidas/pen/JbdJRZ
sizin için bir örnek yaptım => https://jsfiddle.net/ejfnrq0k/
Siteye girdim ve yukarda examples kısmındaki ilk örnek sizin istediğiniz responsive özelliğini sağlıyor.
$(document).ready(function() {
$('#responsive').lightSlider({
item:4,
loop:false,
slideMove:2,
easing: 'cubic-bezier(0.25, 0, 0.25, 1)',
speed:600,
responsive : [
{
breakpoint:800,
settings: {
item:3,
slideMove:1,
slideMargin:6,
}
},
{
breakpoint:480,
settings: {
item:2,
slideMove:1
}
}
]
});
});
responsive altındaki breakpoint kısımları sayfanın genişlik değeri.
var str = "merhaba dunya naber";
var words = str.split(" ");
Yukarıdaki gibi bir örnek ile yapabilirsin. words değişkenin bir array ve bu array içerisine tüm kelimelerin gelir.
var kelime1 = words[0]
var kelime2 = words[1]
var kelime3 = words[2]
şeklinde istediğin kelimeyi alabilirsin.
Build işlemi sonrası react dosya dizinlerini direk sunucuya atacak gibi ana dizin olarak çıkarır. src/assets gibi. Bu yüzden de gerekli olan dosyalar bulunamaz ve hata alırsın
Şurda daha ayrıntılı açıklama var
Ayrıca burada da index.html i nasıl açılabileciği hakkında yazılar var
import React, { useEffect, useState } from "react";
import "./styles.css";
export default function App() {
const [data, setData] = useState(null);
const [searchData, setSearchData] = useState(null);
useEffect((_) => {
setData([
{
name: "Who Am I",
poster: "http:///"
},
{
name: "Düğün Dernek",
poster: "http:///"
},
{
name: "Deneme",
poster: "http:///"
}
]);
}, []);
const search = (e) => {
if (e && e != "") {
console.log(e)
setSearchData(data.filter((x) => x.name.indexOf(e) > -1))
} else {
setSearchData(data)
}
};
return (
<div className="App">
<input onChange={(e) => search(e.target.value)} />
{searchData && searchData.map((x) => <span>{x.name}</span>)}
<div></div>
</div>
);
}
Hocam yukarıdaki örneği test edebilmen için statik data ile yaptım. Sen oraya kendi datanı koayabilirsin. Usestate içerisindeki data senin aksi değişkenin olacak.
@tayfunerbilen çok teşekkür ederim. Aradığım şey buydu.
@webdevyusuf denedim fakat yine aynı. Sorun for döngüsünün beklememesi. Attığınız örnekteki async-await olayını bende denedim ama o şekilde de olmuyor
@webdevyusuf cevap için teşekkürler ancak benim sorunum bu değildi. Sadece yukarıdaki kodda 2 console.log çıktısını sekron çalıştırmak istiyorum. Servis vs. kullanmıyorum.
Ben Material Theme ve Atom One Dark Theme kullanıyorum. Ayrıca font olarakta Fira Code kullanıyorum, baya hoş görünüyo.