Using JSX

JSX produces React “elements”. More info

Articles & Tutorials

How to Level Up Your React Conditionals (freecodecamp.org)
Jun 11, 2021
Do you write conditionals correctly within your React applications?
  • Reed Barger
New JSX Enhancements in React 17 (blog.bitsrc.io)
Dec 07, 2020
What’s New for JSX in React 17 and Why You Should Care
  • Dilantha Prasanjith
React Functional Components, Props, and JSX – React.js Tutorial for Beginners (freecodecamp.org)
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
Diving into the new JSX transform (blog.logrocket.com)
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
Introducing the New JSX Transform (reactjs.org)
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
How To Render Relevant Icons Based on Content (aboutmonica.com)
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
Use ternaries rather than && in JSX (kentcdodds.com)
Jul 28, 2020
What problems can happen when you use && to conditionally render content in JSX
Add an Item to a List in React (robinwieruch.de)
May 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.
Write clean(er) Components & JSX (itnext.io)
Apr 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
How to Show and Hide Elements in React (telerik.com)
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.
A Beginner’s Guide to Loops in React JSX (telerik.com)
Jan 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
An Overview of JSX With 3 Non-React Examples (thecodebarbarian.com)
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
The state of semantic JSX (blog.logrocket.com)
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
React and JSX: The Importance of HTML Knowledge (ultimatecourses.com)
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
Working with conditions & lists in React (sergiodxa.com)
Jun 18, 2019
Learn how to conditionally render elements and how to properly work with lists in React.
  • Sergio Xalambrí
React: JSX & Rendering (itnext.io)
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
Alternatives to JSX (blog.bloomca.me)
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
4 ways to pass children to React elements (frontarm.com)
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?
What the heck is JSX and why you should use it to build your React apps (medium.freecodecamp.org)
Jan 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
Do you even JSX bro? (react.christmas)
Dec 23, 2018
Most React apps use JSX - but how can you set up a JSX environment yourself?
  • Kristofer Selbekk
How to loop inside React JSX (flaviocopes.com)
Nov 06, 2018
How to loop in a React component JSX
React/JSX as a server-side templating language (blog.kentcdodds.com)
Oct 01, 2018
Using React function components to render your website’s skeleton index.html
3 Anti-patterns for Conditional Rendering with React (frontarm.com)
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.
All React Conditional Rendering Techniques (robinwieruch.de)
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?
How to Display a List in React (daveceddia.com)
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?
Pass Multiple Children to a React Component with Slots (daveceddia.com)
Jul 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.
Render Children in React Using Fragment or Array Components (css-tricks.com)
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
What is JSX? (blog.kentcdodds.com)
Jul 09, 2018
You may use it every day, but have you seen what happens after Babel transpiles it?
Transforming Elements In React (medium.com)
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
JSX can do that? (engineering.hexacta.com)
May 06, 2018
First I’m going to explain how JSX works and then use it in “unusual” ways.
  • Rodrigo Pombo
React Code Style Guide (css-tricks.com)
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
8 React conditional rendering methods (blog.logrocket.com)
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
Conditional Rendering in React using Ternaries and Logical AND (medium.freecodecamp.org)
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
How Would You Solve This Rendering Puzzle In React? (css-tricks.com)
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
An Introduction to JSX (sitepoint.com)
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

What is JSX? (youtube.com)
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
The New React JSX Transform (youtube.com)
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
JSX Tips and Gotchas for Beginners (youtube.com)
Jul 31, 2020
In this video you'll learn a bunch of tips and tricks for dealing with JSX.
9 React conditional rendering methods (youtube.com)
Apr 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.
Easy JSX With HTM (youtube.com)
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
Introduction to JSX (youtube.com)
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
How JSX makes your life easier (youtube.com)
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. 🥩