React is a declarative, efficient, and flexible JavaScript library for building user interfaces. The full documentation is available at https://reactjs.org/. In this tutorial I will show you how to fetch data from REST service using React JS framework. The article, ReactJS REST API GET Example, will use sample ready made available REST API https://jsonplaceholder.typicode.com/posts for testing https://jsonplaceholder.typicode.com/posts. You can also create and deploy your own service using PHP, Codeigniter or Spring, Jersey etc. and call using React JS framework. Here you will see only GET example (other HTTP verbs POST, PUT, DELETE, HEAD, OPTIONS etc.).
You may also like to read https://www.roytuts.com/tic-tac-toe-game-using-react-js/  ReactJS REST API POST Example ReactJS REST API PUT Example ReactJS REST API DELETE Example

Prerequisites

Knowledge of HTML and JavaScript

Creating React application

Please read the tutorial Create React JS Application before moving forward.

Example

Now we will see step by step how to implement the example using React JS or React framework.
Now delete everything from the directory <drive/folder>/react-rest/src but do not delete src directory.

Create RestController.js file under src directory with below content. Notice that you need to import the required module or component such as import React from ‘react’. Here I have initialized table column headers in the constructor of the RestController class. I have also declared users array to fill later with REST response data from https://jsonplaceholder.typicode.com/posts. Learn about componentDidMount() here at https://reactjs.org/docs/react-component.html.

import React from 'react';

class RestController extends React.Component {

	constructor(props) {
		super(props);
		this.state = {users: []};
		this.headers = [
			{ key: 'userId', label: 'User ID' },
			{ key: 'id', label: 'ID' },
			{ key: 'title', label: 'Title' },
			{ key: 'body', label: 'Body' }
		];
	}
	
	componentDidMount() {
		fetch('https://jsonplaceholder.typicode.com/posts')
			.then(response => {
				return response.json();
			}).then(result => {
				this.setState({
					users:result
				});
			});
	}
	render() {                            
		return (
			<table>
				<thead>
					<tr>
					{
						this.headers.map(function(h) {
							return (
								<th key = {h.key}>{h.label}</th>
							)
						})
					}
					</tr>
				</thead>
				<tbody>
					{
						this.state.users.map(function(item, key) {             
						return (
								<tr key = {key}>
								  <td>{item.userId}</td>
								  <td>{item.id}</td>
								  <td>{item.title}</td>
								  <td>{item.body}</td>
								</tr>
							)
						})
					}
				</tbody>
			</table>
		)
	}
}

export default RestController;

Export the RestController at the end of the RestController class so that we can use this class in other modules such as we have used it in below index.js file.

Finally create index.js file under src directory to start up the application.
Here we have called <RestController /> component and writing the output of the Game to the div id marked as “root”.

Open the file <drive/folder>/react-rest/src/public/index.html, you will find a div with “root” id. Update the title in this file as “React – REST API GET Example”.

import React from 'react';
import ReactDOM from 'react-dom';
import RestController from './RestController'

ReactDOM.render(
	<RestController />, 
	document.getElementById('root')
);

Now execute the command npm start from command prompt and you will see the response data from https://jsonplaceholder.typicode.com/posts in browser at http://localhost:3000

Final results

react rest get example

Thanks for reading.

Tags:

I am a professional Web developer, Enterprise Application developer, Software Engineer and Blogger. Connect me on JEE Tutorials Twitter Facebook  Google Plus Linkedin Or Email Me

Leave a Reply

Your email address will not be published. Required fields are marked *