React.js Basics — Part 3 (for starters and Angular Developers)

Photo by Ferenc Almasi on Unsplash

Introduction

In previous posts, we learned few react basics and build couple of simple components.

we also learned about few resources available online to help speed up react learning.

In todays post, we’ll take few more steps and cover the followings:

• Refactoring Overview
• React Hooks Introduction (useState Hook)
• React Router

Refactoring Overview

Lets start with something simple. We built a simple table for vehicles data in previous post.

Now, I have created a new TableHeader component as follows:

This is a small improvement and we’ve moved table header concern to a separate component. we will do small improvements like this to our codebase as we progress.

React Hooks (useState Hook)

Hooks, let you use state and other React features without writing a class.

useState hook let you hook a simple component into a state. Lets see a very basic example:

Here I have a button component with click event handler:

On the UI, when it is clicked it logs a msg to browser console:

Now, we want to keep track of how many times, it has been clicked, you know, e.g. a like button, a vote button uses etc. This is where, we can introduce an internal state to this button component and this can be easily done via useState hook: