React Hooks Tutorials: Introduction

Introduction to React Hooks

Welcome to the React hooks tutorials 1st tutorial, throughout this series I will try my best to convey the information I have in a very precise manner and in an easily understandable way.

Before diving into react hooks I would like to tell you the basic prerequisite and the rules/syntax for using react hooks.

I. create react app

First of all, you need to prepare the setup to work with react. For that, you simply need to create react app with your project name whatever you want,

Example:

create react app <project_name>

II. Remove unnecessary files

Every time we create react app it generates basic code and files. So remove them from the project
Especially remove the code from App.js file return statement

The above are the basic requirements to start with react. Now I will enlist some basic rules or syntax to use the react hooks

1. Import before use

Every time you will use any react hook it must be imported in that file from react by destructuring it out using curly braces.

Example:

    import React, {useState} form ‘react’

2. Use Hooks only in functional components

The react hooks can only be used inside of functional-based components, we can not use them in class components. Since using react hooks we must use function class-based components. On other hand, in class-based components, we have a different approach to achieving the work which we can do with react hooks

3. Define the Hooks at the top

level of functional component
Using react hooks we must define it at the top level. Neither they can be in any conditional statement nor in any method inside the component.

So that is a really important thing to know about hooks before you start working with them. In future articles, I will discuss all the hooks one by one. Starting with the most used and important hooks.

Connect me on Twitter, Linkedin and GitHub!