You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
:page-seo-title: Consuming a RESTful Java web service with ReactJS
19
-
:page-seo-description: A getting started tutorial with examples on how to access a RESTful Java micoservice and deserialize the returned JSON in ReactJS.
19
+
:page-seo-description: A getting started tutorial with examples on how to access a RESTful Java micoservice and deserialize the returned JSON in React Table 7 of ReactJS.
The `App.js` file returns the [hotspot=react-component file=0]`ArtistTable` component to create a reusable element that encompasses your web application.
222
+
The `App.js` file returns the [hotspot=react-component file=0]`ArtistTable` function to create a reusable element that encompasses your web application.
223
223
224
-
Next, create the `ArtistTable` component that fetches data from your back end and renders it in a table.
224
+
Next, create the `ArtistTable` function that fetches data from your back end and renders it in a table.
The [hotspot=react-library file=1]`React` library imports the `react` package for you to create the [hotspot=class file=1]`ArtistTable` component as inheritance of the `React Component` and use its values. The [hotspot=state-object file=1]`state` object is initialized to represent the state of the posts that appear on the paginated table. The `ArtistTable` component also needs to be [hotspot=export-artisttable file=1]`exported` as a reusable UI element that can be used across your application.
238
+
The [hotspot=react-library file=1]`React` library imports the `react` package for you to create the [hotspot=ArtistTable file=1]`ArtistTable` function. This function must have the `export` declaration because it is being exported to the `App.js` module. The [hotspot=posts file=1]`posts` object is initialized using a React Hook that lets you add a state to represent the state of the posts that appear on the paginated table.
239
239
240
240
To display the returned data, you will use pagination. Pagination is the process of separating content into discrete pages, and it can be used for handling data sets in React. In your application, you'll render the columns in the paginated table. The [hotspot=table-info file=1]`columns` constant is used to define the table that is present on the webpage.
241
241
242
-
The [hotspot=return-table file=1]`return` statement returns the paginated table where you defined the properties for the [hotspot=table file=1]`ReactTable`. The [hotspot=110 file=1]`data` property corresponds to the consumed data from the API endpoint and is assigned to the `data` of the table. The [hotspot=113 file=1]`columns` property corresponds to the rendered column object and is assigned to the `columns` of the table.
242
+
The [hotspot=useTable file=1]`useTable` hook creates a paginated table. The `useTable` hook takes in the [hotspot=table-info file=1]`columns`, [hotspot=posts file=1]`posts`, and `setPosts` objects as parameters. It returns a paginated table that is assigned to the [hotspot=table file=1]`table` constant. The [hotspot=table file=1]`table` constant renders the paginated table on the webpage. The [hotspot=return-table file=1]`return` statement returns the paginated table. The [hotspot=useSortBy file=1]`useSortBy` hook sorts the paginated table by the column headers. The [hotspot=usePagination file=1]`usePagination` hook creates the pagination buttons at the bottom of the table that are used to navigate through the paginated table.
@@ -249,7 +249,7 @@ The [hotspot=return-table file=1]`return` statement returns the paginated table
249
249
250
250
Your application needs a way to communicate with and retrieve resources from RESTful web services to output the resources onto the paginated table. The https://github.com/axios/axios[Axios^] library will provide you with an HTTP client. This client is used to make HTTP requests to external resources. Axios is a promise-based HTTP client that can send asynchronous requests to REST endpoints. To learn more about the Axios library and its HTTP client, see the https://www.npmjs.com/package/axios[Axios documentation^].
251
251
252
-
The [hotspot=get-posts]`getArtistsInfo()` function uses the Axios API to fetch data from your back end. This function is called when the `ArtistTable` is rendered to the page using the [hotspot=mount-posts]`componentDidMount()` React lifecycle method.
252
+
The [hotspot=get-posts]`GetArtistsInfo()` function uses the Axios API to fetch data from your back end. This function is called when the `ArtistTable` is rendered to the page using the [hotspot=useEffect]`useEffect()` React lifecycle method.
Add the [hotspot=axios-library]`axios` library and the [hotspot=get-posts]`getArtistsInfo()` function. Next, add the [hotspot=mount-posts]`componentDidMount()` method to your component.
267
+
Add the [hotspot=axios-library]`axios` library and the [hotspot=get-posts]`GetArtistsInfo()` function.
268
268
269
-
The [hotspot=axios]`axios` HTTP call is used to read the artist JSON that contains the data from the sample JSON file in the `resources` directory. When a response is successful, the state of the system changes by assigning [hotspot=response-data]`response.data` to [hotspot=data]`posts`. The [hotspot=convert-data]`convertData` function manipulates the JSON data to allow it to be accessed by the `ReactTable`. You will notice the [hotspot=spread-one hotspot=spread-two]`object spread syntax` that the `convertData` function uses, which is a relatively new sytnax made for simplicity. To learn more about it, see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals[Spread in object literals^].
270
-
271
-
The [hotspot=set-state]`this.setState` function is used to update the state of your React component with the data that was fetched from the server. This update triggers a rerender of your React component, which updates the table with the artist data. For more information on how state in React works, see the React documentation on https://reactjs.org/docs/faq-state.html[state and lifecycle^].
269
+
The [hotspot=axios]`axios` HTTP call is used to read the artist JSON that contains the data from the sample JSON file in the `resources` directory. When a response is successful, the state of the system changes by assigning [hotspot=response-data]`response.data` to [hotspot=posts]`posts`. The [hotspot=for-artists]`artists` and their `albums` JSON data are manipulated to allow them to be accessed by the `ReactTable`. The [hotspot=spread-one]`...rest` or [hotspot=spread-two]`...album` object spread syntax is designed for simplicity. To learn more about it, see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals[Spread in object literals^].
272
270
273
271
ifdef::cloud-hosted[]
274
272
Finally, run the following command to update the URL to access the ***artists.json*** in the ***ArtistTable.js*** file:
0 commit comments