Components In ReactJS🙂

Introduction

The application you will develop using React will be made up of small components, here components play a very important role as core building blocks of React. With the help of components developing and managing the application becomes much easier by breaking it down into smaller components and helps to work independently. Components are re-usable and can be nested inside other components.

For example, you have seen many websites like c# corner where you noticed header, footer, navbar, articles, blogs section, etc are all individually build components

We have mainly two types of Components,

Class Components
Functional Component

Functional Components are also known as Stateless Components, just as JavaScript functions that may or may not receive an object of properties referred to as props and return JSX.

Let’s create a Functional Component

Import React from ‘react’
function Greet() {
    return <h1>Hello Functional Component </h1>
}
export default Greet

Arrow Function Syntax

const Greet = () => return <h1>Hello Functional Component </h1>
export Greet

Class Components

Class Components are regular ES6 classes. Class components extend the Component class from the react library and must contain a render method that returns some HTML or null. Class components are stateful and may or may not receive an object of properties which is referred to as props and return JSX. Apart from the props class components it maintains a private internal state, it maintains information private to that components and uses the information to describe the User Interface.

import React,{Component} from 'react'
class Welcome extends Component {
    render() {
        return <h1> Welcome Class Component </h1>
      }
   }
export default Welcome

Comparison between Functional and Class Component

Functional Components	Class Components
These are simple functions	These components are Richer in feature
Use Functional Components as much as possible	Richer in feature
Absence of this Keyword	Complex UI Logic
Solution without using State	Maintain their private date which is also known as state
Responsible for UI	Provide Lifecycle hooks
Stateless/Dump/Presentational	Stateful/Smart/Container

As we see in the component that we created we are returning some HTML but that is not regular HTML and is known as JSX.

Let’s learn about JSX,

JSX is basically XML extension to ECMAScript specification. Thus, instead of using pure JavaScript for building DOM elements, you can use JSX, which offers flexibility to developers to use a familiar syntax, viz. HTML.

In React lib write XML like code for elements and components just like XML,
JSX tags have a tag name, attribute, and children.
JSX is not the only way to write react application
JSX transpiler to pure JS which is understood by the browser

Let's have a look at the example that how JSX code and Simple JavaScript code works in React and why JSX looks easier and flexible and more convenient in React.

import React from 'react'
    const Hello = () => {
        return (
            <div className='foo'> Hello React </div>
        )
    }
export default Hello

JSX Syntax

import React from 'react'
const Hello =() => {
return React.createElement (
   ‘div’, {id: ‘hello’, className: ‘foo’ },React.createElement(‘h1’,null, ‘Hello React’)
  )
}
export default Hello

JavaScript Syntax

In the above Javascript syntax, we are using React.CreateElement method that expects a minimum of 3 params.

The first params is a string that specifies the HTML tag to be rendered in the above exam div tag rendered in.

Second params to pass any optional properties or object in key and value pair that need to apply to the element. So we specify the key as an id and value hello. Similarly, we need to add class to the div tag within the object use className as a key and value ‘foo’. Here we are using className because in Javascript class is reserved keyword instead of class use className in camel case.

Third params need to be children for the HTML element that is children of div tag. In our example, simply text will be passed as the 3rd parameter 'Hello React'.

If you want to render any tag like h1 or any other tags we have to call react.createElement again and define all 3 params as you have seen in the above example.

That's why JSX is flexible and more convenient to use.

JSX Differences

Some of the JSX differences than the JavaScript,

class => className
For => htmlFor

Camel case naming convention

onclick => onClick
tabindex => tabIndex

That's all about Components and JSX in React

Happy Reading.