Components Interacting
Learn how to make React components interact with one another.
StartKey Concepts
Review core concepts you need to learn to master this subject
Returning HTML Elements and Components
React Component File Organization
this.props
defaultProps
props
this.props.children
Binding this
keyword
Call super()
in the Constructor
Returning HTML Elements and Components
Returning HTML Elements and Components
class Header extends React.Component {
render() {
return (
<div>
<Logo />
<h1>Codecademy</h1>
</div>
);
}
}
A class component’s render()
method can return any JSX, including a mix of HTML elements and custom React components.
In the example, we return a <Logo />
component and a “vanilla” HTML title.
This assumes that <Logo />
is defined elsewhere.
Components Render Other Components
Lesson 1 of 3
What you'll create
Portfolio projects that showcase your new skills
How you'll master it
Stress-test your knowledge with quizzes that help commit syntax to memory