Components Interacting

Learn how to make React components interact with one another.

Key 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

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

1
Components Interact
A 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…
Start
2
A Component in a Render Function
Here 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,…
Start
3
Apply a Component in a Render Function
This 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 …
Start
4
Require A File
When 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…
Start
5
export
Alright! You’ve learned how to use import to grab a variable from a file other than the file that is currently executing. When you import a variable from a file that is not the current file, th…
Start
6
Component Rendering In Action
Now you’re ready for to render ! All that’s left to do is render .
Start