DEV Community

Cover image for React 101 - part 6: Function Components
Eric The Coder
Eric The Coder

Posted on • Updated on

React 101 - part 6: Function Components

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>;
}
Enter fullscreen mode Exit fullscreen mode

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

const Welcome = (props) => { 
  return <h1>Hello, {props.name}</h1>; 
}
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

import example:

import Welcome from './Welcome';

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

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>
}
Enter fullscreen mode Exit fullscreen mode

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')
);
Enter fullscreen mode Exit fullscreen mode

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>
}
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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>
}
Enter fullscreen mode Exit fullscreen mode

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

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>
}
Enter fullscreen mode Exit fullscreen mode

Conclusion

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: Follow @justericchapman

Discussion (1)

Collapse
shahilsky profile image
Shahil Hussain

Thanks it's like quick revision