COMPONENTS IN REACT

In React, a component represents a part of the user-interface. 

So for example, I have a header, sidenav, main-content, footer in my application, so the application contains 5 components, ie., for header, sidenav, main-content, footer and main component which holds all other components. The main component is the root component and usually named as an app component in our application. Each of the four nested component describe only a part of the user interface. However, all the components are together to make an entire application. 

Components are also re-usable. The same component can be used with different properties to display different information. For example, the sidenav component can be the left sidenav as well as the right sidenav. As I already mentioned, components can also contain other components. For example, the app component contains other components.

How does a component translate the code in our Application?

The component code usually placed inside a javascript file. For example app component is placed inside app.js. We can also have the file with .jsx extension. 

Component Types

In react we have 2 component types

1. Stateless Functional Component

Functional Component are normally javascript functions. They return HTML to describes the UI. For example a functional component, called welcome which returns an H1 tag that says `hello Harikrishnan`

function Welcome(props) {

return <h1>Hello {props.name}</h1>

}

They can optionally release an object of properties which is referred to as props and return HTML which describes the UI. Here HTML is something known as JSX. So the functional components is a Javascript function that accepts an input of properties and returns HTML that describes the UI. 

Component naming convention we are using PascalCase(Geet.js). The absence of this keyword is there in the functional component.

Example is below
https://github.com/harikrishnanrlive/react-tutorial/tree/master/2_Components/functional_component

2. Stateful Class Component

The class components on the other hand are regular ES6 classes that extend the component class from the react library. They must contain a render method which intern returns HTML. For example, class Welcome extends React.Component and class should contain a render method which returns an H1 tag `Hello Harikrishnan`

class Welcome extends React.Component {

render() {

return <h1> Hello, {this.props.name};

}

}

Class component can also receive props as input and return HTML as JSX. Apart from the props a class component can also maintain a private internal state. In simple words, it can maintain some private information that is private to that component and use that information to describe the UI. Whenever we use components we need 2 imports ie., react and {Component} class from react library. If a class to became react component we need two steps

a. it should extend a component class from React

b. the class should have a render method that should return a null or some HTML.

So we are going back to our first application, in the app.js we can see it is a class component, not a functional component. The class is named as App and extends the Component class from the React library. It contains a render method that returns some HTML. Class components will provide life cycle hooks.

Example is below
https://github.com/harikrishnanrlive/react-tutorial/tree/master/2_Components/class_component

Functional vs Class Component

Components describe a part of the UI. They are re-usable and can be nested inside other components.