Using JSX

JSX produces React “elements”. More info

Articles & Tutorials

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

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