Çok Kolay Bir React Projesi | Yeni Başlayanlar İçin React
HTML-код
- Опубликовано: 25 фев 2022
- Merhaba, bu videoda React öğrenmeye yeni başlayanların yararlanacağı çok kolay bir projeyi yaptım. İyi seyirler dilerim.
Projenin Kodları: github.com/burakndmr/-youtube...
Videodaki Inputu aldığım site: www.creative-tim.com/learning...
Video işinize yaradıysa abone olarak destek olabilirsiniz.
-------------------------------------------------------------------------------------
-İletişim-
İnstagram: / burakdmr.dev
Github: github.com/burakndmr
Twitter: / burakdmr09
-------------------------------------------------------------------------------------
"Artificial.Music - Faithful Mission" is under a Creative Commons (CC BY 3.0) license.
/ smarttoaster
🎵 Music provided by BreakingCopyright: bit.ly/faithful-mission-song
Harika video resmen bayıldım 👏🏻
Yazılım öğrenmek için güzel bir kanal 👍🏼
Merhaba Burak Hocam, Linkedinden gördüm postunuzu izledim. Gayet başarılı akıcı bir anlatım. Teşekkürler, Devamını bekliyoruz. İyi çalışmalar.
Yorumunuz için çok teşekkür ederim.
Süper video olmuş. Başarının devamını dilerim. :)
Teşekkür ederim :)
Daha fazla video bekliyorum ellerine sağlık 👍👏
Teşekkür ederim dostum, gelecek 👊
Gereksiz ayrıntılardan uzak, tam amaca uygun harika bir video olmuş. Teşekkürler...
yeni öğrendiğin zamanlarda yapıyı anlamak için, juniordan dinlemek çok daha anlaşılır olabiliyor. aynı yollardan yakın zamanda geçmiş olmasından dolayı insanların nerelerde takılacağını nerelere değinmesi gerektiğini çok daha iyi biliyor
Yorum için teşekkürler :)
Ellerine sağlık. Güzel video. Böyle devam. Başarılar dilerim.
Teşekkür ederim dostum
Eline sağlık brom devamını bekliyoruz ⚡
Teşekkür ederim, yetişirse yarın yeni video gelecek⚡
@@BurakDemiryt Heyecanla bekliyorum.
aşırı güzel videoydu
Çok iyi bir video teşekkürler
İzlediğim en sade ve anlaşılır react anlatımı 🙏
Teşekkür ederim. Bayağı talep var, bu aralar tutorial içeriklerine devam etmeyi düşünüyorum :)
@@BurakDemiryt takipteyim kolaylıklar diliyorum.
devam et kardesim yaptiklarin ilgi cekici ve izlenen seyler, birakma video yuklemeyi daha fazla kitleye ulasacaksin
Yorumun için teşekkür ederim dostum, devam edeceğim kesinlikle 👊
@@BurakDemiryt bizde kod, bilisim, teknoloji sevenler olarak desteklerimize devam edecegiz
@@futbolyayinlari9919 teşekkür ederim 🙏👊
Ilerde bu videolarini iş başvurusu için kullanabilirsin
Evet haklisin
sağ ol başkan.
html css ve js derslerine başladım ve frontendde uzmanlaşmayı istiyorum tabi daha cssin yarısındayım ama zmnla olucak inşallah ve sen gibi yaşıtımda birisi bana çok motive verior lütfen kanalı bir süre sonra boşlama hep devam et başarılar
Yorumun için teşekkür ederim, elimden geldiğince içerik yükleyeceğim. Başarılar dilerim 👊
Dostum şuan ne seviyedesin herhangi bir kurumda işe falan girdinmi
@@ramazanerdem8417 malasef üni olmayincs ona odaklandım yazılım eğitimim kaldı HTML CSS bitti jsnin yarısındauim
@@geleceğe1adım bırakmasan iyi olurdu fakat yaşın çok değil sanırım üniye falan hazırlandığına göre vaktin bol tekrar başlayabilirsin. :)
Sorunun sebebi nedir bilmiyorum. Fakat, VS Code otomatik kaydet seçeneğini açarsan ve 1 saniye yaparsan belki daha az o sekmeye gidip kaydet yapman gerekir.
Çok mantıklı teşekkür ederim, genelde olmuyor zaten. Arada böyle denk geliyor.
Merhabalar,
vscode 'ta kullandığınız tema nedir? Ve react için hangi eklentileri kullanıyorsunuz?
Merhaba, react için "ES7+ React/Redux/React-Native snippets" ismindeki eklentiyi kullanıyorum. Bu videoda kullandığım tema ise Tokto Night Storm.
Thank you dude, clear explanation for beginners like me, to support you, I shared your video on LinkedIn and Twitter, hope you'll be watched more. Good job 👍
Thanks man 🙏🏻 👊🏻
Failed to load resource : the server responded with a status of 401 dedi sonrada axios eror dedi benimle mi ilgili bir hata yoksa api ile mi ilgili
Eline sağlık.
Teşekkürler
Kral öncelikle ağzına sağlık. Bir sorum olacak. Videonun sonlarına doğru eklediğin kodu belirli bir süre sonra hata veriyor ve ekrana herhangi bir şey yazdırmıyor. Git de ki kodda o alanı {city && } bu şekilde yapmışsın. Bu şekilde aktif olarak çalışıyor. Bunun nedeni nedir?
Yorumun için teşekkürler, videoda dikkatsizliğimden dolayı onu eklememişim, bunun sebebi şu: Eğer city datası yoksa o componentin içine bir şey gitmiyor ve hata veriyor. Bu yeni kodda ise react'e şunu söylüyoruz: Eğer city datası yoksa hiçbir şey yazdırma, varsa bana bu componenti göster.
Sen de olduğu gibi tek istek atıp bırakmıyor sürekli olarak atıyor bu sebepe 429 hatası alıyorum veri çekemedim ne yapmalıyım
Projeyi geliştirmek isteyen arkadaşlar API limitini doldurmamak adına kendisine şehir database oluşturup oradan inputa girilen şehir varsa apiye öyle istek at tarzında kullanabilir.
Evet, çok doğru.
Muhtemelen public'teki dosyayı dahil ettiğin için hata alıyorsun. Onu dahil etmene gerek yok zaten.
eline sağlık
Teşekkür ederim
Abi bende npx ile dosya oluşmuyor
Dizin ismini küçük harfle başlatırsan sorun yaşamazsın tekrar kaydetmene gerek kalmaz
💪🔥
👊🙏
hocam merhabalar Uncaught TypeError: setSearch is not a function 17:40 dakikada bu hatayı alıyorum console log da ne ama neden aldığımı bir türlü anlamadım
Selamlar, kodları repoya ekledikten sonra ufak bir değişiklik yapmıştım, buradan ulaşabilirsin kodlara: github.com/burakndmr/-youtube-basic-weather-app
eğer çözüm bulamazsan buradan da, şu link sana yardımcı olabilir: stackoverflow.com/questions/62885542/typeerror-props-is-not-a-function-in-reactjs
Sade net amaca uygun css pek tabi önemli ama reactın mantığını anlamak paha biçilmez. useState, useEffect ve useFetch (axios da başımızın tacı) hookları reactın ruhu birazda jsx bilgisi esasında olay. keşke her anlatım bu videodaki gibi amaca yönelik ve net olsa.
Teşekkürler :)
Videodaki projeyi yapmak için hangi programları indirmem lazım hiç bilgim yok söyleyebilir misiniz
Eğer hiç bilgin yoksa bu projeyi yapmanıı önermem, kafan çok karışacaktır. Öncelikle html css js öğrenmelisin.
@@BurakDemiryt sen yinede söylersen çok iyi olur hocam
@@abluka2742 vscode ve nodejs indirsen yeterli sanırım. En baştan react anlatan bir video bulursan ilk bölümünde neler indireleceğine daha ayrıntılı ve uygulamalı ulaşabilirsin.
5:30'daki react conflict hatasının çözümü package.json dosyasındaki eslintconfig bölümünü silmek
Çok teşekkürler
Daha fazla react projesi gelsin
Neden olmasın :)
merhaba video çekerken kişinin görüntüsü ve ekranın gösterilmesi için videoyu hangi programda çekebiliriz?
Merhaba, OBS.
@@BurakDemiryt teşekkürler
tailwind ve npm yüzünden tonla hata aldım
reis {city: undefined} hata alıyorum ne yazdı isen bire bir yazdım neden city görmüyor olabilir
Projenin reposunda bazı değişiklikler yaptım, inceleyebilirsin. Bu versiyonunda hatalar vardı ve videodan sonra fark ettim ne yazık ki :/
dostum request atiyorsun ama global apilerde bir sınır vardır sen bu sınırı basit bir sekilde doldurursun onChange yerine onKeyDown eventini dinleyerek apiyi daha saģlıklı kullanabilirsin
Evet haklısın, teşekkür ederim tavsiye için.
Arada tam olarak ne fark var?
usta {"cod":401, "message": "Invalid API key. bu hatayı alıyorum ne yapmalıyım ?
Kullandığın api keyde problem var belli ki, benim kullandığım siteye gidip yeni bir api key almalısın.
hocam npx create-react-app yazıyorum hata veriyor not recognized falan diyor npx için yardımcı olur musun
Selam dostum, teminalinde şu komutu çalıştırıp da yeniden dener misin: npm i -g npx
@@BurakDemiryt abi bu sefer de npm i tanımlamıyor.
Bilgisayarında nodejs kurulu değil mi?
@@BurakDemiryt abi node js kurulu değilmiş pcde kurdum açtım sağol yardımcı olduğun için
@@aktifedits Kolay gelsin dostum :)
Merhaba , eline sağlık çok güzel bir video olmuş. Kendim de yapmaya çalıştım ama bir hata alıyorum. Acaba kodlarını paylaşabilir misin?
Merhaba, projeyi githuba eklemeyi unutmuşum, sayende hatırladım. Videoda bug olmamış fakat şimdi projeye girdiğimde bende de sorun olduğunu fark ettim ve çözdüm, incelediğinde doğrusunu göreceksin. Kodlara buradan ulaşabilirsin: github.com/burakndmr/-youtube-basic-weather-app
@@BurakDemiryt Çok teşekkür ederim geri dönüşün için ama herhalde github'a atarken default react projesini attın. Çünkü src kodları öyle gözüküyor.
@@hasanilterisdincer ahahah, anlamadım neden öyle olmuş. Şu an düzeltmiş olmam lazım, bakabilirsin.
@@BurakDemiryt tamamdır hocam çok sağolasın tekrardan uğraştırdım seni de
@@hasanilterisdincer Ne demek hocam, kolay gelsin.🙏
Udemide React Dersleri Turkce kaynak çok yetersiz bence udemi için bir ders yapsan iyi olur anlatim şeklin çok iyi ve en önemli şey empati yeteneyi sizde çok iyi tik tik diye geçmiyorsunuz karşinizdaki insani anlatmaya çalişiyorsunuz. Tessekur ederim
Belki bir süre daha tecrübe kazandıktan sonra yapabilirim, yorum için teşekkürler ⚡
Genel olarak react öğrenmesi daha zor vue daha kolay diyorlar ama ben react öğrenirken hiç zorlanmadım hatta vue bana daha karışık geldi.
Olabilir, öncesinde ne bildiğimizle de alakalı olabilir bu durum. İnsanlar biraz js öğrenip hemen react'e geçince neye uğradığını şaşırıyorlar.
@@BurakDemiryt evet olabilir.
merak ettiğim bir şey var iş bulmak istediğimizde böyle şeyler mi göstermeliyiz iş verene ben hala iş olarak ne yapıldığını anlamadım
İş olarak işverenlerin taleplerini yerine getiriyorsun. Bu işverenin ürününe göre değişir, yazılımcı olarak senin amacın görebildiğin kadar farklı senaryoyu görmek için pratik yapmak ve kendini geliştirmek. Bu tarz ufak projeler de senin ne kadar farklı durumla karşılaştığında neler yapabildiğini kanıtlamana yardımcı oluyor yalnızca.
@@BurakDemiryt işverenin tasklarına örnekler verebilirmisin mesela gün içinde patron bizde nne yapmamızı ister.
@@AmorFati2626 o an ihtiyaç neyse, birlikte her gün kısa toplantılar yapılıyor mesela şu an çalıştığım şirkette. O gün herkes neler yaptığını anlatıyor, ve ertesi gün için görevler veriliyor. Bu bir bug çözmek de olabilir yeni bir özellik geliştirmek de. Yeni bir tasarımı koda dökmek, ya da kullanıcı deneyimini iyileştirmek vs.
@@BurakDemiryt bunun için çok çalışana ihtiyaç duyuluyormu çünkü hep çok iş imkanı olduğundan bahsediliyor ve be nsürekli to do list yapıp duruyorum
@@AmorFati2626 bu projeden projeye değişebiliyor, Junior seviyede iş bulmak artık eskisi kadar kolay değil fakat evet, projede yeteri kadar insan olması önemli.
App.css ile index.css in farkı nedir ?
İkisi de css dosyası, sadece import edildikleri componentler farklı olarak düşünebilirsin.
@@BurakDemiryt cevabın için teşekkür ederim. İndex.css app.jsx'e import edilmediği halde bir değişiklik yaptığımda appjsx e etki ediyor bu kısmı anlayamadım.
@@thedeathhnters7294 react css modules konusunda araştırma yapmanı öneririm. Kafa karışıklığını çözeceğini umuyorum.
@@BurakDemiryt tamamdır hocam bakacağım teşekkür ediyorum tekrardan. son olarak .js ile .jsx arasında fark varmı basit projeler yapmaya çalışıyorum izlediğim bazı videolarda .js ile dosya oluştuyorlar bazılarında .jsx ile
@@thedeathhnters7294 bu tarz sorulara chatgpt daha güzel cevaplar veriyor :D
Daşşana gurban
kanka cok bos yapiyon
anlatım ezbere bilgi yetersiz ben beğenmedim
Geri bildirim için teşekkürler
merhaba şu kodları index.css e eklediğimde hata alıyorum. (unknown at rule @tailwind css şeklinde) neden olabilir @tailwind base;
@tailwind components;
@tailwind utilities;
Açıkcası hiçbir fikrim yok. Tailwind ya da react'in sürümüyle alakalı olabilir. Tavsiyem şu, tailwind'in dokümantasyonunu takip ederek videoyu izlemeden kendin projeye eklemeye çalış. O zaman sıkıntı çıkmaz büyük ihtimalle.
PostCSS Language Support diye bir eklenti indirince çözüldü.