The component

In React, we build applications using composable, modular components. These components represent parts of our visual interface and are rendered as such. In their most simple form, they are simply a description of how to render. We create a component by using ES2015 class syntax:

import React, { Component } from 'react'; 
 
class Title extends Component { 
 
  render() { 
    return ( 
      <h1> 
        Hello World! 
      </h1> 
    ); 
  } 
} 

Since the only requirement is that a render() method is defined, this is now a valid and complete (albeit not especially useful) React component.

In a typical React application project, a component will be self-contained within a file. Files that contain JSX, such as a component file, sometimes have a .jsx extension in web projects; however, this practice is less common in React Native projects. This extension helps tools such as Babel know how to transform them into browser-compatible JavaScript. The entire contents of the file that defines and exports the Title component, Title.jsx, might look like this:

import React, { Component } from 'react'; 
export default class Title extends Component { 
 
  render() { 
    return ( 
      <h1> 
        Hello World! 
      </h1> 
    ); 
  } 
} 

This simple component by itself is not very compelling. So far, everything we've seen in this component could easily be created using only HTML. Rest assured, React provides several ways of making this component more interesting and useful.