hi everyone my name is
Bibek and welcome to my youtube channel
this is a seventh episode to create a
responsive website
using react ant design
in the previous episode we worked on
features
using the cards component and today
we'll be working on how it works using
the modal component
first of all let's create a new
component inside
components and home folder
you can then call it works.js
import react from react
and we can create component in two
different ways
first way is by creating function
this is what we have always done so far
and second way is by using class it will
look
something like this
it begins with class and then the
component name which is app works
and extend react.component
then we need to add this render function
before adding this
return
now let's import this component in this
home.js
you can then check your site
and your works component is ready to use
now let's add this title and subtitle
so the first thing i want to add is div
and i want to add a class called block
and works block
then i want another div with a class
called
container-fluid
then again another div with a class
called
titleHolder
now i want to add the  tag
and the  tag
you can now check your site
and your title and subtitle is ready
if you're wondering where this
background image is coming from
then it is coming from our css file
and i have added that background image
in this works block
class name
now let's add the modal component so
open your react ant design website click
on component
and then click on modal
then let's use this example
so click on this show code
and then you can copy
all these things
and paste it just before this render
then again you can copy this button and
modal
and you can paste it after this title
holder
since we are using button and modal
we have to import button and modal from
react ant design now
you can check your site and
you should see a model over here
now let's modify the content of the
modal box
so i want to remove this sample content
and
instead i want to add the iframe
for my youtube tutorial
then if you want to remove this
footer then you can go back to your
react ant design site again and if you
scroll back to api
then you have to set this footer equals
null so i will just copy that one
and then paste it over here and also
i can remove this handle ok
now check your site again
click on open modal and you can
no longer see the footer over here also
you can see
the iframe for my youtube tutorial
now i want to use this font awesome icon
so i will simply use the developer tool
then i will copy the icon and
paste it over here
then i also want to add new div
for that button
and add a class called
contentHolder
i can remove this type equals primary
for button
and finally i want to change
the title of my modal box into
woocommerce tutorial
now check your site again and
this time you are seeing icon click on
the icon
and then in the modal box you can see
woocommerce tutorial
you can close you can open
and if you compare it with our design
then
it is looking exactly the same
great this
is the end of this session in the next
session
we'll be working on faq using the
collapse component
feel free to comment below if you have
any questions
also please don't forget to like and
subscribe to my channel
to get more tutorials in the future
thank you
