From the course: Build Modern Web Apps with React, Hooks, State Management, and APIs Using Vite or Next.js

Unlock this course with a free trial

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

Best practices for writing clean JSX

Best practices for writing clean JSX

From the course: Build Modern Web Apps with React, Hooks, State Management, and APIs Using Vite or Next.js

Start my 1-month free trial Buy for my team

Best practices for writing clean JSX

“

Hi and welcome back. In this video, we'll discuss the best practices for writing clean JSX. The first step is to always keep it readable and minimal. By readable, it means we should have a proper structure defined. And by minimal, we mean don't need to include additional things into your JSX. You should always write something that is clean, concise and needed. The second tip is to use fragments instead of using extra divs. Let me give you an example of fragments. Over here, you saw in this app.tsx component that we have defined a fragment here and all All the code are going to go inside it. In react, we can only have one parent element inside one component. We can't have two identical parent elements in one component. For example, if you are going to define another element outside the fragment, let's say this be a div, you are going to see that react is going to complain. It will say JSX expressions must have one parent element. So, regardless of the hierarchy we want to define in one…

Contents