React Components

Components are reusable and independent bits of code.

React Components come in two types

Function Components
Class Components

The React Components name must start Upper Case Letter

Class Component

The Class Component must include the extends React.Component statements this creates an inheritance to React.Component and give access to React.Component functions

This Component method requires also requires a render() method that returns HTML

EXAMPLE:

class Blog extends React.Component {
render(){ 
     <h1>Welcome to my Blog</h1>
     }
};

We can pass data from one class to another class component

It is more complex than Function Components

EXAMPLE:

App.js
import React from "React"
class Name extends React.Component{
constructor(){
super()
this.state = { list:
[{"name":"Ram"},{"name":"Sham"}] }
}
render(){
return( 
<div>  
  <StudentList/>  
  <ul>            
  {this.state.list.map((item) => <StudentList data = {item} />)}           
</ul>  
  </div>    
)
}
}
export default App;




StudentList.js
class StudentList extends React.Component {  
render() {  
 return (  
   <ul>            
      <li>{this.props.list.name}</li>   
      </ul>  
   );  
  }  
}  
export default StudentList;

Function Components

Function Components are a Components that only contains a render() method and Do not have their own States

We can create a function that takes props as input and returns what should be rendered

EXAMPLE:

function Blog(){
return (
<h1>Welcome To My Blog </h1>
}

The function Component is also known as Stateless Component as they dont hold or manage State.

EXAMPLE:

import React from 'react';

function App() {
  const greeting = 'Hello Function Component!';
  return <h1>{greeting}</h1>;
}
export default App;

Components in Components

EXAMPLE:

import React from "react"

function Component1(){
return <h1> I am Component-1</h1>
}


function Component2(){
return(
<div>
<h1>I am Component-2</h1>
<Component1 />
</div>
)

}

export default Component2;