week5_react_assignments #1
Conversation
budget-calculator projesini de video'yu izleyerek tamamladim. Ama klasoru cok fazla dosya oldugu icin buraya yuklenmiyor. local ekran goruntusunu ekledim.
|
budget-calculator projesini yuklemenize gerek yok @ahmetinan79. |
There was a problem hiding this comment.
@ahmetinan79 Bey çalışmanız egsersizlerin tüm gerekliliklerini yerine getirmiş. Elınıze sağlık. Bu şimdiye kadarkı kısımda Reactın temellerını anladığınızı gösterir.
Birkaç öneri ekledim react çalışmalarınızda bunları da dikkate alırsanız daha doğru kullanım olacağını düşünüyorum.
Çalışmalarınızda başarılar.
| return <li>{props.value}</li>; | ||
| } | ||
|
|
||
| function HobbyList (props) { |
There was a problem hiding this comment.
HobbyList componentine eger parent componentinden(varsa) data aktarmayacaksaniz props parametresi eklemenize gerek yok.(kaldirilabilir)
| function HobbyList (props) { | ||
| const hobbies = ['Surfing', 'Rock climbing', 'Mountain biking', 'Breakdancing']; | ||
| const listHobbies = hobbies.map((hobby) => | ||
| <Hobbies key={hobby} value={hobby} /> |
There was a problem hiding this comment.
Bu aliştırmada key={hobby} düzgün çalışır. Ancak hobbies içinde aynı eleman olması ihtimaline binaen key için 3 farklı anahtar tavsiyesi verılebilir.
1- hobbies.map((hobby, index) => <Hobbies key={index} value={hobby} />
2- key={Math.random()}
3- key={uuidv4()} alttaki linkteki paket kullanilabilir
| function App() { | ||
| return ( | ||
| <div className="App"> | ||
| <div style={{ |
There was a problem hiding this comment.
inline style kullanilmasi tavsiye edilmez. Çok satırlı kodlarda componenti okumayı ve anlamayı zorlaştırır.
App.css içinde style eklenebılır.
Ama böyle bir özellik varsa neden kullanılmasın?
| title = {title.moneyBack} | ||
| description = {description.moneyBack} | ||
| /> | ||
| ); |
There was a problem hiding this comment.
Bu şekilde 3 child components çalışıyor. Ancak react mantığı developerın işini kolaylaştırmayı amaçlar.
Mesela 3 değilde 100 olsaydı hepsını teker teker yazmak çok vakit alacaktı.
GuaranteeList gibi bir child oluşturup, map fonksıyonu kullanıp return etmenizi tavsiye ederim.
| <Count/> | ||
| </div> | ||
| ); | ||
| } |
There was a problem hiding this comment.
Grupta sorduğunuz gibi bu şekilde Counter parent component içinde Count ve Button component kullanarak
çalışabilir. Ancak dışarda kullanmak daha kullanıma uygun olacağından
<Button onClick={clickToCount} />
<Count count={count} />
denılerek clickToCount eventı ve count degerı Counter parent component içinde tanımlanarak
Count ve Button componentıne props gonderılerek Counter dısına alınabılır.
Aşağıdaki gibi mesela:
const Count = ({ count }) => <div className="counter">{count}</div>;
const Button = ({ onClick }) => <button onClick={onClick}>Add 1!</button>;
budget-calculator projesini de video'yu izleyerek tamamladim.
Ama klasoru cok fazla dosya oldugu icin buraya yuklenmiyor.
local ekran goruntusunu ekledim.