In this post, I will explain how to create a react application and how to fetch the URL in React.js application. We are going to create a single page app using React.js for this we will use Create-React-App project to set everything set up.
How to fetch the URL in React.js application with example by Anil Kumar Panigrahi
Create a New React App:
Earlier I have explained how to create Node.js and how to deploy. Now for React.js We need to run the below command to create an app
1 | npm create-react-app anillabs-fetch-demo |
This will take a few mins and will create a working directory in the specific folder.
1 | cd anillabs-fetch-demo |
1 | npm start |
then a basic screen will appear. Under: 3000 port.
Access the sample application in the browser
http://localhost:3000
App Folder structure:
node_modules
public
src
package.json
package-lock.json
README.md
If we want to edit the application then open src/App.js file.
With the above step successfully created React app. Now we will check for fetch the URL and display those data into the page.
Create a new file: AppConst.js
this file is for all constant variables in one place
1 2 3 4 5 | const AppConstants = { API: 'https://randomuser.me/api/?results=30', TITLE: 'Anil Labs - React fetch Application', } export default AppConstants |
randomuser.me is used for some random profile data generated URL.
In the App.js file, insert the below line
1 | import AppConst from './AppConst'; |
Under constructor add below code to declare the variables
1 2 3 4 5 6 7 | constructor(props) { super(props); this.state = { pictures: [], isLoading: false }; } |
If we want to fetch function then we need to install fetch node_modules
1 | npm install node-fetch --save |
after install module then edit App.js
1 2 3 4 5 6 7 8 | componentDidMount() { document.title = AppConst.TITLE; this.setState({ isLoading: true }); fetch(AppConst.API) .then(response => response.json()) .then(data => this.setState({ pictures: data.results, isLoading: false })); } |
display those images in the below code in render
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | render() { const { pictures, isLoading } = this.state; if (isLoading) { return ( Loading ... ); } return ( <div><header><img src="{logo}" alt="logo" /></header></div> Anil Labs - React fetch Application. <div> Fetch data from {AppConst.API} <ul> <li style="list-style-type: none;"> <ul>{pictures.map(pic => <li><img src="{pic.picture.medium}" alt="profile pic" /></li> </ul> </li> </ul> )} </div> ); } |
After done with these changes we will get the all images with fetch.
Below is complete code for App.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; import AppConst from './AppConst'; class App extends Component { constructor(props) { super(props); this.state = { pictures: [], isLoading: false }; } componentDidMount() { document.title = AppConst.TITLE; this.setState({ isLoading: true }); fetch(AppConst.API) .then(response => response.json()) .then(data => this.setState({ pictures: data.results, isLoading: false })); } render() { const { pictures, isLoading } = this.state; if (isLoading) { return ( Loading ... ); } return ( <div><header><img src="{logo}" alt="logo" />Anil Labs - React fetch Application. </header> <div> Fetch data from {AppConst.API} <ul> <li style="list-style-type: none;"> <ul>{pictures.map(pic => <li><img src="{pic.picture.medium}" alt="profile pic" /></li> </ul> </li> </ul> )} </div> </div> ); } } export default App; |
We can modify the CSS in App.css file, In this example, I have updated few styles. We can check it below.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | li{ float:left; list-style-type: none; padding:10px; border-right:1px solid #3687AF; background-color: #015287; background-repeat: no-repeat; background-position: center 30px; } .mainBlock{ margin: auto; width: 75%; padding: 10px; } |
After done with all these changes then run below command (which was mentioned earlier in this post)
1 | npm start |
0 Comments