React 101 - part 6: Function Components
Tags: javascript, react, beginners, tutorial
Published: 2021-03-11 19:55:00

---
title: React 101 - part 6: Function Components
published: true
description: 
tags: javascript, react, beginner, tutorial
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r3ui703pme0meo82pu5o.png
series: React 101
---

After my Javascript series: https://dev.to/rickavmaniac/javascript-my-learning-journey-part-1-what-is-javascript-role-and-use-case-49a3

I am now ready to begin my React learning journey :)

Click follow if you want to miss nothing. I will publish here on Dev.to what I learn from my React course the day before.

Without further ado here is a summary of my notes for day 6.

<h2>Function component</h2>
The first and recommended component type in React is functional components. A functional component is basically a JavaScript function that returns React JSX. 

A valid React function component:
- Is a JavaScript function
- Must return a React element (JSX)
- Always starts with a capital letter (naming convention)
- Takes props as a parameter if necessary

According to React's official docs, the example below is a valid functional component:
```jsx
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
```
Alternatively, you can also create a functional component with the arrow function:
```jsx
const Welcome = (props) => { 
  return <h1>Hello, {props.name}</h1>; 
}
```

We can create function component in a separate file and export it so you can import it somewhere else
```jsx
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

export default Welcome;
```
import example:
```jsx
import Welcome from './Welcome';

function App() { 
  return (
    <div className="App">
      <Welcome />
    </div>
  );
}
```
<h2>Hook</h2>
Hooks are the new feature introduced in the React 16.8 version. It allows you to use state and other React features in a function component (without writing a class). 

Hooks are the functions which "hook into" React state and lifecycle features from function components. It does not work inside classes.

Hooks are backward-compatible, which means it does not contain any breaking changes. Also, it does not replace your knowledge of React concepts.

If you write a function component, and then you want to add some state to it, previously you do this by converting it to a class. But, now you can do it by using a Hook inside the existing function component.

<h2>useState hook</h2>
useState hook is the new way of declaring a state in React app. Hook uses useState() functional component for setting and retrieving state. Let us understand useState with the following example.

Counter component:
We will start simple by creating a Counter.jsx file with this content
```jsx
import React from 'react'

export function Counter() {
    return <div>
        Counter Component
    </div>
}
```

To display this component we need to import and call it in our index.js file
```jsx
import ReactDOM from 'react-dom';
import { Counter } from './Counter'

ReactDOM.render(
  <Counter/>,
  document.getElementById('root')
);
```

Now let import useState and add a state to our Counter.jsx component
```jsx
import React, { useState } from 'react'

export function Counter() {
    const count = useState(0)
    console.log(counter)
    return <div>
        <h1>Counter Component</h1>
    </div>
}
```
The useState(0) is a React Hook that will set the state default value to zero and return an array of 2 entry:
- count(0) hold the actual state value
- count(1) hold the function to modify the state

A better way to set the useState is to use deconstructing:
```js
const [count, setCount] = useState(0)
```
Thats exactly the same but a lot easier to read. So we still have our two entry: 
- count variable hold the actual state
- setCount variable hold the function to set the state. 

Note that those variables names could have been anything. We choose count and setCount for clarity purpose.

Now that we have set our state we can use it inside our component
```jsx
import React, { useState } from 'react'

export function Counter() {
    const [count, setCount] = useState(0)
    const handleClick = () => setCount(count+1)

    console.log(count)
    return <div>
        <h1>Counter Component</h1>
        <p>{count}</p>
        <button onClick={handleClick}>+</button>
    </div>
}
```
We create a button name + Each time we click on + we call the handleClick function. The function then set the state by using our SetCount function.

![Counter component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/he69j03lshomuvkybyw9.png)

It is possible to have more than one useState per component
```jsx
import React, { useState } from 'react'

export function Counter() {
    const [count, setCount] = useState(0)
    const [count2, setCount2] = useState(0)
    const handleClick = () => setCount(count+1)
    const handleClick2 = () => setCount2(count2+1)
    
    console.log(count)
    return <div>
        <h1>Counter Component</h1>
        <p>{count}</p>
        <button onClick={handleClick}>+</button>
       <h1>Counter Component 2</h1>
        <p>{count2}</p>
        <button onClick={handleClick2}>+</button>
    </div>
}
```

<h2>Conclusion</h2>
That's it for today. tomorrow the journey continue... If you want to be sure to miss nothing click follow me!

Follow me on Twitter: <a href="https://twitter.com/justericchapman?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false">Follow @justericchapman</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>