E2EHIRING Logo
Jobs
Jobs
courses
Courses
mentorship
Mentorship
more
Moredropdown
E2EHIRING Logo
more
Jobs
Jobs
courses
Courses
mentorship
Mentorship
HomeSepratorIconBlogsSepratorIconIntroduction to React ComponentsSepratorIcon

Introduction to React Components

Han SoloSandhya M
calendar15 Jun 2022
poster

React Components

Components are reusable and independent bits of code.


React Components come in two types 

  1. Function Components
  2. 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;

Recent Posts

Rapid Changes in the Coding World: Need for High Skilled Programmers e2eHiring Bridges this Gap with the Mentorship Program April 2023

Rapid Changes in the Coding World: Need for High Skilled Programmers e2eHiring Bridges this Gap with the Mentorship Program April 2023

How to publish your Android app on Google Play Store

How to publish your Android app on Google Play Store

Creating Dynamic User Interfaces with Android Motion Layout

Creating Dynamic User Interfaces with Android Motion Layout

Bean Life Cycle

Bean Life Cycle

Pom.XML

Pom.XML

copycopycopycopy

Han Solo

Recent Posts

Rapid Changes in the Coding World: Need for High Skilled Programmers e2eHiring Bridges this Gap with the Mentorship Program April 2023

Rapid Changes in the Coding World: Need for High Skilled Programmers e2eHiring Bridges this Gap with the Mentorship Program April 2023

How to publish your Android app on Google Play Store

How to publish your Android app on Google Play Store

Creating Dynamic User Interfaces with Android Motion Layout

Creating Dynamic User Interfaces with Android Motion Layout

Bean Life Cycle

Bean Life Cycle

Pom.XML

Pom.XML