How to render LISTS in React 📃

Поделиться
HTML-код
  • Опубликовано: 5 янв 2025

Комментарии • 48

  • @BroCodez
    @BroCodez  Год назад +21

    import List from './List.jsx'
    function App() {
    const fruits = [{id: 1, name: "apple", calories: 95},
    {id: 2, name: "orange", calories: 45},
    {id: 3, name: "banana", calories: 105},
    {id: 4, name: "coconut", calories: 159},
    {id: 5, name: "pineapple", calories: 37}];
    const vegetables = [{id: 6, name: "potatoes", calories: 110},
    {id: 7, name: "celery", calories: 15},
    {id: 8, name: "carrots", calories: 25},
    {id: 9, name: "corn", calories: 63},
    {id: 10, name: "broccoli", calories: 50}];
    return(
    {fruits.length > 0 && }
    {vegetables.length > 0 && }
    );
    }
    export default App
    import PropTypes from 'prop-types';
    function List(props){
    const category = props.category;
    const itemList = props.items;
    //itemList.sort((a, b) => a.name.localeCompare(b.name)); // SORT ALPHABETICAL
    //itemList.sort((a, b) => a.calories - b.calories); // SORT BY CALORIES
    //const lowCalItem = itemList.filter(item => item.calories < 100); // FILTER LOW CALORIES
    //const highCalItem = itemList.filter(item => item.calories >= 100); // FILTER HIGH CALORIES
    const listItems = itemList.map(item =>
    {item.name}:  
    {item.calories});

    return(
    {category}
    {listItems}
    );
    }
    List.propTypes = {
    category: PropTypes.string,
    items: PropTypes.arrayOf(PropTypes.shape({ id: PropTypes.number,
    name: PropTypes.string,
    calories: PropTypes.number})),
    }
    List.defaultProps = {
    category: "Category",
    items: [],
    }
    export default List
    .list-category{
    font-size: 2.5em;
    font-weight: bold;
    color: hsl(0, 0%, 20%);
    margin-bottom: 10px;
    text-align: center;
    border: 3px solid;
    border-radius: 5px;
    background-color: hsl(185, 100%, 50%);
    }
    .list-items li{
    font-size: 2em;
    list-style: none;
    color: hsl(0, 0%, 25%);
    text-align: center;
    margin: 0;
    }
    .list-items li:hover{
    color: hsl(0, 0%, 45%);
    cursor: pointer;
    }

    • @tee-hee9553
      @tee-hee9553 Год назад +1

      teacher, why we need to do those stuff like download npm create npm create vite@latest npm install, npm run dev, I see on other website they only import react like react/client or something, so when create an web application do we need to use import or create my-react-app and run I don't really understand about this it's confuse me I though I learn in a wrong way so confuse please if you have time answer me

  • @leivashenriquedelucenaaqui1126
    @leivashenriquedelucenaaqui1126 Год назад +2

    the best teacher ever!!!!!!!!!!!!!!!!!!!!!!!!!! thanks from brazil, we all aprecciate your classes!!!! you're born to teach!!!

  • @v.a2282
    @v.a2282 Год назад +8

    I learnt javascript from u and I was looking forward to learning react and u started making this series right then!! Thank you so much bro u have changed my life by making programming so interesting! Your hard work is very much appreciated

  • @Waltuh7862
    @Waltuh7862 Год назад +14

    Bro, I found your videos recently and they’ve been a godsend for me while studying in school and building my portfolio. I wanted to ask, have you considered doing a series on API’s?

    • @natureshour499
      @natureshour499 Год назад +3

      He is too amazing bro I love his affords a lot because no 1 in youtube is providing so much of perfect education course for free.I love bro code ❤

    • @Raghad-hy9cr
      @Raghad-hy9cr Год назад +2

      Totally agree! He is amazing at breaking down complex concepts into understandable ones, and API’s have a really bad learning curve (at least for me)😢.
      it needs someone like him to explain it in order for me to understand it

  • @lyawileh.a8741
    @lyawileh.a8741 5 месяцев назад

    Best instructor ever! You've made learning React a breeze.

  • @shreehari2589
    @shreehari2589 Год назад +19

    Since you already have JavaScript course can you upload react videos more often please, I think lot of people are waiting for react videos

  • @Soulcode-k
    @Soulcode-k 28 дней назад

    This was a blast as well.
    Man enjoy a tutorial when i understand it and this was the very tutorial i love❤❤❤❤❤

  • @TheLaidBackOne02015
    @TheLaidBackOne02015 Год назад +1

    Bro code, you're the absolute goat!

  • @GRAVKEN
    @GRAVKEN Год назад

    Thank you , I really searched a lot for a good and entertaining tutorial about listing in specific!

  • @enescagrbayraktutan6329
    @enescagrbayraktutan6329 Год назад

    You are a beast bro, keep up the good work man! please focus more on this course instead of javascript

  • @owenerhabor
    @owenerhabor Год назад +2

    You're the best !!!

  • @Rohan-cn4ji
    @Rohan-cn4ji 3 месяца назад

    this is literally the best thanks sm brocode

  • @unsjvr
    @unsjvr Год назад +1

    can't wait for the tutorial about hooks. I've watched a lot of tutorials about react hooks but still could not grasp it 😭

  • @danielmelek9348
    @danielmelek9348 Год назад

    Bro you are the real MVP 💐💐

  • @latifmoruf6720
    @latifmoruf6720 6 месяцев назад

    Excellent concept of teaching

  • @ayMillmusic
    @ayMillmusic 9 месяцев назад

    Great video! Thanks!

  • @vestorp
    @vestorp Год назад

    Thanks bro for your efforts, I learned alot from you 😁

  • @syedhuzairaslam-w7q
    @syedhuzairaslam-w7q 5 месяцев назад

    heyyy this tutorial is very helpful!!! thanks

  • @ChalooseSina
    @ChalooseSina 2 месяца назад

    best bro ever

  • @NapoleanBonaparte-bv2hz
    @NapoleanBonaparte-bv2hz Год назад

    Thanks a lot, now please upload the full version of react tutorial like you did with the rest.

  • @Jamal_Almansoub
    @Jamal_Almansoub Год назад +1

    😂a random comment😂
    I don't know "React"
    But I learn "Java"
    And like your videos

  • @max0206may
    @max0206may 8 месяцев назад

    @BroCodez Nice content ;) - Thanks I really appreciate your work and dedication

  • @Gabriel-yf8ke
    @Gabriel-yf8ke Год назад

    Thanks! Really useful!

  • @AdemGassouma-z4y
    @AdemGassouma-z4y 11 месяцев назад

    thanks u make my life easy bro

  • @danialalfayyadh2524
    @danialalfayyadh2524 Год назад

    Maybe I Got Error at 3:10 and I search the answer and I got the answer like this :
    function List() {
    const fruits = ["Apple", "Banana", "Coconut", "Pineapple", "Salak"];
    const listItems = fruits.map(fruit => {fruit});
    return (

    {listItems}

    );
    }
    export default List;
    And That's Work

  • @hunin27
    @hunin27 Год назад

    thanks Bro !!! ❤

  • @SoapCS2
    @SoapCS2 Год назад

    React full course coming?

  • @Divine_2468
    @Divine_2468 Год назад

    Bro Code, I just wanted to ask if you could make a video on kivy. I would really appreciate that if you are able to.

  • @life_with_rauf
    @life_with_rauf Год назад

    which os yuh using bro

  • @natureshour499
    @natureshour499 Год назад

    Bro code i am your big fan bro just 1 request i know it will be hard but if you will get time than please can you upload the video of Cypher security full course bro because its full course fee is too high bro, its not any pressure because i can understand bro in our daily life we don't get time but still if you can do it little by little than please have a look on it brother thankyou ❤

  • @danishsaifi7817
    @danishsaifi7817 Год назад

    I don't know anything about react but i am first here 😂❤

  • @thangavel_st
    @thangavel_st Год назад

  • @hellomihai
    @hellomihai 11 месяцев назад

    he was saying *lowCalFruit*... I thought he was saying *localeFruit*... I need a break 🤣

  • @utilizator500
    @utilizator500 Год назад

    Ok now do Angular pls

  • @DarkM999
    @DarkM999 Год назад

    we need video for rust programming language

  • @sakiasibaleiwaikomai
    @sakiasibaleiwaikomai 10 месяцев назад

    Upload more please

  • @nebularzz
    @nebularzz Год назад

    im tired and i read the title as "how to racist" when it appeared in my notifications

    • @peaklegacy146
      @peaklegacy146 Год назад +1

      accidently went back to default settings for a second😂

  • @adamgamer1711
    @adamgamer1711 Год назад

  • @abududivine6345
    @abududivine6345 Год назад

    First

  • @Delicatamente
    @Delicatamente 8 месяцев назад

    huge thanks!

  • @uff_statuss_
    @uff_statuss_ 9 месяцев назад

    category used for ???? @BroCodez