Hello, courageous coder! Today, our adventure includes Lists, Keys, and CSS Styling in React. Imagine a library app where we display available books, show different content based on availability, and make the app pleasing to the eye. Intrigued? Let's begin!
Various lists guide us through the React cosmos. In React, we render lists using JavaScript's map() function inside JSX. Here's a list of books rendered in the UI:
JavaScript1const books = ['Book 1', 'Book 2', 'Book 3', 'Book 4']; 2 3function BookList() { 4 return ( 5 <ul> 6 {books.map((book) => ( 7 <li>{book}</li> // one <li> for each book 8 ))} 9 </ul> 10 ); 11}
The significance of keys in React comes into play when we deal with dynamic data changes, especially when rendering lists. In the dynamic world of web applications, a list can change due to many factors - items can be added, removed, reordered, or updated. Those changes produce new versions of lists.
Keys are what help React keep track of these changes. Every key must be unique among siblings - it's like an ID or barcode for an array element. React uses these keys to match elements with their previous versions and decide whether a particular component needs to be created, destroyed, updated, or moved.
In our previous book list example, we used the array index as a key. This solution is acceptable for static lists, where items don't change order or number. But when the list can change - due to user interactions or real-time data updates - using array indexes as keys can lead to bugs.
Consider a scenario where books can be added or removed. If we remove the first book from our list and use indexes as keys, React would think that all elements have changed because their index (key) would have shifted. But in reality, except for the first book, all others are still present.
This is why, for dynamic lists, it's best to use property values that uniquely identify each element, like a book ID or title:
JavaScript1const books = [ 2 { id:1, title: 'Book 1' }, 3 { id:2, title: 'Book 2' }, 4]; 5 6function BookList() { 7 return ( 8 <ul> 9 {books.map((book) => ( 10 <li key={book.id}>{book.title}</li> // key=book.id 11 ))} 12 </ul> 13 ); 14}
Here, book IDs give the elements a stable identity across renders. React can now efficiently track changes, update the UI smoothly, and provide a faster and bug-free user experience. Just like a barcoded library book making the check-out process efficient and error-free, keys provide smooth transitions in your React applications.
The simplest way to apply styles in React is using inline styles with the style attribute. Similar to HTML, in React, we can use the style attribute to add CSS styles directly to a JSX element. However, there is a significant difference — while the style attribute in HTML is a string, in React, it accepts a JavaScript object where properties are written in camel case and values are usually strings.
In our book list example, let's add inline styles to make available books look different from those that are checked out. Let's color the available book titles green and the titles of checked-out books red:
JavaScript1const books = [ 2 { id:1, title: 'Book 1', isAvailable: true }, 3 { id:2, title: 'Book 2', isAvailable: false }, 4]; 5 6function BookList() { 7 return ( 8 <ul> 9 {books.map((book) => ( 10 <li 11 key={book.id} 12 style={{ color: book.isAvailable ? 'green' : 'red' }} // Inline style 13 > 14 {book.title} 15 </li> 16 ))} 17 </ul> 18 ); 19}
In the snippet above, each list item's color is determined based on whether the book is available or not. We created a JavaScript object and assigned it to the style attribute (style={{ color: book.isAvailable ? 'green' : 'red' }}), where the keys are the CSS properties in camel case (color) and the values are the CSS values ('green' and 'red').
This way, inline styles in React allow you to add quick and simple styling to your components. This approach works fine for small scale styling, but for more substantial styling or defining styles that will be reused, external stylesheets or CSS modules are recommended.
So, if we think of our books as actors on a stage, inline CSS styles are the quick costume adjustments made just before the curtain rises, helping each book present themselves correctly to the audience!
While inline styles are suitable for small changes, for larger applications it is more conventional to use external CSS stylesheets. External stylesheets not only help us maintain cleaner code, but they also allow us to store all our styles in one central location.
React allows us to apply styles to our components by linking to external CSS stylesheets. We can introduce these styles to our components by using the className attribute.
Here's a fun fact: in regular HTML, we use the class attribute, but class is a reserved keyword in JavaScript (and by extension in JSX), so we use className in its place!
Let's demonstrate this with an example:
First, we create a new CSS file, say BookList.css, in the same directory as our BookList component:
CSS1/* BookList.css */ 2.book { 3 font-size: 16px; 4 margin: 10px; 5 padding: 5px; 6} 7 8.book-available { 9 color: green; 10} 11 12.book-checkedout { 13 color: red; 14}
In this CSS file, we've defined three different classes that we will apply to our books.
Now, we can import the BookList.css file in our BookList component and use these styles:
JavaScript1import React from 'react'; 2import './BookList.css'; // import the CSS file 3const books = [ 4 { id:1, title: 'Book 1', isAvailable: true }, // book available 5 { id:2, title: 'Book 2', isAvailable: false }, // book checked out 6]; 7function BookList() { 8 return ( 9 <ul> 10 {books.map((book) => ( 11 <li key={book.id} 12 className={`book ${book.isAvailable ? 'book-available' : 'book-checkedout'}`}> // apply CSS classes 13 {book.title} 14 </li> 15 ))} 16 </ul> 17 ); 18} 19export default BookList;
In the example above, we import BookList.css and then use the className attribute to apply CSS classes to our list items.
Just think of className as the hook that connects your CSS wardrobe to your HTML room, allowing your books to wear the styles you've carefully curated! You now have a fashionable library where books demonstrate their availability through their color - green for available books, and red for those checked out!
Fantastic! We've covered rendering lists, understanding keys, and adding styles in React.
Next, expect hands-on exercises for practicing these concepts. Looking forward to our next exciting lesson in the React galaxy! Safe travels!