Creating Simple Tabs Using React Js, SASS, CSS3, JSX | #DevelopersDiary

first we shall create a tab component rfce is shortcut for to create bioplate for react component give class name tabs create sas file of tabs add class name tabs in it css file will automatically generate i am using sas live server extension for compiling sas code import this css file now create one due for tabs list and three for each tab content now add some style for this tab component for tabs class set style like display flex direction justify content and width similarly style tab list class set display align items now create tabs headers we are creating three heads and entering head text in them now enter content text now create use state react hook with initial value zero import use state from react now add on click event in each tab head for each tab set index value now set hidden property for each content based on index value now import this tab component in app.js file and use it let's do some styling for tab head like padding and border also create an active class in which set background and text color add this class in first tab for testing now set active class for only active tab for this we are using template literal feature of javascript with index use state variable now let's set the style for tab content we have to insert the tab content style code under tab class add height and width tabs are ready

Channel: Developers Diary

Views: 360

Keywords: tabs, tabs in react js, mascreativedesigner, creative designer, Developers Diary, developers diary

Id: BNAhxstNz7s

Length: 5min 31sec (331 seconds)

Published: Tue Aug 03 2021