|
1 | | -import React from "react"; |
2 | | -import ReactDOM from "react-dom"; |
3 | | -import PropTypes from "prop-types"; |
| 1 | +import React from 'react'; |
| 2 | +import ReactDOM from 'react-dom'; |
| 3 | +import PropTypes from 'prop-types'; |
4 | 4 |
|
5 | 5 | const HeroSection = (props) => { |
6 | | - // Here you have to return expected html using the properties being passed to the component |
7 | | - return ( |
8 | | - <div className="bg-light p-5 m-5"> |
9 | | - <h1 className="display-4">{props.title}</h1> |
10 | | - <p className="lead">{props.description}</p> |
11 | | - <a className="btn btn-primary btn-lg" href={props.buttonURL} role="button"> |
12 | | - {props.buttonLabel} |
13 | | - </a> |
14 | | - </div> |
15 | | - ); |
| 6 | + // Here you have to return expected html using the properties being passed to the component |
16 | 7 | }; |
17 | 8 |
|
18 | 9 | HeroSection.propTypes = { |
19 | | - // PropTypes here |
20 | | - title: PropTypes.string, |
21 | | - description: PropTypes.string, |
22 | | - buttonLabel: PropTypes.string, |
23 | | - buttonURL: PropTypes.string, |
| 10 | + // PropTypes here |
| 11 | + title: PropTypes.string, |
24 | 12 | }; |
25 | 13 |
|
26 | 14 | ReactDOM.render( |
27 | | - <HeroSection |
28 | | - title="Welcome to React!" |
29 | | - description="React is the most popular rendering library in the world" |
30 | | - buttonLabel="Go to the official website" |
31 | | - buttonURL="https://reactjs.org/" |
32 | | - />, |
| 15 | + <HeroSection |
| 16 | + title="Welcome to React!" |
| 17 | + description="React is the most popular rendering library in the world" |
| 18 | + buttonLabel="Go to the official website" |
| 19 | + buttonURL="https://reactjs.org/" |
| 20 | + />, |
33 | 21 |
|
34 | | - document.querySelector("#myDiv") |
| 22 | + document.querySelector('#myDiv') |
35 | 23 | ); |
0 commit comments