React.js: YOUR FIRST REACT COMPONENT

dolphinSarah·2020년 9월 3일

React

YOUR FIRST REACT COMPONENT

Hello World, Part II... THE COMPONENT

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 a look at the code below.
This code will create and render a new React component:

import React from 'react';
import ReactDOM from 'react-dom';

class MyComponentClass extends React.Component {
  render() {
    return <h1>Hello world</h1>;
  }
};

ReactDOM.render(
  <MyComponentClass />,
  document.getElementById('app')
);

A lot of that code is probably unfamiliar. However you can recognize some JSX in there, as well as ReactDOM. render().

We are going to unpack that code, one small piece at a time. By the end of this lesson, you'll understand how to build a React component!

Import React

Take a look at the code below:

import React from 'react';

This line of code creates a new variable. That variable's name is React, and its value is a particular, imported JavaScript object:

// create a variable named React:
import React from 'react';
// evaluate this variable and get a particular, imported JavaScript object:
React // { imported object properties here... }

This imported object contains methods that you need in order to use React. The object is called the React library.

Later, we'll go over where the React library is imported from, and how the importing process works. For now, just know that you get the React library via import React from 'react';.

You've already seen one of the methods contained in the React library: React.createElement(). Recall that when a JSX element is compiled, it transforms into a React.createElement() call.

For this reason, you have to import the React library, and save it in a variable named React, before you can use any JSX at all. React.createElement() must be available in order for JSX to work.

Import ReactDOM

Now take a look at the code below:

import ReactDOM from 'react-dom';

This line of code is very similar to import React from 'react';.

Both of them import JavaScript objects. In both lines, the imported object contains React-related methods.

However, there is a difference!

The methods imported from 'react-dom' are meant for interacting with the DOM. You are already familiar with one of them: ReactDOM.render().

The methods imported from 'react' don't deal with the DOM at all. They don't engage directly with anything that isn't part of React.

To clarify: the DOM is used in React applications, but it isn't part of React. After all, the DOM is also used in countless non-React applications. Methods imported from 'react' are only for pure React purposes, such as creating components or writing JSX elements.

Create a Component Class

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 JavaScript class to define a new React component. We can also define components with JavaScript functions, but we'll focus on class components first.

All class components will have some methods and properties in common(more on this later).
Rather than rewriting those same properties over and over again every time, we extend the Component class from the React library. This way, we can use code that we import from the React library, without having to write it over and over again ourselves.

After we define our class component, we can use it to render as many instances of that component as we want.

What is React.Component, and how do you use it to make a component class?

React.Component is a JavaScript class. To create your own component class, you must subclass React.Component.
You can do this by using the syntax
class YourComponentNameGoesHere extends React.Component{}.

class MyComponentClass extends React.Component {
  render() {
    return <h1>Hello world</h1>;
  }
}

You know that you are declaring a new component class, which is like a factory for building React components. You know that React.Component is a class, which you must subclass in order to create a component class of your own. You also know that React.Component is a property on the object which was returned by import React from 'react'.

Name a Component Class

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.

Component class variable names must begin with capital letters!

This adheres to JavaScript's class syntax. It also adheres to a broader programming convention in which class names are written in UpperCamelCse.

In addition, there is a React-specific reason why component class names must always be capitalized. We'll get to that soon!

Component Class Instructions

Let's review what you've learned so far!

import React from 'react' creates a JavaScript object. This object contains properties that are needed to make React work, such as React.createElement() and React.Component.
import ReactDOM from 'react-dom' creates another JavaScript object. This object contains methods that help React interact with the DOM, such as ReactDOM.render().
By subclassing React.Component, you create a new component class. This is not a component! A component class is more like a factory that produces components. When you start making components, each one will come from a component class.
Whenever you create a component class, you need to give that component class a name. That name should be written in UpperCamelCse.

Something that we haven't talked about yet is the body of your component class: the pair of curly braces after React.Component, and all of the code between those curly braces.

Like all JavaScript classes, this one needs a body. The body will act as a set of instructions, explaining to your component class how it should build a React component.

Here's what your class body would look like on its own, without the rest of the class declaration syntax:

{
  render() {
    return <h1>Hello world</h1>;
  }
}

That doesn't look like a set of instructions explaining how to build a React component! Yet that's exactly what it is.

The Render Function

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 starters, these instructions should take the form of a class declaration body. That means that they will be delimited by curly braces, like this:

class ComponentFactory extends React.Component {
  // instructions go here, between the curly braces
}

The instructions should be written in typical JavaScript ES2015 class syntax: https://exploringjs.com/es6/ch_classes.html

There is only one property that you have to include in your instructions: a render method.

A render method is a property whose name is render, and whose value is a function. The term "render method" can refer to the entire property, or to just the function part.

class ComponentFactory extends React.Component {
  render() {}
}

A render method must contain a return statement. Usually, this return statement returns a JSX expression:

class ComponentFactory extends React.Component {
  render() {
    return <h1>Hello world</h1>;
  }
}

Of course, none of this explains the point of a render method. All you know so far is that it's name is render, it needs a return statement for some reason, and you have to include it in the body of your component class declaration. We'll get to the 'why' of it soon!

Create a Component Instance

Let's make a React component! It only takes one more line:

<MyComponentClass />

To make a React component, you write a JSX element. Instead of naming your JSX element something like h1 or div like you've done before, give it the same name as a component class.

