tutorial |
---|
In the past exercise we created our first component called PrintHello
, and we have learned that we can use the component like an HTML tag.
<PrintHello />
Now let's create another component (function) called <BootstrapCard />
that outputs the following HTML:
<div class="card m-5">
<img class="card-img-top" src="../../.learn/assets/Dylan.png?raw=true" alt="Card image cap" />
<div class="card-body">
<h5 class="card-title">Bob Dylan</h5>
<p class="card-text">Bob Dylan (born Robert Allen Zimmerman, May 24, 1941) is an American singer/songwriter, author, and artist who has been an influential figure in popular music and culture for more than five decades.</p>
<a href="https://en.wikipedia.org/wiki/Bob_Dylan" class="btn btn-primary">Go to wikipedia</a>
</div>
</div>
Note: This HTML code its based on the Bootstrap Card.
- Please create a function called
BootstrapCard
that returns the card code and use theReactDOM.render
function<BootstrapCard />
to add it into the website inside#myDiv
.
- If you don't know or remember how to use
ReactDOM.render
you can review the past exercises.