Key Concepts

Review core concepts you need to learn to master this subject

render() Method

class MyComponent extends React.Component { render() { return <h1>Hello from the render method!</h1>; } }

React class components must have a render() method. This method should return some React elements created with JSX.

React Component Base Class

class MyComponent extends React.Component { render() { return <h1>Hello from the render method!</h1>; } }

React class components need to inherit from the React.Component base class and have a render() method. Other than that, they follow regular JavaScript class syntax.

This example shows a simple React class component.

Importing React

class MyComponent extends React.Component { render() { return <h1>Hello from the render method!</h1>; } }

In order to use React, we must first import the React library. When we import the library, it creates an object that contains properties needed to make React work, including JSX and creating custom components.

React Components

class MyComponent extends React.Component { render() { return <h1>Hello from the render method!</h1>; } }

A React component is a reusable piece of code used to define the appearance, behavior, and state of a portion of a web app’s interface. Components are defined as functions or as classes. Using the component as a factory, an infinite number of component instances can be created.

JSX Capitalization

class MyComponent extends React.Component { render() { return <h1>Hello from the render method!</h1>; } }

React requires that the first letter of components be capitalized. JSX will use this capitalization to tell the difference between an HTML tag and a component instance. If the first letter of a name is capitalized, then JSX knows it’s a component instance; if not, then it’s an HTML element.

ReactDOM.render()

class MyComponent extends React.Component { render() { return <h1>Hello from the render method!</h1>; } }

ReactDOM.render()‘s first argument is a component instance. It will render that component instance.

In this example, we will render an instance of MyComponent.

Multi-line JSX Expressions

class MyComponent extends React.Component { render() { return <h1>Hello from the render method!</h1>; } }

Parentheses are used when writing a multi-line JSX expression. In the example, we see that the component’s render() method is split over multiple lines. Therefore it is wrapped in parentheses.

Code in render()

class MyComponent extends React.Component { render() { return <h1>Hello from the render method!</h1>; } }

A React component can contain JavaScript before any JSX is returned. The JavaScript before the return statement informs any logic necessary to render the component.

In the example code, we see JavaScript prior to the return statement which rounds the value to an integer.

Object Properties As Attribute Values

class MyComponent extends React.Component { render() { return <h1>Hello from the render method!</h1>; } }

In React, JSX attribute values can be set through data stored in regular JavaScript objects. We see this in the example block of code.

In our code example we first see our JavaScript object seaAnemones and the values stored with this image. We then see how these stored values are used to set the <img> attributes in our JSX expression for the SeaAnemones component.

Arrow Chevron Left Icon
Your First React Component
Lesson 1 of 2
Arrow Chevron Right Icon
  1. 1
    React applications are made out of components. What’s a component? A component is a small, reusable chunk of code that is responsible for one job. That job is often to render some HTML. Take …
  2. 2
    Wooo! Your first React component! Take a look at the code on line 1: import React from ‘react’; This line of code creates a new variable. That variable’s name is React, and its value is a partic…
  3. 3
    Now take a look at the code on line 2: import ReactDOM from ‘react-dom’; This line of code is very similar to line 1. Lines 1 and 2 both import JavaScript objects. In both lines, the imported obj…
  4. 4
    You’ve learned that a React component is a small, reusable chunk of code that is responsible for one job, which often involves rendering HTML. Here’s another fact about components: we can use a …
  5. 5
    Good! Subclassing React.Component is the way to declare a new component class. When you declare a new component class, you need to give that component class a name. On line 4, notice that ou…
  6. 6
    Let’s review what you’ve learned so far! Find each of these points in app.js: - On line 1, import React from ‘react’ creates a JavaScript object. This object contains properties that are ne…
  7. 7
    A component class is like a factory that builds components. It builds these components by consulting a set of instructions, which you must provide. Let’s talk about these instructions! For star…
  8. 8
    MyComponentClass is now a working component class! It’s ready to follow its instructions and make some React components. So, let’s make a React component! It only takes one more line: To…
  9. 9
    You have learned that a component class needs a set of instructions, which tell the component class how to build components. When you make a new component class, these instructions are the body of …
  1. 1
    In this lesson, you will learn some common ways that JSX and React components work together. You’ll get more comfortable with both JSX and components, while picking up some new tricks. Take a l…
  2. 2
    Take a look at this JavaScript object named redPanda: const redPanda = { src: ‘https://upload.wikimedia.org/wikipedia/commons/b/b2/Endangered_Red_Panda.jpg’, alt: ‘Red Panda’, width: ‘200px }…
  3. 3
    A render() function must have a return statement. However, that isn’t all that it can have. A render() function can also be a fine place to put simple calculations that need to happen right bef…
  4. 4
    How might you use a conditional statement inside of a render() function? Select TodaysPlan.js to see one way of doing it. Notice that the if statement is located inside of the render f…
  5. 5
    The word this gets used in React a lot! You are especially likely to see this inside of the body of a component class declaration. Here’s an example: class IceCreamGuy extends React.Component { …
  6. 6
    Render functions often contain event listeners. Here’s an example of an event listener in a render function: render() { return ( ); } Recall that an event handler is a function…
  7. 7
    Congratulations! You have finished the unit on React components. React components are complicated. Their syntax is complicated, and the reasoning behind their syntax is especially complicated. …

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