Mongoose - Using CRUD operations in mongodb in nodejs
MongoDB CRUD Operations Mongoose provides a simple schema based solution to…
June 27, 2020
In this post, we will talk about basic of how to create components in ReactJS. Whatever is rendered through ReactJS is one or more component. Component os the backbones of ReactJS.
There are two ways to create components in ReactJS:
The simplest way to create a component is via using a function.
import React from 'react'
export default function App() {
return (
<div>
<h1>Hi there</h1>
</div>
)
}
To pass props to a functional component, use:
import React, {Component} from 'react';
function Test(prop) {
return (
<div>
<h1>Hi {prop.name}</h1>
</div>
)
}
function Test2({desig, name}) {
return (
<div>
<h1>Hi {desig}, {name}</h1>
</div>
)
}
function Test3(obj) {
return (
<div>
<h1>Hi {obj.data.desig}, {obj.data.name}</h1>
</div>
)
}
class App extends Component {
render() {
const data = {id: 1, name: 'Rahul', desig: 'Admin'};
return <React.Fragment>
<Test name="Rahul"/>
<Test2 name="Rahul" desig="Engineer"/>
<Test3 data={data} />
</React.Fragment>
}
}
export default App;
Output:
Hi Rahul
Hi Engineer, Rahul
Hi Admin, Rahul
In above example, I have shown three examples on how you can pass the properties or data or props to the functional component.
Another way to create component is to have a class inherited through React’s Component class.
import React, { Component } from 'react'
export default class App extends Component {
render() {
return (
<div>
<H1>Hi</H1>
</div>
)
}
}
import React, {Component} from 'react';
class Test1 extends Component {
render() {
return (
<div>
<h1>Hi {this.props.name}</h1>
</div>
)
}
}
class Test2 extends Component {
render() {
return (
<div>
<h1>Hi {this.props.person.name} {this.props.person.id}</h1>
</div>
)
}
}
class App extends Component {
render() {
const data = {id: 1, name: 'Rahul', desig: 'Admin'};
return <React.Fragment>
<Test1 name="Rahul"/>
<Test2 person={data}/>
</React.Fragment>
}
}
export default App;
Output:
Hi Rahul
Hi Rahul 1
Its totally your choice as to how to create components. Traditional javascript developers loves function components. As OOPs programmer loves class components. Although class provides lot of other functionalities like states, lifecycle events etc. Newer version or ReactJS also provides a way to hook states into functional components.
MongoDB CRUD Operations Mongoose provides a simple schema based solution to…
Introduction I had to write a CICD system for one of our project. I had to…
This post some useful tips of using strings, and some issues while dealing with…
Introduction Npm has a tool called: npm audit which reports if your packages or…
Each jar file has a manifest file in META_INF/MANIFEST.MF I have to read each…
hook_cron() suggests to put tasks that executes in shorter time or non-resource…
Introduction In this post we will see following: How to schedule a job on cron…
Introduction There are some cases, where I need another git repository while…
Introduction In this post, we will see how to fetch multiple credentials and…
Introduction I have an automation script, that I want to run on different…
Introduction I had to write a CICD system for one of our project. I had to…
Introduction Java log4j has many ways to initialize and append the desired…