React Hooks Example

Aaron White
3 min readJul 23, 2019

Do you want to get started with React — using hooks — and want a super-simple example that displays content from JSON (JavaScript Object Notation) asynchronously? Below are three files which achieve this. In this example, we’re displaying a single component which loops over an array of book titles.

Source code available at https://github.com/aaronwht/react-simple

Requirements: You’ll need the latest version of Node.js which you may download at https://www.nodejs.org

Once downloaded, using Terminal on a Mac or Command Prompt on Windows, navigate to the folder where you want to create your React app and enter the below command:

Open Command Prompt
npx create-react-app react-simple

Notice— The command uses the text ‘npx’ not ‘npm’.

It will take several seconds to stub out a basic React app for you. I’ve created this project in my Apps folder located at C:\Appson a Windows computer, which I do similarly on Mac. The execution of the above script produces the below files.

Using Terminal on Mac or Command Prompt on Windows navigate to the react-simple folder using the below command:

cd react-simple

Run the following command in Terminal on Mac or Command Prompt on Windows to install the required dependencies (you must be in the react-simple folder for this to work:

npm i --save axios react-router-dom

Below are the three files you’ll need along with their contents.

- src/index.js
- src/App.js
- public/books.json (we’ll create this file)

The first file index.js routes requests to the component named App.js. These files are as simple as possible to display content from a JSON resource, typically an API endpoint, and are only intended to get you started —essentially to get ‘something’ working.

Copy and paste the below code into the existing src/index.js file.

// src/index.js - router
import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter, Route, Switch } from 'react-router-dom'
import App from './App'
ReactDOM.render(
<BrowserRouter>
<Switch>
<Route path="/" exact component={App} />
</Switch>
</BrowserRouter>,
document.getElementById('root')
)

Copy and paste the below code into your existingsrc/App.js file.

// App.js - displays API content
import React, { useState, useEffect } from 'react'
import axios from 'axios'
export default () => {
const [books, setBooks] = useState([])

useEffect(() => {
(async () => {
const { data: { books } } = await axios.get('/books.json')
setBooks(books)
})()
}, [])

return (
<>
{books && books.map(book => {
return (
<div key={book._id}>
{book.title}
</div>
)
})}
</>
)
}

Lastly, navigate into the public folder and create a file named ‘books.json’:

Paste the below code into your newly created public/books.json file:

// public/books.json
{
"books": [{
"_id": "1",
"title": "The Pragmatic Programmer"
},
{
"_id": "2",
"title": "Clean Code"
}
]
}

Using Terminal on a Mac or Command Prompt on Windows run the below command:

npm start

Your browser should launch with the two books listed in your public/books.json file as pictured below:

Congratulations — you have successfully used React hooks to display JSON content.

--

--

Aaron White

AWS Certified Architect Pro | Developer | DevOps