React JS Components

In react, A component is a part of user interface. That's why react called as component based application. They are reusable and nested inside other components. Also, They are the building blocks of any react application.

App.js - App component contains all other components. so, called as root component of our application.

Main two types of components. Stateful Class Component and Stateless Functional Component.

1. Stateful Class Component

You can use ES6 class to define a component. Class component must contain a render method which returns HTML code.

Stateful Class Component
class ReactTutorial extends React.Component { render() { return <h1>Hello, React</h1>; } }

2. Stateless Functional Component

Define a functional component is to write a JavaScript function.

Stateless Functional Component
function ReactTutorial(props) { return <h1>Hello, React</h1>; }

Exporting and Importing components

We have one parent component as ReactTutorialParent and one child component as a ReactTutorialChild. You can allow importing child component in parent component with any name. For Import, at the begging of parent component file(ReactTutorialParent).

Example
import ReactTutorialChild from './components/ReactTutorialChild';

Child component must have exported.

For Export, at the end of child component file(ReactTutorialChild).

Example
export default ReactTutorialChild;

 

← Previous

Next →