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

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 posts, we will 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:

useState() hook returns an array with two items.

First item is the state (in this case, counter) and the second item is the setter function (in this case, setCounter function) to update the state. That’s all.

useState(0) 0 here is the initial value we set when initialized it.

The usage is also very simple, as you can see the onClick handler is now wired up with setCounter function and there we are incrementing the counter value.

Last but not least, we are simply rendering the value of counter as button’s label. The result in the browser is as follows:

So, that was a very basic introduction of useState hook. We will see this hook very often in later posts.

Now in Angular, we typically have a component.ts file with properties/variables and we can directly increment those using e.g. counter++ . Here this is done via a setState function (similar to a setter in C#).

Ok, lets switch gears a little bit a learn about React Router next.

React Router

Routing is a common concern in web applications. It routes users to destination.

A router device in your home, a traffic sign on German Autobahn, a routing table in AWS VPC or navigation links in a react application, all are doing some sort of routing.

In React, routers help create and navigate between the different URLs that make up your web application. They allow your user to move between the components of your app while preserving user state, and can provide unique URLs for these components to make them more shareable. With routers, you can improve your app’s user experience by simplifying site navigation.

There are many router libraries available for react.

React Router is a fully-featured client and server-side routing library for React. React Router runs anywhere React runs; on the web, on the server with node.js, and on React Native.

Installing React Router

Following npm command will install the react-router

npm install react-router-dom@6

Create App Component

To have a structural improvement, I have created an App component as follows:

(We will move application navigation concerns here a little bit later in the post)

Connect the URL

Lets connect App to browser URL:

I have updated index.js file as shown above.

Add Some Links

Now, the official documentation covers use of react router in a step by steps manner with great examples. You can check the details on this link.

Following are the changes I made to application structure following steps in the guide.

Application Structure

Here are the changes I made to application:

app.js

Updated with bootstrap navigation and added two Links and Outlet as follows:

routes

Create following routes in routes folder:

index.js

Here we teach React Router how to render our app at different URLs:

Testing the Application

Here is how the application looks in the browser:

As you click to different nav-item, you will see that corresponding route is activated.

If you are coming from Angular background, then this concept is very similar with angular routing module and router outlet components to manage routing concerns.

There is more to routing and we will cover more of it upcoming posts.

Also, if you like, you can now create nav items for examples from previous posts and link those with routing:

Summary

In this post, we started by creating a simple TableHeader component to separate that concern.

We also learned about React Hooks and we saw useState hook in action and how it let simple components to hook into a state and provides a mechanism to update that state.

We installed and used react router library to our project and configure various routes in an application for better structure and navigation purposes.

Source code is available on this git repository.

You can check the published application on this link.

Let me know if you have some comments or questions. Till next time, happy coding.

My Recent Books