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.…
Styling your React components is an important part of creating a useful and meaningful user experience. In addition, those building blocks determine the way a product or brand feels and looks. In React, like in most things web development, there are more than a few ways to solve the challenge. We’ll look at two simple ways to deal with the problem of styling React components, however, you may find ways that are more in line with your preferences.…
JSX is an extension to the JavaScript language, and therefore it can accept any valid JavaScript expressions placed inside the curly braces. For example, 4 + 4, user.firstName, or formatName(user) are all valid JavaScript expressions. This allows you to make your JSX more dynamic. In this tutorial we’ll take a look at some additional examples of embedding expressions in JSX markup, as well as some of the rules associated with rendering more than one html tag in a JSX expression.…
In this tutorial we are going to create a React Element from scratch. This will show us a little bit about why we first import React and ReactDOM as well as how a JSX expression gets converted to an Object for the Browser to use. We are making use of the Create React App, however we will delete the welcome component and start at the beginning.…