Components

Question 1

What must component class name begin with?

Answer 1

Capital letters

Question 2

What must a component class include?

Answer 2

• A render method
• Value for the render method should be a function
• Render method must finally include a return statement, which is usually a JSX expression

Question 3

How can you call a component’s render method?

Answer 3

ReactDOM.render(
,
document.getElementById(‘app’)
);

Question 4

Create a component that would render the following HTML code:

<blockquote>
 <p>
  What is important now is to recover our senses.
 </p>
 <cite>
  <a href="http://bit.ly/1LvSLUA">
   Susan Sontag
  </a>
 </cite>
</blockquote>

Answer 4

import React from ‘react’;
import ReactDOM from ‘react-dom’;

class QuoteMaker extends
React.Component {
render() {
return (
<blockquote>
 <p>
  What is important now is to recover our senses.
 </p>
 <cite>
  <a href="http://bit.ly/1LvSLUA">
   Susan Sontag
  </a>
 </cite>
</blockquote>
);
}

}

ReactDOM.render(
,
document.getElementById(‘app’)
);

Question 5

Create a component that would render the following HTML code:
const owl = {
title: “Excellent Owl”,
src: “https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-owl.jpg”
};

Answer 5

import React from ‘react’;
import ReactDOM from ‘react-dom’;

class Owl extends React.Component {
render() {
return (
<div>
<h1>{owl.title}</h1>
<img>
</div>
);

}
}

ReactDOM.render(
,
document.getElementById(‘app’)
);