React Components

Earlier, the developers write more than thousands of lines of code for developing a single page application. These applications follow the

traditional DOM structure, and making changes in them was a very challenging task. If any mistake is found, it manually searches the

entire application and updates accordingly. The component-based approach was introduced to overcome an issue. In this approach,

the entire application is divided into a small logical group of code, which is known as components.

A Component is considered as the core building blocks of a React application. It makes the task of building UIs much easier. Each

component exists in the same space, but they work independently from one another and merge all in a parent component, which will

be the final UI of your application.

Every React component has their own structure, methods as well as APIs. They can be reusable as per your need. For better

understanding, consider the entire UI as a tree. Here, the root is the starting component, and each of the other pieces becomes

branches, which are further divided into sub-branches.

It is placed in the javascript file. Eg: App component is placed in App.js file.

In ReactJS, we have mainly two types of components. They are,

1. Functional Components

2. Class Components

Function Component

It is just a Javascript function, we can optionaly receive objects of properties which are referred to as props and return html(JSX) which

describe the UI.

It behaves pretty much the same way as a Class component, but Class components have some additions.

It doesn't have their own state. 

It is also known as a stateless component because they do not hold or manage state.

Create a Function component called Car

	import React from 'react'
	function Car() {
	return <h2>Hi, I am also a Car!</h2>;
	}
	export default Car

view raw Car.js hosted with ❤ by GitHub

Here we are exporting the Car function from Car.js and import it in App.js, included in the App component as custom HTML tag.

	import React, { Component } from 'react';
	Import Car from ‘./Car’
	class App extends Component{
	render(){
	return(
	<Car />
	);
	}
	}
	export default App;

view raw App.js hosted with ❤ by GitHub

Using Arrow function

	const Car = () => {
	return(
	<h2>Hi, I am also a Car!</h2>
	)
	}
	export default Car

view raw Car.js hosted with ❤ by GitHub

Or you can write as below as well.

	const Car = () => <h2>Hi, I am also a Car!</h2>
	export default Car

view raw Car.js hosted with ❤ by GitHub

Class Components

It is basically a ES6 class similar to functional component, a class component also optionaly receives props as input and returns HTML(JSX).

In addition to that It maintain private internal state. It can maintain some information which is private to that component and use that

information to describe the UI.

When creating a React component, the component's name must start with an uppercase letter.

The component has to include the extends React.Component statement, this statement creates an inheritance to React.Component, and

gives your component access to React.Component's functions.

The component needs to implement a render() method, which returns HTML. 

You can pass data from one class to other class components.

The class component is also known as a stateful component because they can hold or manage local state.

	import React from 'react';
	class Car extends React.Component {
	render() {
	return <h2>Hi, I am a Car!</h2>;
	}
	}

view raw Car.js hosted with ❤ by GitHub

Now your React application has a component called Car, which returns a <h2> element.

To use this component in your application, use similar syntax as custom HTML tag: <Car />

	import React, { Component } from 'react';
	Import Car from ‘./Car’
	class App extends Component{
	render(){
	return(
	<Car />
	);
	}
	}
	export default App;

view raw App.js hosted with ❤ by GitHub