JSX elements can be either HTML-like, or component instances. JSX uses capitalization to distinguish between the two! That is the React-specific reason why component class names must begin with capital letters. In a JSX element, that capitalized first letter says, "I will be a component instance and not an HTML tag."

Render A Component

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 your class declaration:

class MyComponentClass extends React.Component
{ // everything in between these curly-braces is instructions for how to build components

  render() {
    return <h1>Hello world</h1>;
  }
}

This class declaration results in a new component class, in this case named MyComponentClass. MyComponentClass has one method, named render. This all happens via standard JavaScript class syntax.

You haven't learned how these instructions actually work to make components! When you make a component by using the expression below, what do these instructions do?

<MyComponentClass/>

Whenever you make a component, that component inherits all of the methods of its component class. MyComponentClass has one method: MyComponentClass.render(). Therefore, the code upper also has a method named render.

You could make a million different instances, and each one would inherit this same exact render method.

This lesson's final exercise is to render your component. In order to render a component, that component needs to have a method named render.

Since your component has a render method, all that's left to do is call it. This happens in a slightly unusual way.

To call a component's render method, you pass that component to ReactDOM.render(). Notice your component, being passed as ReactDOM.render()'s first argument:

ReactDOM.render(
  <MyComponentClass />,
  document.getElementById('app')
  // ReactDOM.render() will tell <MyComponentClass/> to call its render method. 
);

Component 'MyComponentClass' will call its render method, which will return the JSX element "Hello world". ReactDOM.render() will then take that resulting JSX element, and add it to the virtual DOM. This will make "Hello world" appear on the screen.

dolphinSarah

Exploring Front-end_.

이전 포스트

React.js: ADVANCED JSX

다음 포스트

React.js: COMPONENTS AND ADVANCED JSX

163개의 댓글

ali umair

2025년 4월 17일

It is a great website.. The Design looks very good.. Keep working like that!. 비바카지노

답글 달기

ali umair

2025년 5월 5일

When your website or blog goes live for the first time, it is exciting. That is until you realize no one but you and your. paper doll printable

답글 달기

ali umair

2025년 5월 20일

Thanks for the blog post buddy! Keep them coming... https://chhapai.com/pgs/1xbet_promo_code___welcome_offer.html

답글 달기

ali umair

2025년 5월 20일

Maximize your deposit with Linebet’s promo code BNB777! Get a 100% bonus up to €130. Win big. code promo linebet cote d'ivoire

답글 달기

ali umair

2025년 5월 20일

thank you for your interesting infomation. togel sdy pools

답글 달기

ali umair

2025년 5월 21일

Im no expert, but I believe you just made an excellent point. You certainly fully understand what youre speaking about, and I can truly get behind that. https://www.maxwaugh.com/articles/1xbit_promo_code_bonus.html

답글 달기

ali umair

2025년 5월 21일

MyGift Mall has the Gift for all. Introducing our new collection at the Gift Card Mall. So go ahead, go wild, go Check Your Balance giftcardmall/mygift check balance

답글 달기

goias

2025년 6월 2일

You have done a great job on this article. It’s very readable and highly intelligent. You have even managed to make it understandable and easy to read. You have some real writing talent. Thank you. melbet promo code today

답글 달기

goias

2025년 6월 2일

Efficiently written information. It will be profitable to anybody who utilizes it, counting me. Keep up the good work. For certain I will review out more posts day in and day out. melbet promo code for free spins

답글 달기

ali umair

2025년 6월 4일

It is my first visit to your blog, and I am very impressed with the articles that you serve. Give adequate knowledge for me. Thank you for sharing useful material. I will be back for the more great post. código promocional 1xbet ecuador

답글 달기

ali umair

2025년 6월 4일

I admire this article for the well-researched content and excellent wording. I got so involved in this material that I couldn’t stop reading. I am impressed with your work and skill. Thank you so much. codigo de promocional 1xbet

답글 달기

goias

2025년 6월 17일

POL88 adalah situs slot online gacor terpercaya dengan RTP tinggi dan game dari provider ternama. Daftar sekarang untuk nikmati jackpot besar serta bonus harian yang banyak. slot gacor

답글 달기

goias

2025년 6월 19일

This particular papers fabulous, and My spouse and i enjoy each of the perform that you have placed into this. I’m sure that you will be making a really useful place. I has been additionally pleased. Good perform! jay rufer

답글 달기

goias

2025년 6월 19일

I am definitely enjoying your website. You definitely have some great insight and great stories. Driveway Contractors Houston

답글 달기

ali umair

2025년 6월 21일

Temukan pengalaman bermain slot gacor di DAX69. Akses login cepat melalui link alternatif terbaru dan mainkan slot favorit dengan winrate tinggi. dax69

답글 달기

ali umair

2025년 6월 21일

This is a great inspiring article.I am pretty much pleased with your good work.You put really very helpful information. Keep it up. Keep blogging. Looking to reading your next post.gk barry net worth

답글 달기

goias

2025년 6월 22일

I think this is an informative post and it is very useful and knowledgeable. therefore, I would like to thank you for the efforts you have made in writing this article. DeepL下载

답글 달기

ali umair

2025년 6월 24일

You there, this is really good post here. Thanks for taking the time to post such valuable information. Quality content is what always gets the visitors coming. bachelorette themes

답글 달기

ali umair

2025년 6월 26일

You're permitted to publish titles, although not hyperlinks, unless of course they're authorized as well as upo
koi toto
agen togel
toto togel
situs olxtoto
toto togel
paito warna sgp

답글 달기