From the course: React Foundations by Pearson

Unlock this course with a free trial

Join today to access over 25,500 courses taught by industry experts.

Additional JSX techniques

Additional JSX techniques - React.js Tutorial

From the course: React Foundations by Pearson

Start my 1-month free trial Buy for my team

Additional JSX techniques

“

In this topic, I'm going to discuss some additional JSET techniques which are quite useful to know about. So first of all, there are some things that you have to be careful that could be problematic. Have a look at the code that I've got here. It seems to look OK, but actually, When you are creating a chunk of XML content for Babel to translate, you're not allowed to have sibling elements. So I've tried to create like a virtual DOM with an H1 followed by a div. You can't have adjacent sibling elements in JSX. What you've got to do is you've got to wrap them into some kind of container to act as a single point of reference. point of reference. So there's an empty tag syntax you can use. Basically, start, end, empty tag. It's like an invisible container. So what this'll do is it'll kind of create an empty element which contains an h1 and contains a div. And this is what's going to be basically utilized. So this is kind of like, just like a glass box. doesn't have any visual appearance…

Contents