We talked about React Elements before. They are like HTML elements represented by a JavaScript statement giving you programmatic control over layout of your webpage or web application.

To get a good idea of how flex works try flex layout editor on this page.

While React Elements are the most common building blocks of a React application the notion of React Component is similar. Except with custom functionality added to them like: component initialization, states, rendering and passing props to them. We’re expanding on the same principle.

A React Component is an abstract idea. Think of them as supercharged react elements, or rather: supercharged HTML elements that you can manipulate, initialize, attach or detach from and to the DOM tree using JavaScript.

Creating a React.Component

Before going into code first thing you want to do is think about your component’s purpose. What will your React Component be used for? It is common for components to be lists, or sets of repeatable data (with children.) Will it be a todo list? A song list from a popular music band?

Spending a minute or two to think about its purpose helps. In this example we will create a component “Album”, containing all 10 songs from Dark Side of The Moon album by Pink Floyd to demonstrate basic React Component principles.

There are several different ways to create components. One way to create a React Component is to extend (inherit, or also: derive) a class from React’s main component class attached to React’s object itself: React.Component Let's take a look at how this is done:

// React.Component is the main React component class class Album extends React.Component { render() {

return( <div>

<h1>Dark Side Of The Moon - Pink Floyd</h1>

<ol> // A list of all songs

<li>Speak to Me</li>

<li>Breathe (In The Air)</li>

<li>On The Run</li>

<li>Time</li>

<li>The Great Gig in the Sky</li>

<li>Money</li>

<li>Us and Them</li>

<li>Any Colour You Like</li>

<li>Brain Damage</li>

<li>Eclipse</li>

</ol>

</div>)

}

}

I separated JSX in brown color from the rest of the class definition (not seen in this article as it has been taken from my React Tutorials site where it actually is). This way you can see different parts of the React component creation process.

Notice that the return(…) statement also contains a React Element abstracted using JSX.

Congratulations! You have just created your first React Component. It’s a simple list of songs. Of course, in your app, the HTML would describe layout structure created for the unique purpose of whatever you are creating.

And that’s what React Components are. They are a really nice way to pack a JavaScript class with HTML data, usually for creating UI elements.

Of course, this is just the beginning. You can do so much more with React Components.

render method will be called later when ReactDOM.render is called on this component. return with parentheses returns the value which is the component’s own content (the JSX part.)

Note that the return method returns a JSX element. JSX syntax (Writing HTML tags into JavaScript code) actually consists of XML tags, not HTML. There are just a few differences between the two. But JSX allows you to use HTML tags as JavaScript statements.

Head over to creating JSX-based elements tutorial to see what they are and how to make them. The whole point of React is to use JavaScript to toss nested (or not) HTML elements around in your application. That’s what creating and working with React Components helps with.

While this might sound obscure at first, there is good purpose for making React Components. They reduce the HTTP Request footprint and improve your website’s or app’s performance via Virtual DOM mechanism, making it faster than traditional websites from pre-2015 era.

Functional Components (stateless)

We’ve just covered the bare basics of React Component creation process. But there are multiple ways of creating components in React.

In this section we will explore functional components. They are React components created using JavaScript functions. While their idea and function (pardon the pun) are similar to React Components created using class and extend keywords, they lack one little detail.

These types of components in React are also called stateless functional components. We will get to states elsewhere on this site, for now just think of Functional Components as limited in that they cannot (or don’t need to) have state.

function Button( props ) {

return(

<button className = "pressMe"

onClick = {

() => props.onClick() }>

Click Me!

</button>)

}

Nothing to extend here. JavaScript functions are constructors and we can treat this as object definition. Here I used another example by replacing Pink Floyd album with an HTML button. This is to demonstrate that React Components can be pretty much anything.

You can see how much more simple this component is from our previous example. Keeping your React components as simple as possible (if situation permits) makes it easy to work with and reuse components multiple times later on.

We just saw that making stateless functional components is easy. Simply use a JavaScript function to create a class such as Button in this example, and under return, specify JSX you want to be rendered when that component is passed to RenderDOM.render method.

Rendering <Button /> Component

Coming from traditional JavaScript background, you might find it incredibly surprising that when working with JSX in order to use our new Button class you don’t have to either instantiate the Button object with new keyword nor pass it to React.createElement function. What then?

With JSX enabled we’re ready to start using <Button /> component by simply passing it to ReactDOM.render method:

// First, select target HTML element #root for rendering Button in

var root = document.getElementById("root"); // Render the functional Button component simply using <Button />

ReactDOM.render(<Button />, root,

() => { console.log("We have just rendered this button.");

});

And after running this code, your HTML button will be fully rendered inside #root element and the Chrome console will output from the arrow callback function:

We have just rendered this button.

JSX <Button /> syntax automatically creates a React Component out of our stateless functional component called Button. Usually with uppercase letter, following JavaScript function constructor trend such as Array, Date, Number, etc. Then it is rendered by ReactDOM.render inside an HTML element with id = “root”. That’s it! You’ve created and rendered a custom component!

Hope you enjoyed this tutorial.

And I will see you next time.

Call to Action: