Without fail, you are going to need to iterate or loop over data in your programs no matter the language. In JavaScript we have several loop constructs to do this, as well as the so called higher order functions. These higher order functions allow a more concise syntax to allow you to iterate over a collection while applying the logic of your choice to each item in the collection if you like.…
There has been a paradigm shift in how React works with regard to state, classes, and functions. React now has a feature called hooks, and it looks like a game changer. From reading the react documentation, and watching React Conf, it looks like us web developers should become familiar with Hooks in React since they make for cleaner React code. Class components are still supported, but it looks like Hooks in combination with Function Components are the favored approach moving forward.…
In this tutorial we are going to add a NavBar component to the application we have been building in React. During this process we’ll need to do some refactoring in order to shift local state out of child components, and into the App parent component. By following this convention, we’ll need to raise events in the child components while handling them in the parent component. This allows our application to have a single source of truth.…
In this react tutorial we’ll review a few things and then look at how to delete an item from an array. The number of items in the array determines how many item components are displayed on the page. We want to be able to click a button on a specific item, and have React automatically remove it from the page. But first, let’s review a few key concepts in React.…
When we talk about composition, we are talking about using smaller pieces to assemble a larger cohesive unit. In React, elements are used to create components. In other words, common html pieces like divs, spans, forms, and so on are arranged together to create a component. In talking about composing components in React, we are referring to now taking one or more components and using them to build a larger part of the application.…
React elements have properties that are based on the standard DOM events. React elements are able to fire all the same events as the usual DOM elements. They are named using camelCase so don’t forget to use this convention on React Elements. So if you want to use onclick, it will actually be onClick. This is quite similar to how instead of using class, you need to use className.…
Now we’re going to learn about how to do conditional rendering in React. In other words if one condition exists, then we render a specific piece of information. If a different condition exists, then we would render a different piece of information to the browser. Well, React is not a templating language so we do not have access to html based if or else directives. No problem, we just move that logic to plain JavaScript.…
Creating a list in the browser is a super common technique for displaying a list of data. In this tutorial, we’ll learn about how to create a list of items using React. It’s a little different from how you might approach this when using some of the other popular UI frameworks like Vue or Angular. In those other frameworks, you have customized directives such as v-for or ng-for to iterate directly in html.…