First function
import React from 'react'
import '../[Link]'
export default function First(props) {
return (
<div className='first'>
<p className='ha'>hello this is the first function component</p>
<img className='App-logo' src="[Link]" class="img-fluid" alt="..."></img>
{[Link]}ethiopia
{[Link]}
</div>
)
}
[Link]
<First name='john'>
<p>this is children</p>
<button>click me</button>
</First>
import React, { Component } from 'react'
export default class Second extends Component {
render() {
return (
<div className='habte'>
<p>hello this is the second class component function</p>
</div>
)
}
}
<Second /> [Link]
State handler
import React, { Component } from 'react'
export default class State extends Component {
constructor(props) {
super(props)
[Link] = {
text:"subscribe",
channel:"Top trainng"
}
}
changeEvent() {
[Link]({
text:"subscribed",
channel:"thank you for your subscribtions"
})
}
render() {
return (
<div>
<h1>{[Link]}</h1>
<button type='button' onClick={() =>
[Link]()}>{[Link]}</button>
</div>
)
}
}
Class promps
import React, { Component } from 'react'
import '../[Link]'
export default class Classpromps extends Component {
render() {
return (
<div className='promp'>
<p>this is class promps tutorial</p>
<h3>hello my name is {[Link]}</h3>
</div>
)
}
}
<Classpromps name='yohannes' age='77'/>
conditional
import React, { Component } from 'react'
export default class Conditional extends Component {
constructor(props) {
super(props)
[Link] = {
subscribe:false
}
}
render() {
if([Link]){
return(
<h1>subscribed</h1>) }
else{
return (
<div>
<h1>please subscribe</h1>
</div>)}
}}
Teritiary
import React, { Component } from 'react'
export default class Tertiary extends Component {
constructor(props) {
super(props)
[Link] = {
subscrib:true
}
}
render() {
return [Link] ? (
<div>
<h1>subscribed</h1>
</div>
):
(
<h1>subscribe</h1>
)
}
}
Data feching
import React, { useEffect, useState } from 'react'
import axios from 'axios';
export default function Datafeching() {
const [post,setPosts]=useState([])
useEffect(()=>{
[Link]('[Link]
.then(res=> {[Link](res)
setPosts([Link])
})
}, )
return (
<div>
<ul>
{[Link](posts=>(
<li key={[Link]}>{[Link]}</li> ))}</ul>
</div>
)}
External styling
[Link]
heading{
color: blue;
background-color: blueviolet;
font-size: larger;
}
import React from 'react'
import './[Link]'
export default function External() {
return (
<div>
<h2 className='heading'>this is external stylesheet</h2>
</div>
)
} <External/> in [Link]
Event handler
import React from 'react'
export default function Eventhand() {
function Handler(){
alert('hi i ,m event andler')
}
return (
<div>
<button onClick={Handler}>click me</button>
</div>
)
}
Import to [Link]
Router dom
<Router>
<nav>
<Link to='/' >Home</Link>
<Link to='/Contact'>Contact</Link>
<Link to='/About'>About</Link>
</nav>
<Routes>
<Route path='/' element={<Home/>}/>
<Route path='/Contact' element={<About/>} />
<Route path='/About' element={<Contact/>}/>
</Routes>
</Router> we have to creat [Link] [Link] and [Link]
Inline stylesheet
import React from 'react'
export default function Inlinestyle() {
const header ={
color:'orange',
backgroundColor:'blue',
}
return (
<div>
<h1 style={header}>hello this is react style</h1>
</div>
)
}
maping
import React from 'react'
export default function List() {
const courses=['html','css','javascript','react','html','mongodb','array']
return (
<div>
{
[Link]((name,index) =><h1 key={index}>{name} </h1>)
}
</div>)}
Form
import React, { Component } from 'react'
export default class Form extends Component {
constructor(props) {
super(props)
[Link] = {
username:'',
Comment:'',
tutorial:''
}
}
usernamehandler=(e)=>{
[Link]({
username:[Link]
})
}
Commenthandler=(e)=>{
[Link]({
Comment:[Link]
})
}
tutorialhandler =(e)=>{
[Link]({
tutorial:[Link]
})}
submithandler =(e)=>{
alert(`${[Link]} and ${[Link]}
${[Link]}`)
}
render(){
return (
<div>
<form onSubmit={[Link]}>
<div>
<label>user name:</label>
<input type='text' value={[Link]}
onChange={[Link]}></input>
</div>
<div>
<label>comment:</label>
<textarea type='text' value={[Link]}
onChange={[Link]}></textarea>
</div>
<label>tutorial:</label>
<select value={[Link]}>
<option value="html" >HTML</option>
<option value="css">CSS</option>
<option value="java script">JAVASCRIPT</option>
</select>
<div><button type='submit'>submit</button></div>
</form>
<h1>my name is {[Link]}</h1>
<h1>my comment is {[Link]}</h1>
</div>)}}
Use state counter
import React, { useState } from 'react'
export default function Usestatecountr() {
const intial=0
const [count,countupdator]=useState(intial)
return (
<div>
<h3>count:{count}</h3>
<button onClick={()=>countupdator (count-1)}>decrement</button> <br></br>
<button onClick={()=>countupdator (count+1)}>increment</button><br></br>
<button onClick={()=>countupdator (intial)}>reset</button>
</div>
)
} import to [Link]
User [Link]
import React, { useReducer } from 'react'
const intialstate=0;
const reducer=(state,action)=>{
switch(action){
case 'increment':
return state+1
case 'decrement':
return state-1
case 'reset':
return intialstate
}}
export default function Usereduce() {
const[count,dispach]=useReducer(reducer,intialstate)
return (
<div>
<div>count:{count}</div>
<button onClick={()=>dispach('increment')}>+</button>
<button onClick={()=>dispach('decrement')}>-</button>
<button onClick={()=>dispach('reset')}>rsest</button>
</div>
)}
Import it in to [Link]
[Link]
import React, { useEffect, useState } from 'react'
export default function Subchild() {
const [count, countupdater]=useState(0)
useEffect(()=>{
[Link](count)
})
return (
<div>
rendercount:{count}
<button onClick={()=>countupdater(count+1)}>increament</button>
</div>
)
}
import React, { useMemo, useState } from 'react'
import Subchild from './subchild'
export default function Usememo() {
const[count,setCount]=useState(0)
function clickHandler(){
setCount(count+1)
}
const subchild=useMemo(()=>{
return <subchild/>
},[])
return (
<div>
<h3>count:{count}</h3>
<button onClick={clickHandler}>increament</button>
<Subchild/>
</div>
)
}
USER RIF
import React, { useEffect, useRef, useState } from 'react'
export default function Userif() {
const [timer,setTimer]=useState(0)
const intervalref=useRef(null)
useEffect(()=>{
[Link]=setInterval(()=>{
setTimer(prevTimer=>prevTimer+1)
},1000)
return()=>{
clearInterval([Link])
}
},[])
return (
<div>
Timer-{timer}<br/>
<button onClick={()=> clearInterval([Link])}>stop
Timer</button><br/>
<button onClick={()=> setTimer(prevTimer=>prevTimer1)}}>continue</button>
</div>
)
}
Use call back button
import React, { useState } from 'react'
function button(handleclick,children) {
[Link](‘button rendering-’,children)
return (
<div>
<button onClick={handleclick}>{children}</button>
</div>
)
}
export default [Link](Counter);
Counter for usecallback
import React from 'react'
function Counter({text,count}) {
[Link](`rendering${text}`)
return (
<div>
{text}-{count}
</div>
)
}
export default [Link](Counter);
usecall back
import React, { useState } from 'react' use call back
import Usestate from './hooks'
import Counter from './counter'
export default function Usecallback() {
const [counter1,setCounter1]=Usestate(0)
const[counter2,setCounter2]=useState(0)
const increament1 = Usecallback(()=>{
setCounter1(counter1+1)
},[counter1])
const increament2= Usecallback(()=>{
setCounter2(counter2+2)},[counter2])
return (
<div>
<Counter text="count by 1:" count={counter1}/>
<button handleClick={increament1}>+1</button>
<Counter text="count by 2:" count={counter2}/>
<button handleClick={increament2}>+1</button>
</div>
)
}
Context
import React, { useContext } from 'react'
import {ChannelContext , OwnerContext } from '../App'
export default function Usecontext() {
const owner=useContext(OwnerContext)
const Channel=useContext(ChannelContext)
return (
<div>
owner:{ owner }<br/>
channel:{ Channel }
</div>
)
}
In [Link] we export
export const OwnerContext= createContext() we can add [Link] creatcontext
export const ChannelContext= createContext()
.
.
.
<[Link] value={'graphics'}>
<[Link] value={'toutor'}>
<Usecontext/>
</[Link]>
</[Link]>