React 101 (React Components, Props, State, Hook and calling REST API)

This article will show you how to develop a front-end web application with React without any other package. I will explain to you the basic of React including React Components, Props, State, Hook and how to call REST API.

Software Installation

• Node.js https://nodejs.org
• Visual Studio Code https://code.visualstudio.com/

Let’s begin!

Create an initial React project:

npx create-react-app react-basic
cd react-basic

Start React app:

npm start

Access http://localhost:3000 on a web browser to see the result:

MyBar Component

Let’s create a navigation bar component, namely MyBar.
Create src/MyBar.js

Style your MyBar Component with CSS based on the example of css here: https://www.w3schools.com/css/css_navbar.asp
Create src/MyBar.css

Edit src/App.js to include MyBar Component in your app.

The result:

MyCard Component

Let’s create a Card Component for displaying data based on the HTML and CSS from: https://www.w3schools.com/howto/howto_css_cards.asp
Create src/MyCard.js.

Create src/MyCard.css.

Edit src/App.js to to add multiple MyCard Components.

Edit src/App.css to support responsive display using grid (row and column).
For smaller screen (576px) will have just 1 column/component per row.
For larger screen (992px) will have 3 columns/components per row.

The result:

React Props

Firstly, download attractions.json from:
https://melivecode.com/file/?f=json/attractions.json
then put in file in src/attractions.json

Edit src/App.js to include data from such json file and store in variable data (line 5).

Props are data or arguments passed into React components via HTML attributes as shown in line 13–17 (data is an array of object, therefore we can refer to each object in the array via index).

Edit src/MyCard.js
Add Props at the function MyCard(props) on line 4, then we can use passed props (line 8–11).

The result:

We can edit src/MyCard.js to use data.map for iterating each data in the array to generate MyCard component with its props (line 13–15).

The result:

React State, Hook and calling REST API

Instead of reading data from a json file, we can change to retrieving data from calling REST API (GET) : https://www.mecallapi.com/api/attractions/

Edit src/App.js

• Add data State (line 7) as an array for storing data from REST API.
• Add useEffect Hook for calling REST API and store the result in the data State when React render the App component.

The result is still the same but using REST API instead, which is the way you normally retrieve data.

Article by Karn Yongsiriwit, Ph.D. College of Digital Innovation Technology, Rangsit University