- 200
- 70 104
KodFun
Приєднався 8 лис 2022
React'ı Düz HTML Dosyada ve CodePen'de Nasıl Kullanırım?
00:00 Giriş
00:40 Düz HTML Entegrasyonu
06:43 CodePen Entegrasyonu
ÖRNEK 1: github.com/kodfun/UA-camJavaScriptVideos/tree/main/ReactHtmlEntegrasyon
ÖRNEK 2: codepen.io/kodfun/pen/wvbbxRz
DÜZ HTML
1. React ve React-Dom UMD javascript kütüphanelerini ekle.
2. Babel Standalone javascript kütüphanesini ekle ve text/babel türünde script oluştur.
3. Bir react function bileşeni (component) oluştur.
4. Root container elementi oluştur ve ReactDOM ile bileşeni render et.
CODEPEN
1. JavaScript Preprocessor olarak Babel seç
2. React ve React-Dom import et
3. Bir react function bileşeni (component) oluştur.
4. Root container elementi oluştur ve ReactDOM ile bileşeni render et.
00:40 Düz HTML Entegrasyonu
06:43 CodePen Entegrasyonu
ÖRNEK 1: github.com/kodfun/UA-camJavaScriptVideos/tree/main/ReactHtmlEntegrasyon
ÖRNEK 2: codepen.io/kodfun/pen/wvbbxRz
DÜZ HTML
1. React ve React-Dom UMD javascript kütüphanelerini ekle.
2. Babel Standalone javascript kütüphanesini ekle ve text/babel türünde script oluştur.
3. Bir react function bileşeni (component) oluştur.
4. Root container elementi oluştur ve ReactDOM ile bileşeni render et.
CODEPEN
1. JavaScript Preprocessor olarak Babel seç
2. React ve React-Dom import et
3. Bir react function bileşeni (component) oluştur.
4. Root container elementi oluştur ve ReactDOM ile bileşeni render et.
Переглядів: 51
Відео
JavaScript ile Video ve Resimleri Tam Ekran Modunda Nasıl Gösteririm?
Переглядів 7328 днів тому
JavaScript ile video, resim ya da paragraf gibi bir elementi tam ekran modunda gösterebileceğinizi ve yine JavaScript yardımıyla tam ekran modundan çıkabileceğinizi biliyor muydunuz? Kaynak Kod: github.com/kodfun/UA-camJavaScriptVideos/tree/main/TamEkranYapma
CSS ile Resim Üzerine İkon Yerleştirme
Переглядів 8628 днів тому
Bu videoda HTML ve CSS kullanarak farklı yöntemlerle bir resmin üzerine yıldız gibi bir ikonu nasıl yerleştirebileceğinizi gösterdim. Önce sıradan bir unicode karakter olan ★ sembolü ile yapıp sonrasında fontawesome kütüphanesi kullanarak yaptım. Kaynak Kod: github.com/kodfun/UA-camCssVideos/tree/main/ResimUzerindeIkon
JavaScript ile Ekstra Boşlukları Yok Et!
Переглядів 60411 місяців тому
JavaScript ile Ekstra Boşlukları Yok Et!
JavaScript'te Konuşma Tanıma (Speech Recognition)
Переглядів 290Рік тому
JavaScript'te Konuşma Tanıma (Speech Recognition)
CSS shape-outside Özelliği ile Sınırları Değiştir
Переглядів 103Рік тому
CSS shape-outside Özelliği ile Sınırları Değiştir
At Yarışı Uygulaması (HTML, CSS & JS - Başlangıç Seviyesi)
Переглядів 966Рік тому
At Yarışı Uygulaması (HTML, CSS & JS - Başlangıç Seviyesi)
Visual Studio Code Live Preview Eklentisi
Переглядів 796Рік тому
Visual Studio Code Live Preview Eklentisi
C#'ta Class ve Struct Arasındaki Fark Nedir?
Переглядів 450Рік тому
C#'ta Class ve Struct Arasındaki Fark Nedir?
C# ile Benzersiz/Tekrarsız Rastgele Sayılar Üretme (3 Farklı Yöntemle)
Переглядів 535Рік тому
C# ile Benzersiz/Tekrarsız Rastgele Sayılar Üretme (3 Farklı Yöntemle)
Visual Studio Code'da Çoklu İmleç ile Çoklu Düzenleme
Переглядів 356Рік тому
Visual Studio Code'da Çoklu İmleç ile Çoklu Düzenleme
C# .NET ile API'lere GET ve POST İstekleri (HttpClient)
Переглядів 1,8 тис.Рік тому
C# .NET ile API'lere GET ve POST İstekleri (HttpClient)
JavaScript ile Yapılacaklar Listesi (To-Do List) Uygulaması
Переглядів 831Рік тому
JavaScript ile Yapılacaklar Listesi (To-Do List) Uygulaması
JavaScript ile Yılan Oyunu Geliştirme
Переглядів 3,4 тис.Рік тому
JavaScript ile Yılan Oyunu Geliştirme
Çok açıklayıcı bir video teşekkürler.
First/ilk
yalnız bu metod ios cihazlarda işe yaramıyor
Kafam karisti tam tersi olmayacak mi 😅
😁😁😁
B
Emeğinize sağlık hocam. Bir de sorum olacaktı. Bu tarz kaliteli dikey video kaydı nasıl alıyorsunuz?
Ekranı ayarlardan dikey yerleşime alıp monitörü de dikey yapıp camtasia programı ile ekran kaydı alıyorum.
@@kodfun Çok teşekkürler hocam
B I guess
muhteşemsiniz
css i bu kadar iyi örnekleyen kanal yok elinize sağlık
++
sagolun
Ah js ahhhh react
Teşekkürler hocam☑
Hocam dinamik sürekli get istekten nasıl yaparız
Eline sağlık anlaşılır video olmuş
Çok teşekkürler
Harika anlatım teşekkürler
arada syntax ' ı hatırlayamayıp gelip bir daha bakıyorum hocam :) elinize sağlık <3
source code
The original source code is in the link provided on the video.
Süpersin abi takipteyim
harika hemen yaptım takipteyim
çok iyi be abi takipteyim
Hocam bu videoyu nasıl bu şekilde yaptın. Video edit ile video çekebilir misin
Editler için genellikle Camtasia yazılımını kullanıyorum. Ekran kaydedip kaydettiğim ekranları Adobe express ile hazırladığım görsellere yerleştiriyorum.
Hocam key mi value yi mi yazıyoruz
Key
@@suleymanakbulut1008 hocam videoları nasıl edit ediyorsunuz bir video paylaşabilir misiniz
Süpersin abi
Sürekli gözüme batan bi durumdu, bilgi için teşekkürler hocam.
Typescript candır.
Abi Flex nedir
Elinize sağlık hocam
Guzel olay, emeğine sağlık ❤
Emeğine sağlık ❤
Emeğine sağlık ❤
Hocam çok güzel bir anlatım olmuş keşke daha fazla içeriğiniz olsa, yani sadece client ne response bunu bile 1cümleyle anlatarak yapıyor olmanız bile çok önemli . Kodlama dünyasında Türkçe kaynak yok demiyorum ancak net bir şekilde nitelikli bir anlatım görmüyoruz , bundan ötürü emeğinize sağlık Sosyal medyalar üzerinden de takip etmeye başlıyorum sizi
Güzel ama arayüz eklense pc asistanı olsa daha iyi olur
Hocam teşekkürler , sorum şu hashset yapısını tekrarsiz olusturacagimiz bütün veri tipleri için kullanabilir miyiz yoksa sadece value type mı olmak zorunda?
Teşekkürler hocam, gayet açık ve anlaşılırdı.
Oha bu kadar kolay mı?!??!
hocam mikrofon uzaya çıkıyormu ? bazuka gibi
😁😁😁
Visual studio code bi anda html intellisense özelliği çalışmayı bıraktı çözümü ne olabilir
Bir ihtimal ayarlarından kaynaklı olabilir, settings kısmında intellisense, auto-complete suggestions gibi keywordler ile arama yapıp kontrol edebilirsiniz. Diğer ihtimal belki bir eklenti ile çakışıyordur.
@@kodfun emmet jsonına html dilini ekleyince çözüldü garip bi şekilde eskiden de yoktu ama çalışıyordu
Abi 2 3 videonu gördüm valla helal olsun güzel anlatıyon ben bilsem az biliyom okadar iyi anlatamam
Çok iyi abi
Sadece ve anlaşılır ağzınıza sağlık süper bir video olmuş
Amazing!
what is dis
++
sadece ctrl+d basarak da cogaltilabiliyor
baya yararlı abone oldum
Çıplak ayaklı olması peki
bu sesler nasıl belirleniyor?
tr kısmına en yazarsan ıngılzıce olur mesela onlaar ınternetten bak fr yazarsan fransızca olur
Iosta yapabilir miyim?