Key Concepts

Review core concepts you need to learn to master this subject

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
  1. 1
    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…
  2. 2
    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,…
  3. 3
    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 …
  4. 4
    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…
  5. 5
    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…
  6. 6
    Now 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

Pro Logo

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo