[]

Şuradaki react kodunu izah edebilecek bir yardımsever çıkar mı?

Selamlar, bir YouTuber buldum. Çok güzel tasarımları var. Adamın ne yaptığını anlamaya çalışıyorum, kodlarını okumaya uğraşıyorum ama tıkanıyorum bazen. Aşağıdaki kodlarda bir navbar yapıyor. Birkaç yeri anlayamıyorum bir türlü.

1) Buradaki <header className={styles.navbar}> kodunda, header className'inde kullanılan styles nereden geliyor?

2) <ul className={nav ? [styles.menu, styles.active].join(' ') : [styles.menu]} >

Yukarıdaki, ternary operatöründen gelen styles yine nereden geldi? .'dan sonraki kısımlar, muhtemelen css tagleri. Ve neden ' ' stringiyle birleştirme ihtiyacı hissediyoruz oradaki kodu?

Yardımcı olursanız çok sevinirim. Bakıyorum, bakıyorum ama bir türlü anlamadım.

import { React, useState } from 'react';
import styles from './Navbar.module.css';
import Logo from '../../images/logo.png';
import {
AiOutlineUser,
AiOutlineSearch,
AiOutlineMenu,
AiOutlineClose,
} from 'react-icons/ai';

const Navbar = () => {
const [nav, setNav] = useState(false);

return (
<header className={styles.navbar}>
<img src={Logo} alt='Logo' />
<nav>
<ul className={nav ? [styles.menu, styles.active].join(' ') : [styles.menu]} >
<li>
<a href='/#'>Learn More</a>
</li>
<li>
<a href='/#'>Log in</a>
</li>
<li>
<a href='/#'>Sign up</a>
</li>
<li>
<AiOutlineSearch size={25} style={{ marginTop: '6px' }} />
</li>
<li>
<AiOutlineUser size={25} style={{ marginTop: '6px' }} />
</li>
</ul>
</nav>
<div onClick={()=> setNav(!nav)} className={styles.mobile_btn}>
{nav ? <AiOutlineClose size={30} /> : <AiOutlineMenu size={30} />}

</div>
</header>
);
};

export default Navbar;

 
hem 1, hem 2 icin bkz: create-react-app.dev

1) import styles from './Navbar.module.css'; buradan geliyor. module.css dosyalari javascript dosyasinda import edilip bu sekilde kullanilabiliyor. Navbar.module.css dosyasinda navbar class'ini bu sekilde kullanabiliyorsun.

2) ayni yerden geldi. noktadan sonraki kisimlar class isimleri. ['bir-class', 'bir-baska-class'].join(' ') 'bir-class bir-baska-class' sekline geliyor. birden fazla class kullanmak icin boslukla birlestirmis yani.
  • lemmiwinks  (12.10.22 14:24:43) 
1
buraya yazılanların hakları Sir Anthony Hopkins'e aittir.
yazan eden compumaster, ilgilenen eden fader
modere edenler angelus, Artibir, aychovsky, baba jo, basond, compumaster, deckard, duyulmasi gerektigi kadar, fader, fraise, groove salad, kahvegibi, kaymaktutmayansicaksut, kibritsuyu, monstro, pandispanya, robin, ron dennis
bu sitede yazılanların hiçbiri doğru değildir. site içeriği küçükler için sakıncalı olabilir. yazılardan yazarları sorumludur. kaynak göstermeden alıntılanamaz. devlet tarafından atanmış bir kurumun internet üzerinde kimin hangi bilgiye ulaşıp ulaşamayacağına karar vermesi insan haklarına aykırıdır. web siteleri kullanıcıların istekleri doğrultusunda bağlandıkları yerlerdir. kullanıcılar isterlerse bir web sitesine bağlanmayabilirler. bu güçleri ve imkanları mevcuttur. bir kullanıcı bir siteye bağlanmak istiyorsa bu onun tercihi ve hakkıdır. bağlanmak istemiyorsa bu yine onun tercihi ve hakkıdır. halkın kendisine hizmet etmesi için görevlendirdiği kurumlar hadlerini aşıp halka neye ulaşıp ulaşmayacağını bilmeyen cahil cühela muamelesi edemezler. ebeveynlerin çocuklarını sakıncalı içeriklerden koruması için çok sayıda bedava ve ücretli yazılım mevcuttur. bu yazılımlar bir web tarayıcısını kullanmaktan daha karmaşık teknik bilgi gerektirmemektedir. devletin milletini küçük düşürmesi ve ebleh yerine koyması yasaktır. Skimlinks ile linkler üzerinden yönlendirme payı alınmaktadır.