⚛ #3 React-Bootstrap | Create React Website | Create Navigation Bar | How To Use Bootstrap In React


Hi everyone and welcome to the third
lesson of video series react by example In the previous video we prepared files
the way we did it for our project In this lesson we’ll create a navigation
bar inside source folder short name SRC let’s create a new folder and name
it components inside the components folder will store all the components of
our project React lets you define components as class or function components defined as classes currently provide more features and called
stateful components also classes components let you manipulate the state
between components which cannot allow a functional component in our project the
App js component is the stateful component as we see its class the name of
component App Extends Component and on a top we import the react component from
react library for navigation bar in our project will create a functional
component why a functional component? because in the navbar will not pass in
any state before we create navbar component I want to show you very handy
tool es7 plugin which allows you to use the code snippets to create components at faster way so if you don’t have I highly recommend you install it to your
code editor extensions if you use vs code editor like me the way to install
it click on View and click on extensions in search bar type es7 and here
it is also the es7 plugin has the documentation on how to use it so check it
out let’s create a Navbar component inside the components folder and name it
Navbar.js I use es7 prefix RFC and hit the tab to create a functional
component I personally like to keep export default on a
bottom of component block of code so let’s cut the export default and put it
down here and type a name of component its navbar and close it with a semicolon before we move on let’s install a bootstrap to open the terminal I use
sure keys ctrl + backquots to install the bootstrap we need a type next line
of command npm install bootstrap and hit the enter key on the keyboard installation process takes some time so we need to wait a little bit let’s open the package JSON file and we
can see we just installed bootstrap right into the dependencies now let’s
open the browser I use Google Chrome you of course may use any one you like and
in the search bar of Google’s search engine let’s type bootstrap click on the
documentation link let’s click on components link and we need to find
a navbar section click on it you can see it’s good explained documentation how you can use the Bootstrap Navbar we going to use this one click on copy let’s go back to code editor open the navbar file we don’t need this div anymore so select and delete it Now use short keys ctrl + V We just add Navbar code inside the return The JSX code similar as HTML tags and elements but
has some differences so let me show you what we need to change in here
first of all let’s check what kind of error we have in here to find it just
hover the mouse cursor on nav element and it says JSX element nav has no
corresponding closing tag or in terminal open problem section and you can see all
the problems if we scroll down and inside the form element in the input
before the closing tag put forward slash symbol and the last thing we need to fix
it’s a class attribute in the jsx we must name it camel case way we type
class using lower case and type name with capital N now let’s fix all class
attributes let’s start the local server type npm start you can see nothing has changed that
happen cause we install the bootstrap but not imported yet let’s fix it go back to
the code editor open App js file and on a top type import inside the single quots we need to type a path to the folder where a bootstrap package is installed
as we already know all the packages contains inside the node modules folder
so the path is bootstrap forward slash dist forward slash CSS bootstrap dot
min dot CSS and save the file now go back to the browser as you see the font
is change but we don’t see the navigation bar that’s because we not
import the navbar component inside the App js component as we remember the App js component is a parent component and all child components as Navbar will be
rendering inside the App js component in the App js component where the all imports
type import name of component navbar from and path to the component inside
the single quotes dot because we need to go to the components folder, forward
slash components folder and navbar component we can delete h2 element
because we don’t need it anymore and add the component the way to do it which I
angle bracket or less than navbar the name of component forward slash and
close the component with greater than symbol I like to call angle bracket save
the file and let’s go back to the browser
good job as we see our navbar is rendered inside the fgs file in the next
lesson we’ll change the style of navbar the way we need it for our project so
guys to support my channel please hit the like button if you liked it or
dislike if you hate me my accent and of course don’t forget to subscribe
and hit the bell button to make sure you’re not missing new videos from me
see you in the next lesson

20 Comments

Add a Comment

Your email address will not be published. Required fields are marked *