Let's stop and celebrate the progress we've made, and everything we've learned so far. We can use the index of our mapped array to provide a simple index to the component. Every item in a list in React requires a unique key so that React can apply reactivity to it's data. So, we can use the () function to iterate over each item in our data, and return a with the relevant data. Inside curly braces in JSX, we can write anything that's a valid Javascript expression. Function componentĬlass TodoItem extends React. You can create new components in React in two ways: Function components, or Class components. To follow along with the example in this article, the easiest way is to create a new pen on Codepen.io Creating components in React To dive deeper into the code, checkout the source code on Github. I've also taken the example app a step further by using Styled Components to handle styling, and create a light and dark mode theme. Instead, I will touch on some of my key takeaways in learning React. This post won't go into detail on how to create every part of the application, as that would be a long post. But I can also see that once you get past a certain level of familiarity, React would be a lot of fun to work with.Įveryone loves a todo list app! It's a great starting point for sizing up a new framework, as it requires such functionality as state management, two-way data binding, working with lists, styling, and controling form elements. Everyone always praises Vue for it's shallow learning curve, and so far React has proved to be harder to learn. I've been working with Vue primarily for a couple of years, so it'll be interesting to see how the two frameworks compare. I've spent some time recently learning React.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |