Using JSX
JSX produces React “elements”. More info
Articles & Tutorials
Jun 11, 2021
Do you write conditionals correctly within your React applications?
- Reed Barger
Dec 07, 2020
What’s New for JSX in React 17 and Why You Should Care
- Dilantha Prasanjith
Nov 05, 2020
In this post, you're going to learn some of the basics of React like creating a component, the JSX syntax, and Props. If you have no or little experience with React, this post is for you.
- Cem Eygi
Sep 24, 2020
With React 17, you no longer need to import React in your files to use React. Confused? This article will tell you what you need to know in order to migrate both your code and knowledge to this new way of doing things.
- Kristofer Selbekk
Sep 22, 2020
Although React 17 doesn’t contain new features, it will provide support for a new version of the JSX transform. In this post, we will describe what it is and how to try it.
- Luna Ruan
Sep 12, 2020
This article walks through how I display relevant, themed icons when linking to content on this site based on the topic or type of content. If you've visited the homepage of this site, I use a variation of this component to display my recent content, featured content, and recent video lessons.
- Monica Powell
Jul 28, 2020
What problems can happen when you use && to conditionally render content in JSX
Kent C. DoddsMay 14, 2020
It's a common task in React to add an item to a list. Here I want to show you briefly how this works. Every time you want to modify something in React, for example a list where you want to add an item, you have to use React's state management.
Robin WieruchApr 24, 2020
I’ve decided to write a small guide about the cases I’ve seen in real projects and some refactoring solutions.
- Dana Janoskova
Mar 13, 2020
Without if statements in JSX, how do you control your application's flow? Let's explore how to render or NOT render elements in React.
Leigh HallidayJan 24, 2020
Wondering how to create loops in React? Learn about JSX and how to use methods like the map function to loop inside React JSX and render a list of items.
- Thomas Findlay
Jan 21, 2020
JSX is an extended JavaScript syntax popularized by React. The fundamental issue that JSX was designed to solve is that writing React code in vanilla JavaScript was simply too cumbersome.
- Valeri Karpov
Aug 23, 2019
Creating platforms for the web has always been as simple as learning to write HTML, throwing in look and feel with some CSS, and then, possibly a bit of JavaScript or any other scripting language for functionality.
- Obinna Ekwuno
Aug 16, 2019
Without getting into the whole "HTML in JS" debate, I’m here to unravel some key points for you so you can focus on learning and perfecting your HTML knowledge alongside JSX – and most importantly recognise and know the differences between them.
- Almero Steyn
Jun 18, 2019
Learn how to conditionally render elements and how to properly work with lists in React.
- Sergio Xalambrí
Apr 30, 2019
In this article, we’re going to take a look at what JSX is & why we should use it in our React applications. We’ll also take a look at what elements are, and how we can render them to the DOM.
- Timothy Robards
Feb 23, 2019
JSX is a very popular choice nowadays for templating in various frameworks, not just in React (or JSX inspired templates). However, what if you don’t like it, or have a project where you want to avoid using it, or just curious how you can write your React code without it?
- Seva Zaikov
Jan 28, 2019
Sure, you already know that you can pass children to React elements by nesting JSX tags. But what about the other 3 ways?
James K NelsonJan 07, 2019
As developers, we use a variety of tools and open source packages to make our jobs easier. Some of them are so widely used throughout the…
- Ryan Harris
Dec 23, 2018
Most React apps use JSX - but how can you set up a JSX environment yourself?
- Kristofer Selbekk
Flavio CopesOct 01, 2018
Using React function components to render your website’s skeleton index.html
Sep 21, 2018
You already know how to implement conditionally rendering with React: just use JavaScript! This gives you a huge amount of power... to shoot yourself in the foot.
Sep 21, 2018
Wondering how to perform a conditional render in React? The article is an exhaustive list of conditional renderings in React's JSX. How to use ternary operators, switch case and if else in React.js?
Aug 06, 2018
You’ve got a list of items. Now you just need to get them on the screen. What’s the “React way” to render a list?
Dave CeddiaJul 31, 2018
You can pass JSX into any prop, not only the one named children, and not only by nesting JSX inside a component’s tag – and it can simplify data passing and make components more reusable.
Jul 17, 2018
In this post, we'll be looking at the rendering power React 16 introduced — namely, the ability to render children using Fragments and Array Components.
- Kingsley Silas
Jul 09, 2018
You may use it every day, but have you seen what happens after Babel transpiles it?
Jul 02, 2018
Transforming elements can be interesting if you’re a library author, but can also be very valuable when writing components to abstract behaviour in your existing code base.
- Ali Sharif
May 06, 2018
First I’m going to explain how JSX works and then use it in “unusual” ways.
- Rodrigo Pombo
Mar 27, 2018
I’ve had a hard time finding good code style guidelines to keep the mix of JSX and JS clean and readable. I've been coming up with my own style guides that I'd love to share.
- Daniel Jauch
Feb 28, 2018
There’s more than one way to use conditional expressions in React. And, as with most things in programming, some are better suited than others depending on the problem you’re trying to solve.
- Esteban Herrera
Feb 01, 2018
There are several ways that your React component can decide what to render. You can use the traditional if statement or the switch statement. In this article, we’ll explore a few alternatives. But be warned that some come with their own gotchas, if you’re not careful.
- Donavon West
Dec 11, 2017
I have a puzzle for you today. Let's say that you wanted to render out a list of items in a 2 column structure.
- Burke Holland
Oct 02, 2017
Let’s take a look at what JSX actually is, how it works, and why the heck we’d want to be mixing HTML and JS in the first place!
- Matt Burnett
Video Guides & Talks
May 03, 2021
What is JSX? A question for the ages! The 'don't call it a template' syntax extension to JavaScript that makes writing UIs within JavaScript actually pleasant.
- Harry Wolff
Sep 28, 2020
React is changing how its JSX transform works. It's gonna make everything awesome. Watch to see what the change means for you.
- Harry Wolff
Jul 31, 2020
In this video you'll learn a bunch of tips and tricks for dealing with JSX.
Tyler McGinnisApr 27, 2020
Controlling the flow of your React application is crucial to getting the result that you are looking for. Learn more about React conditional rendering methods in this video.
Dec 10, 2018
You know JSX? Well, you know how it requires a build process? Like Babel? What if I told you there was a way to write JSX and React without a build process AND still get to use JSX?
- Harry Wolff
Jun 23, 2018
A live broadcast of the WordPress Gwinnett meetup where Micah Wood gives an introduction to React's JSX syntax, gotchas, and nuances.
- Micah Wood
Apr 07, 2018
Some still debate it, but I love how JSX lets you get in there and get your hands dirty right with the stuff your code is meant to be outputting. Like a top chef 👩🍳 gently massaging a steak. 🥩
Swizec Teller