İlk dosyalar guncellemesi

Update README.md
Refactor


Delete .DS_Store

Author: gokhanozdemir

.DS_Store

@@ -18,6 +18,7 @@ Bu proje, create-react-app (CRA) kullanılarak oluşturuldu. Bu projenin çalı
 - [ ]  Terminalden klonlayın
 - [ ]  Projenin ana dizinine gidin
 - [ ]  `npm install --no-audit` komutuyla bağımlılıkları indirin
+Eğer kurulumda hata alırsanız, v16.20.0'a [bütün sisteminize sıfırdan yükleme yaparak](https://nodejs.org/en/blog/release/v16.20.0) veya [NVM - "Node Version Manager"](https://github.com/nvm-sh/nvm) kullanarak node versiyonunuzu geri çekmenizi tavsiye ederiz. Bunu kullanırken NVM metodunda biraz zorlanmanız normaldir. Yine de yapabilirseniz, geliştirme ortamı kurulumunda, kariyerinizde karşılaşabileceğiniz en zor adımlardan birini tamamlamış olacaksınız.
 - [ ]  `npm start` ile çalıştırın
 - [ ]  Push commits: git push origin `main`.
 

README.md

@@ -5,18 +5,18 @@
 */
 
 // State hook u import edin
-import React from 'react';
+import React from "react";
 
 // Gönderiler (çoğul!) ve AramaÇubuğu bileşenlerini import edin, çünkü bunlar App bileşeni içinde kullanılacak
 // sahteVeri'yi import edin
-import './App.css';
+import "./App.css";
 
 const App = () => {
   // Gönderi nesneleri dizisini tutmak için "gonderiler" adlı bir state oluşturun, **sahteVeri'yi yükleyin**.
   // Artık sahteVeri'ye ihtiyacınız olmayacak.
   // Arama çubuğunun çalışması için , arama kriterini tutacak başka bir state'e ihtiyacımız olacak.
-	
-  const gonderiyiBegen = gonderiID => {
+
+  const gonderiyiBegen = (gonderiID) => {
     /*
       Bu fonksiyon, belirli bir id ile gönderinin beğeni sayısını bir artırma amacına hizmet eder.
 
@@ -31,7 +31,9 @@ const App = () => {
   };
 
   return (
-    <div className='App'>
+    <div className="App">
+      App Çalışıyor
+      {/* Yukarıdaki metni projeye başladığınızda silin*/}
       {/* AramaÇubuğu ve Gönderiler'i render etmesi için buraya ekleyin */}
       {/* Her bileşenin hangi proplara ihtiyaç duyduğunu kontrol edin, eğer ihtiyaç varsa ekleyin! */}
     </div>

package-lock.json

@@ -1,21 +1,22 @@
 // MUÜ için bu dosyayı değiştirmenize gerek yok
 import React from "react";
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faInstagram } from '@fortawesome/free-brands-svg-icons';
-import { faHeart, faCircle, faCompass } from '@fortawesome/free-regular-svg-icons';
-import "./AramaÇubuğu.css";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faInstagram } from "@fortawesome/free-brands-svg-icons";
+import {
+  faHeart,
+  faCircle,
+  faCompass,
+} from "@fortawesome/free-regular-svg-icons";
+import "./AramaCubugu.css";
 
-const AramaÇubuğu = (props) => {
+const AramaCubugu = (props) => {
   return (
     <div className="search-bar-wrapper">
       <div className="social">
         <FontAwesomeIcon icon={faInstagram} />
       </div>
       <form className="search-form">
-        <input
-          type="text"
-          placeholder="Arama"
-        />
+        <input type="text" placeholder="Arama" />
       </form>
       <div className="social-wrapper">
         <div className="social">
@@ -32,4 +33,4 @@ const AramaÇubuğu = (props) => {
   );
 };
 
-export default AramaÇubuğu;
+export default AramaCubugu;

src/App.js

@@ -2,30 +2,27 @@
 // Doğru beğeni sayısını görüntülemek için proplardan gelen bir veri parçasını kullanın.
 // Beğeni sayısını artırmak için "gonderiyiBegen" fonksiyonunu kullanan bir onClick işleyicisi de ekleyeceksiniz.
 // (Ek görev olarak, kullanıcınızın aynı gönderiyi birden fazla kez "beğenmesini" engelleyin.)
-import React from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faComment, faHeart } from '@fortawesome/free-regular-svg-icons';
+import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faComment, faHeart } from "@fortawesome/free-regular-svg-icons";
 
