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.…

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.…