Home >> Tutorials >> Reactjs Component

React.js Component

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation
There are mainly two types of Components:
  1. Functional Component OR Stateless Component - Only props, no state
  2. Class Component OR Stateful Component - Both props and state.
1. Functional Component: (Stateless)
function FunctionComponent(props) {
  return 

Hello, {props.name}

; } //In ES6 Style: const FunctionComponent = (props) => { return

Hello, {props.name}

; }
2. Class Component: (Stateful)
import React, { Component } from 'react';

class ClassComponent extends Component {
  render() {
    return (
      

Class Component

Welcome to React's - Class Component

); } } export default ClassComponent;
Note:
  • Always start component names with a capital letter.
  • React treats components starting with lowercase letters as DOM tags.
Full Stack Tutorials

Author @FullStackTutorials | View all Articles