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.
Create an initial React project:
npx create-react-app react-basic
Start React app:
Access http://localhost:3000 on a web browser to see the result:
Let’s create a navigation bar component, namely MyBar.
Style your MyBar Component with CSS based on the example of css here: https://www.w3schools.com/css/css_navbar.asp
Edit src/App.js to include MyBar Component in your app.
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
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.
Firstly, download attractions.json from:
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).
Add Props at the function MyCard(props) on line 4, then we can use passed props (line 8–11).
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).
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/
- 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