Tag: javascript

  • Composing React Components

    Composing React Components

    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 […]

  • How To Handle Events In React

    How To Handle Events In React

    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 […]

  • Conditional Rendering In React

    Conditional Rendering In React

    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 […]

  • Rendering A List With React

    Rendering A List With React

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

  • Simple Styling Techniques For React Elements

    Simple Styling Techniques For React Elements

    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 […]

  • Embedding Expressions In JSX

    Embedding Expressions In JSX

    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 […]

  • Create A React Element From Scratch

    Create A React Element From Scratch

    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 […]