1class MyComponent extends React.Component{
2 constructor(props){
3 super(props);
4 };
5 render(){
6 return(
7 <div>
8 <h1>
9 My First React Component!
10 </h1>
11 </div>
12 );
13 }
14};
15
1class Car extends React.Component {
2 render() {
3 return <h2>Hi, I am a Car!</h2>;
4 }
5}
1// This is a fancy react component, For Demo purposes
2const SiteIntroduction = () => {
3 return (
4 <React.Fragment>
5 <section>
6 <header>
7 <h1>Component Header </h1>
8 </header>
9
10 <main>
11 <p>
12 This is a paragraph for my Entire Component that i am using in the
13 application
14 </p>
15 </main>
16
17 <footer>
18 <p>This is the Entire Footer for The React Component Application</p>
19 </footer>
20 </section>
21 </React.Fragment>
22 );
23};
24
25ReactDOM.render(<SiteIntroduction />, document.getElementById("root"));
26
1function Comment(props) {
2 return (
3 <div className="Comment">
4 <div className="UserInfo">
5 <img className="Avatar"
6 src={props.author.avatarUrl}
7 alt={props.author.name}
8 />
9 <div className="UserInfo-name">
10 {props.author.name}
11 </div>
12 </div>
13 <div className="Comment-text">
14 {props.text}
15 </div>
16 <div className="Comment-date">
17 {formatDate(props.date)}
18 </div>
19 </div>
20 );
21}