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.…
Create React App is a great tool to get you up and running with React.js very quickly. Front-end development is complicated with so many build tools your head will spin. Create React App takes all that complexity and makes it simple. All you need to do is install the package using npm, and then run a few simple commands to get a new project created and up and running.…
In this React tutorial, we’ll keep building on the React Form from the last tutorial. Now we want to be able to fetch data from an API and work with that data in a meaningful way. To do this we’ll need to make use of an array to manage state at the top-level of the application in the App component. We’ll then set up a couple of other components and share state with them via the props object.…
The prior tutorial introduced us to creating components in React and using state and props with those components. So far, those components have been function based. Now we want to take a look at how to create components in React using the class syntax. In React you can accomplish the same types of things using either Stateful Functions, or using Class Components. Which approach you choose is up to you.…