We are going to run the commands okay great so to get a CDN bootstrap link go to the browser and in a browser just type bootstrap CDN link and hit enter so we are going to use bootstrap 4 so let’s also specify bootstrap 4 here and click on the first link so this is the official website of bootstrap and look at here this is the CDN link that we can use click on copy button and go back to the visual studio code id and open index.html file go to the header section and in the header section just below the title tag paste it okay so once you add cdn bootstrap link you are good to use you know bootstrap CSS classes now let’s see the second way.
I will just remove this link secondly is by using the npm command just type npm bootstrap npm install bootstrap hyphen icon save so make sure that you have added hypernym and save here so basically this will add an entry in a package.json okay so let me open the packet registration so look at here a bootstrap library is not added in a package.json as soon as I run this command a new entry will add to the package.json hit enter let’s wait for a second so this takes this command takes a second to download and install bootstrap, yeah here we go let’s refresh it so notice bootstrap library uh with its version is added here in a package.json all right.
Once a bootstrap CSS library installed what will do we’ll import a bootstrap CSS file in our react application so go to the index.js file and here just type import and then bootstrap slash disk slash CSS bootstrap.main.css okay now we have successfully installed and we have imported bootstrap CSS library in our react application now we are good to use react we are going to use bootstrap CSS classes in our react application all right we have created a react application and we have integrated bootstrap CSS library in our react application in this video.
Let’s quickly create react component to display a list of users on our web page all right guys go to the source folder src folder and just within the src folder create a new folder called components okay under the components folder let’s create a file let’s name it as list employee component so look at here the naming conventions it is in the component name should be in a camel-case and the extension is jsx so you can also use js that is not a problem but we are going to write a jsx code inside this component.
We can have an extension like jsx okay you can probably see a lot of uh you you know react developers sometimes use rgs extension or jss JSX extension there is no difference but whenever we use a jsx inside component we typically use dot JSX extension all right hit enter now the important thing is I am going to use react snippets to quickly create a react component I highly recommend you guys to use react snippets in visual store code id to quickly create react components and few react you know other like functional component or services etc.
To you know install react snippets go to the browser and just type you know react snippets for vs code goes to the react code snippets website and you can click on install so this will install react.js core snippets in vs code I already installed so I’m going to use react snippets to quickly create a react class component so typically there are two types of components in react one is stateless function component and other is a stateful class component and most of the time, I am going to use class component throughout this you know video tutorial series let’s type the command RCC.
This will create a class react class component just hit enter so look at here the skeleton of reacting class component so this is a very useful react snippet I highly recommend you guys to use react snippets in a visual store code id to quickly create this kind of snippets all right so look at here inside this component we have constructor within constructor we have stated this is the state which belongs to this component and this component extends a component is from the react library and here inside a constructor we have a super and we pass props to the superclass that reacts component okay and within a component we have to render method and inside a render method.
We have a written statement and inside written we write a js code inside a return statement all right guys we are going to display list type employees on a web page for that what I will do I will simply initialize an array here implies inside a state and here inside a due we are going to write a js code all right just you can start you know typing code with me so that you’ll understand a lot of things let me quickly add h2 tag to show the page header so look at here this is the employees list so this is the header we display on a page and we should display this you know title at the center.
At here the class name so in react we use a lower camel case attributes to you know two point CSS class for example in plain HTML we use a class like this all right but in react we use the camel case like this class then name so n should be capped and then we specify CSS class name all right great let’s create a table HTML table with some CSS classes bootstrap CSS classes so let’s first create a new tag here and then let’s specify some classes like row and inside that we are going to create a table inside a table let’s apply a CSS class to the table so these are the bootstrap CSS classes that we just added to the table.
Let’s see how to do it we have already added an employees array in a state so basically we make a rest API call and we store our htp called response into employees object and we trade our employees object and we display in a table so for timing we don’t make a call in this video so in the next video we write a code to make a call to the rest API and we store data into employees array and that will be again displayed on a table.
Let’s write a code here inside curly braces so we’re going to dynamically add the rows right we have state inside state we have defined employees array we are going to use a map so this is an ex feature that we are going to leverage and then we are going to iterate our employees so this is the employee and arrow and inside this, we are going to define the row okay so for each row we should have a unique key so let’s define that employee dot id and again inside a row let’s have to element and let’s populate employee first name employee last name copy this and here employee id okay in actions we define you know delete and update buttons whenever we implement delete and update functionalities alright guys now what we’ll do we’ll copy this component and we’ll go to the app.js file and we remove this code.