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.

Responsive user card practical

Responsive user card practical

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

Responsive user card practical

“

Welcome back. Let's start creating our responsive user card component. For this component, we'll first create a components folder in the application that we created at the start of this module. We will then create a responsive layout for this component, and then we will be using that component inside our app.tsx. From the app.tsx, there is two changes. First, I have removed all the H1 that we used to see whether our tailwind works or not. And I have changed the background color from whitish to black. So now our application looks something like this. Let's close the rest of the files and create a user card component here. I'll create a new file, name it userCard.tsx. Over here, we can do RAFCE. This gives us a user card layout. And rather than using this, we can say export default here and we can get rid of constant and instead we can use a function here since this is a functional component. Also we can change it to function body and get rid of this error as well. We are not going to…

Contents