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
- 1A React application can contain dozens, or even hundreds, of components. Each component might be small and relatively unremarkable on its own. When combined, however, they can form enormous, fant…
- 2Here is a .render() method that returns an HTML-like JSX element: class Example extends React.Component { render() { return Hello world ; } } You’ve seen render methods return s, s,…
- 3This is new territory! You’ve never seen a component rendered by another component before. You have seen a component rendered before, though, but not by another component. Instead, you’ve seen …
- 4When you use React.js, every JavaScript file in your application is invisible to every other JavaScript file by default. ProfilePage.js and NavBar.js can’t see each other. This is a probl…
- 6Now you’re ready for to render ! All that’s left to do is render .
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