Contact Information

No. 1101, 24th Main, JP Nagar, 1st Phase, Bangalore 560 078

Hello everyone, Welcome to our 3rd chapter. In this chapter, we will explain the basic building blocks of the React App called components. In the previous tutorial, we have explained how to create a react app using create-react-app and how to start the server. Now in this tutorial, you will learn components and different types of components with examples.

What are Components?

Component splits UI into independent and reusable pieces which optionally accepts input called props and returns react element. There are 2 types of components

  • Functional(stateless) Components
  • Class(stateful) Components

What are Functional(Stateless) Components?

A functional component is a simple javascript function that returns a React element. It is also called as stateless components. Now let’s look at our App.js file. Add simple functional components as shown below.

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
   return (
       
<img src={logo} className="App-logo" alt="logo" />

Welcome to Tech diagonal tutorials

<FunctionalComponent /> <FunctionalComponentArrow />
); } function FunctionalComponent(){ return

Functional Component Example

} const FunctionalComponentArrow = () => { return

Functional Component Arrow Example

} export default App;
Enter command “npm start” and Check your browser. You should see the following screen
FunctionalComponent is a Javascript function that returns JSX. Second function FunctionalComponentArrow is also a functional component with arrow syntax. Let’s see what happens in this example

  • ReactDom renders <FunctionalComponent /> and <FunctionalComponentArrow /> elements
  • React calls FunctionalComponent and FunctionalComponentArrow components
  • These two components return <h1> HTML element
  • ReactDom updates DOM with these elements

Pretty easy isn’t it? But make sure that you return only one element. If you want to return multiple elements then you have 2 options

  • Return it as an array of elements
  • Wrap these elements in a div tag.
for example

const FunctionalComponentArrow = () => {
   return

Functional Component Arrow Example

Functional Component Arrow Second Line

}
Syntax of Arrow function in React.
const functionName = (props) => {
	//... Do something
}

Note: Always start component names with a capital letter.
React treats components starting with lowercase letters as DOM tags. For example, <div /> represents an HTML div tag, but <Welcome /> represents a component and requires Welcome to be in scope.

What are Class(Stateful) Components?

Class component extends react class Component. The class component has state and lifecycle. Don’t worry about state and lifecycle of component now. Add the following class after FunctionalComponentArrow function.

for example

class ClassComponentExample extends React.Component {
   render() {
       return 

Class Component

; } }
Add the element <ClassComponent /> after <FunctionalComponentArrow /> inside return function of App(). Now check browser.
Now let’s understand what is happening here.

  • ClassComponentExample is a React Component class
  • The render method returns a description of what you want to see on the screen.
  • React takes the description and displays it on the screen

Why use Functional Components?

  • Functional Components are easy to maintain
  • They are also easy to debug and test
  • They can have better performance

Why use Class Components?

All the problems in React cannot be solved with functional components. If you want to maintain the local state of the component then use class components.

  • Class Components hold and manage the state of the components.
  • They have lifecycle methods that will be called when a component is mounted, updated and unmounted.

Chapter 2 - Creating React Projects With Create React App

Chapter 4 - Understanding ReactJS Props



Leave a Reply

Your email address will not be published. Required fields are marked *