[<< Day 20](../20_projects/20_projects.md) | [Day 22>>]()
- [Introducing React Hook](#introducing-react-hook)
- [Basic Hooks](#basic-hooks)
- [State Hook](#state-hook)
- [Effect Hook](#effect-hook)
- [Context Hook](#context-hook)
- [Additional Hook](#additional-hook)
- [Exercises](#exercises)
- [Exercises: Level 1](#exercises-level-1)
# Introducing React Hook
In the previous, section you have learned how to use React with hooks which is the older version. Currently, hooks has been introduced to React.
Hooks are a new addition in React 16.8. They allow you use state, life cycle methods and other React features without writing a class component. If we are using hooks we can have only a functional component in the entire application. For more detail explanation you check [React documentation](https://reactjs.org/docs/hooks-reference.html).
Different hooks have been introduced to React:Basic hooks and additional hooks
## Basic Hooks
The basic hooks are:
- useState
- useEffect
- useContext
### State Hook
Using hooks we can access state without writing a class based component. Let's use the same example we used for class based components on day 8.
To use hooks, first we should import the _useState_ hooks from react. The useState is a function which takes one argument and returns a current state and functions that lets you update it.
```js
// index.js
import React, { useState } from 'react'
import ReactDOM from 'react-dom'
const App = () => {
// Declaring new state variable
const [count, setCount] = useState(0)
return (
{count}
)
}
const rootElement = document.getElementById('root')
ReactDOM.render(, rootElement)
```
We use the setCount to update the state. The initial state value is 0.
In the above example, we used an increment method. Let's also a decrement method.
```js
// index.js
import React, { useState } from 'react'
import ReactDOM from 'react-dom'
const App = () => {
// Declaring new state variable
const [count, setCount] = useState(0)
return (
{count}
)
}
const rootElement = document.getElementById('root')
ReactDOM.render(, rootElement)
```
We can also write separate function instead of writing our function inside the curly brackets.
```js
// index.js
import React, { useState } from 'react'
import ReactDOM from 'react-dom'
const App = () => {
// Declaring new state variable
const [count, setCount] = useState(0)
const addOne = () => {
let value = count + 1
setCount(value)
}
const minusOne = () => {
let value = count - 1
setCount(value)
}
return (
{count}
)
}
const rootElement = document.getElementById('root')
ReactDOM.render(, rootElement)
```
Let us do more example about state, in the following example we will develop small application which shows either a dog or cat.
We can start by setting the initial state with cat then when it is clicked it will show dog and alternatively. We need one method which changes the animal alternatively. See the code below. If you want to see live click [here](https://codepen.io/Asabeneh/full/LYVxKpq).
```js
// index.js
import React, { useState } from 'react'
import ReactDOM from 'react-dom'
const App = () => {
// declaring state
const url =
'https://www.smithsstationah.com/imagebank/eVetSites/Feline/01.jpg'
const [image, setImage] = useState(url)
const changeAnimal = () => {
let dogURL =
'https://static.onecms.io/wp-content/uploads/sites/12/2015/04/dogs-pembroke-welsh-corgi-400x400.jpg'
let catURL =
'https://www.smithsstationah.com/imagebank/eVetSites/Feline/01.jpg'
let result = image === catURL ? dogURL : catURL
setImage(result)
}
return (
30 Days Of React
)
}
const rootElement = document.getElementById('root')
ReactDOM.render(, rootElement)
```
Now, let's put all the codes we have so far and also let's implement state using the useState hooks when it is necessary.
```js
// index.js
import React, { useState } from 'react'
import ReactDOM from 'react-dom'
import asabenehImage from './images/asabeneh.jpg'
import './index.scss'
// Fuction to show month date year
const showDate = (time) => {
const months = [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December',
]
const month = months[time.getMonth()].slice(0, 3)
const year = time.getFullYear()
const date = time.getDate()
return ` ${month} ${date}, ${year}`
}
// User Card Component
const UserCard = ({ user: { firstName, lastName, image } }) => (
Author:
Asabeneh Yetayeh