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.

User card best practices

User card best practices

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

User card best practices

“

Welcome back, let's start creating our user card component. For this, we are going to have a new file, name it userCard.tsx, run rafce and we have the initial component for us. Let's give it a type, react.fc and let's create a prop type for this. We'll have a name which will be of type string. We'll have a user image which will be of type string and we are going to have an e-mail which will be of type string as well. Let's place it here so that our component knows what are the prop types. Inside this, we can have our name, avatar and e-mail. As you can see, now we can have the intelligence for the prop types as well as we can hover over it and see its data type. Now let's style our user card component. Let's give it inline styles. For giving inline styles, we have to use a style attribute and we can define our styles inside. Let's give it a border of 1px, also make it solid and give it a color. Next we'll give a border radius of 8 pixels, give it a padding 16px, let's give it a width…

Contents