ZetCode

React.js component tutorial

last modified July 13, 2020

React.js component tutorial shows how to work with components in React.js. React.js supports class-based and functional components.

React.js

React.js is a declarative, component-based JavaScript library for building user interfaces. React.js allows to build encapsulated components that manage their own state. These components can be used to create complex UIs.

React.js component

React component is a basic building block of a React application. It is a reusable bit of code. React supports class-based and functional components.

React.js class-based component example

In the first example, we create a simple React application that contains one class-based component. 

$ npx create-react-app compex

We create a new React application.

index.js
import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
  render() {
    return <p>Hello there!</p>;
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

The App component creates a simple paragraph of text. 

class App extends React.Component {

A React component inherits from the React.Component. 

render() {
  return <p>Hello there!</p>;
}

The render() renders a React element into the DOM in the supplied container.

public/index.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>React App</title>
</head>

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
</body>

</html>

This is the home page of the application. The component is rendered into the container with the root id. 

$ npm start

We start the development server and navigate to the localhost:3000 to see the output.

Separating components

Components are mostly separated in their own files.

App.js
import React from 'react';

class App extends React.Component {
  render() {
    return <p>Hello there!</p>;
  }
}

export default App;

This is the App component.

index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

The App component is included and used in the index.js file.

React.js functional component

Functional components are created with JavaScript functions.

index.js
import React from 'react';
import ReactDOM from 'react-dom';

function App() {
    const greeting = 'Hello there!';
    return <p>{greeting}</p>;
  }

ReactDOM.render(<App />, document.getElementById('root'));

The App component is created as a JavaScript function.

public/index.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>React App</title>
</head>

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
</body>

</html>

The home page is the same.

In this tutorial, we have worked with React components.

List all React.js tutorials.