ReactJS Components and Data Communication

In ReactJS,we can have Function Components and Class Components.

• Function components:

Functional components are the general javascript function which can return an html content and this content will further render by JSX ( Javascript XML) then it shown the final UI. Thisfunction component can also accept the parameter but it is optional.

Syntax to create a Function Component:

const exampleComponent = () => {

return <div>Example Component</div>;

}

• Class components:

In an web application , we can have different kind of components which can have various functionality like common module such as header, aside or any common component in which either it can be render independently or in some another parent component . So, Most commonly multiple component is used in another component to achive a particular functionality, which makes the application more understandable and a better structure.

Syntax of a Class components:

class ClassName extends React.Component

{

render(){

return <div>Example Component</div>;

}

}

• Data Communication in ReactJS :

In an application , there are so many different components which is connected with each other for some particular functionality , that can be various component and data communication is also required there , so In ReactJS there is a concept of "Props" by using this props property we can communicateour different components with makes the communication more easier. But flow of communication depend from which component we required data and where to send , there is a parent and child relationship between the component , therefore we need to understand first how we can transfer our data from Parent to Child and Child to Parent by using "props" property.

Also, Read Getting Started With React Native

Parent to child data communication :

In this case parent component need to send the data in the child component , herewe haveto pass our "props" property as a arugment in the child component and once the child component receive data from props then we can access that property by use props.property_name , here property_name is passed through the parent component to child component.Below is the Syntax :

function parent(){

const data =

{

name: "parent",

id:"1"

};

return (

<div>

<child name ={data.name} id= {data.id} />

</div>

)

}

function child(props){

return (

<h1>"Data is comming from " {props.name}</h1>

<h1>{props.id}</h1>

)

}

You may also like to read The Future of ReactJS

Child to parentdata communication:

In this case it is not possible to send the data back to the parent component from child component , here we have to use callback function by which we can send back our data to parent component through child component. Below is the sytnax:

function childComponent(props) {

return (

<label> Name: <input onChange = {props.onNameChange} value={props.id} /> </label>

)

}

Below is the parent component:

import React, { useState } from 'react' ;

function parentComponent(props) {

const [name, setName] = useState("Parent")

function nameChange(event) {

setName(event.target.value) } return (

<form>

<childComponent onNameChange={nameChange} name={name} />

</form>

) }