React 101 - part 6: Function Components

#javascript #react #beginners #tutorial

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.

Function component

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:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Alternatively, you can also create a functional component with the arrow function:

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

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

export default Welcome;

import example:

import Welcome from './Welcome';

function App() { 
  return (
    <div className="App">
      <Welcome />
    </div>
  );
}

Hook

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.

useState hook

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

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

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

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:

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

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.

It is possible to have more than one useState per component

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>
}