ฝัง
- เผยแพร่เมื่อ 5 ส.ค. 2024
- 00:00:00 List component setup
00:00:36 array of strings
00:03:33 array of objects
00:05:21 key.id
00:07:02 sort objects
00:09:55 filter objects
00:12:18 resusable List component
00:16:28 CSS styling
00:19:43 conditional rendering
00:21:44 defaultProps
00:23:19 propTypes
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;
}
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
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
the best teacher ever!!!!!!!!!!!!!!!!!!!!!!!!!! thanks from brazil, we all aprecciate your classes!!!! you're born to teach!!!
Best instructor ever! You've made learning React a breeze.
Thank you , I really searched a lot for a good and entertaining tutorial about listing in specific!
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?
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 ❤
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
Since you already have JavaScript course can you upload react videos more often please, I think lot of people are waiting for react videos
I Agree with you bro.
Thanks bro for your efforts, I learned alot from you 😁
Bro code, you're the absolute goat!
heyyy this tutorial is very helpful!!! thanks
Great video! Thanks!
Thanks! Really useful!
You are a beast bro, keep up the good work man! please focus more on this course instead of javascript
Excellent concept of teaching
can't wait for the tutorial about hooks. I've watched a lot of tutorials about react hooks but still could not grasp it 😭
@BroCodez Nice content ;) - Thanks I really appreciate your work and dedication
thanks Bro !!! ❤
thanks u make my life easy bro
Bro you are the real MVP 💐💐
You're the best !!!
Thanks a lot, now please upload the full version of react tutorial like you did with the rest.
I'm also waiting for full video
which os yuh using bro
😂a random comment😂
I don't know "React"
But I learn "Java"
And like your videos
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.
React full course coming?
❤
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 ❤
I don't know anything about react but i am first here 😂❤
nope you are not
huge thanks!
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
Upload more please
we need video for rust programming language
Ok now do Angular pls
he was saying *lowCalFruit*... I thought he was saying *localeFruit*... I need a break 🤣
First
im tired and i read the title as "how to racist" when it appeared in my notifications
accidently went back to default settings for a second😂
category used for ???? @BroCodez