
React Components
Components are reusable and independent bits of code.
React Components come in two types
The React Components name must start Upper Case Letter
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 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;
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;