Key Concepts

Review core concepts you need to learn to master this subject

Javascript React Library

React Component

React component base class

React render() method

JSX capitalization

JavaScript ReactDOM.render()

multi-line JSX Expression

JavaScript functions in React Components

See more

Javascript React Library

import React from 'react';

In order to use React, we must first import the React library. We can import the React library by using the code block above. When we import the library it creates an object that contains properties needed to make React work such as using JSX or creating custom components.

React Component

import React from 'react';

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. The component is defined as a function or class. Using the component as a factory, an infinite number of component instances can be created.

React component base class

import React from 'react';

In order to create any React component, it needs the base class React.Component. React component classes follow regular JavaScript class syntax. The code block above could be used to create a React component using the base class React.Component.

React render() method

import React from 'react';

A React component class must contain the render() method. Inside this method, there should be a return statement. This method returns the JSX representation of that component instance. The following code block shows how a render() method should be constructed in a component:

JSX capitalization

import React from 'react';

React requires that the first letter of a component class be capitalized. This is required because based on capitalization JSX can tell the difference between an HTML tag and a component instance. If the first letter of a name is capitalized, then JSX realizes it’s a component instance; if not, then it’s an HTML tag.

JavaScript ReactDOM.render()

import React from 'react';

In order to use the method ReactDOM.render() we must first import ReactDOM using the following code block. When ReactDOM.render() receives a component instance as its first argument, it calls in the render method from that component.

multi-line JSX Expression

import React from 'react';

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

JavaScript functions in React Components

import React from 'react';

A React component can contain JavaScript before the return statement. The JavaScript before the return statement informs the logic necessary to render the component. In the example block of code we see JavaScript prior to the return statement. This JavaScript function informs the logic necessary to render the component. The JavaScript math function in this example is

Math.floor(Math.random() * 10);

and this function in JavaScript will return a random integer from 0 to 9.

JavaScript Objects JSX Attribute values

import React from 'react';

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 attributes in our JSX expression for class SeaAnemones.

In our code example since seaAnemones.src, seaAnemones.alt, and seaAnemones.width are JavaScript properties they are wrapped in curly braces.

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