-const BeğenBölümü = props => {
+const BegenBolumu = (props) => {
   // 🔥 Bu bileşenin parentının aşağıdaki propları düzgün gönderdiğinden emin olun.
   const { gonderiyiBegen, begeniSayisi } = props;
 
   return (
     <div>
-      <div
-        className='like-section'
-        key='likes-icons-container'
-      >
-        <div className='like-section-wrapper'>
+      <div className="like-section" key="likes-icons-container">
+        <div className="like-section-wrapper">
           <FontAwesomeIcon icon={faHeart} />
         </div>
-        <div className='like-section-wrapper'>
+        <div className="like-section-wrapper">
           <FontAwesomeIcon icon={faComment} />
         </div>
       </div>
-      <p className='like-number'>100 likes</p>
+      <p className="like-number">100 likes</p>
     </div>
   );
 };
 
-export default BeğenBölümü;
+export default BegenBolumu;

…c/bileşenler/AramaÇubuğu/AramaÇubuğu.css …c/bilesenler/AramaCubugu/AramaCubugu.csssrc/bileşenler/AramaÇubuğu/AramaÇubuğu.css renamed to src/bilesenler/AramaCubugu/AramaCubugu.css src/bileşenler/AramaÇubuğu/AramaÇubuğu.css renamed to src/bilesenler/AramaCubugu/AramaCubugu.css

@@ -0,0 +1,31 @@
+import React from "react";
+import Yorumlar from "../Yorumlar/Yorumlar";
+import BegenBolumu from "./BegenBolumu";
+import GonderiBasligi from "./GonderiBasligi";
+
+const Gonderi = (props) => {
+  // 🔥 Bu bileşenin parentının aşağıdaki propları düzgün gönderdiğinden emin olun.
+  const { gonderi, gonderiyiBegen } = props;
+
+  return (
+    <div className="post-border">
+      <GonderiBasligi
+        username={gonderi.username}
+        thumbnailUrl={gonderi.thumbnailUrl}
+      />
+      <div className="post-image-wrapper">
+        <img
+          alt="post thumbnail"
+          className="post-image"
+          src={gonderi.imageUrl}
+        />
+      </div>
+      {/* BegenBolumu düzgün çalışması için ihtiyaç duyduğu tüm proplara sahip mi? */}
+      <BegenBolumu gonderiyiBegen={() => gonderiyiBegen(gonderi.id)} />
+      {/* Yorumlar da proplara dikkat istiyor! */}
+      <Yorumlar />
+    </div>
+  );
+};
+
+export default Gonderi;

src/bileşenler/AramaÇubuğu/AramaÇubuğu.js src/bilesenler/AramaCubugu/AramaCubugu.jssrc/bileşenler/AramaÇubuğu/AramaÇubuğu.js renamed to src/bilesenler/AramaCubugu/AramaCubugu.js

@@ -0,0 +1,18 @@
+// Bu dosyada bir değişiklik yapmanıza gerek yok
+import React from "react";
+
+const GonderiBasligi = (props) => {
+  // 🔥 Bu bileşenin parentının aşağıdaki propları düzgün gönderdiğinden emin olun.
+  const { thumbnailUrl, username } = props;
+
+  return (
+    <div className="post-header">
+      <div className="post-thumb-wrapper">
+        <img alt="post header" className="post-thumb" src={thumbnailUrl} />
+      </div>
+      <h2>{username}</h2>
+    </div>
+  );
+};
+
+export default GonderiBasligi;

src/bileşenler/Gönderiler/BeğenBölümü.js src/bilesenler/Gonderiler/BegenBolumu.jssrc/bileşenler/Gönderiler/BeğenBölümü.js renamed to src/bilesenler/Gonderiler/BegenBolumu.js

@@ -4,7 +4,7 @@
   min-width: 400px;
   margin: 5px auto;
 }
-.post-header{
+.post-header {
   display: flex;
   align-items: center;
 }