{"id":4104,"date":"2023-11-04T23:14:03","date_gmt":"2023-11-04T23:14:03","guid":{"rendered":"http:\/\/localhost:10003\/how-to-create-a-weather-app-with-react-native\/"},"modified":"2023-11-05T05:48:01","modified_gmt":"2023-11-05T05:48:01","slug":"how-to-create-a-weather-app-with-react-native","status":"publish","type":"post","link":"http:\/\/localhost:10003\/how-to-create-a-weather-app-with-react-native\/","title":{"rendered":"How to Create a Weather App with React Native"},"content":{"rendered":"<p>React Native is a popular framework for building cross-platform mobile applications using JavaScript and React. In this tutorial, you will learn how to create a weather app with React Native that can display the current weather conditions in your location.<\/p>\n<h2>Prerequisites<\/h2>\n<p>Before we begin, make sure you have the following software installed on your machine:<\/p>\n<ul>\n<li>Node.js<\/li>\n<li>npm or Yarn<\/li>\n<li>React Native CLI<\/li>\n<\/ul>\n<p>You also need to have a basic understanding of JavaScript and React.<\/p>\n<h2>Step 1: Set Up a New React Native Project<\/h2>\n<p>To get started, open your terminal and run the following command to create a new React Native project:<\/p>\n<pre><code>npx react-native init WeatherApp\n<\/code><\/pre>\n<p>This will create a new directory called <code>WeatherApp<\/code> with all the necessary files and dependencies.<\/p>\n<h2>Step 2: Set Up an OpenWeatherMap Account<\/h2>\n<p>To fetch weather data for our app, we will be using the OpenWeatherMap API. To get started, go to the <a href=\"https:\/\/openweathermap.org\/\">OpenWeatherMap website<\/a> and sign up for a free account.<\/p>\n<p>Once you have an account, navigate to your account dashboard and obtain an API key. This key will allow you to make requests to the OpenWeatherMap API.<\/p>\n<h2>Step 3: Install Dependencies<\/h2>\n<p>Next, navigate to the project directory by running:<\/p>\n<pre><code>cd WeatherApp\n<\/code><\/pre>\n<p>Now, install the required dependencies by running the following command:<\/p>\n<pre><code>npm install axios react-native-geolocation-service\n<\/code><\/pre>\n<p>The <code>axios<\/code> library will be used to make HTTP requests to the OpenWeatherMap API, and <code>react-native-geolocation-service<\/code> library will help us retrieve the user&#8217;s location.<\/p>\n<h2>Step 4: Set Up Permissions<\/h2>\n<p>In order to retrieve the user&#8217;s location, we need to request the necessary permissions. Open the <code>android\/app\/src\/main\/AndroidManifest.xml<\/code> file and add the following lines before the closing <code>&lt;\/manifest&gt;<\/code> tag:<\/p>\n<pre><code class=\"language-xml\">&lt;uses-permission android_name=\"android.permission.ACCESS_FINE_LOCATION\" \/&gt;\n&lt;uses-permission android_name=\"android.permission.ACCESS_COARSE_LOCATION\" \/&gt;\n<\/code><\/pre>\n<p>Next, open the <code>ios\/WeatherApp\/Info.plist<\/code> file and add the following lines before the closing <code>&lt;\/dict&gt;<\/code> tag:<\/p>\n<pre><code class=\"language-xml\">&lt;key&gt;NSLocationWhenInUseUsageDescription&lt;\/key&gt;\n&lt;string&gt;Allow access to your location to show weather information.&lt;\/string&gt;\n&lt;key&gt;NSLocationAlwaysAndWhenInUseUsageDescription&lt;\/key&gt;\n&lt;string&gt;Allow access to your location to show weather information.&lt;\/string&gt;\n<\/code><\/pre>\n<p>With these permissions in place, the app will be able to request the user&#8217;s location.<\/p>\n<h2>Step 5: Create a Weather API Wrapper<\/h2>\n<p>In the project directory, create a new file called <code>api.js<\/code> inside a directory called <code>src<\/code>. This file will contain a wrapper function to make API requests to OpenWeatherMap.<\/p>\n<p>Open the <code>src\/api.js<\/code> file and add the following code:<\/p>\n<pre><code class=\"language-javascript\">import axios from 'axios';\n\nconst API_KEY = 'YOUR_API_KEY';\nconst API_URL = 'https:\/\/api.openweathermap.org\/data\/2.5\/weather';\n\nexport const fetchWeather = async (latitude, longitude) =&gt; {\n  try {\n    const url = `${API_URL}?lat=${latitude}&amp;lon=${longitude}&amp;appid=${API_KEY}`;\n    const response = await axios.get(url);\n    return response.data;\n  } catch (error) {\n    throw new Error('Could not fetch weather data');\n  }\n};\n<\/code><\/pre>\n<p>Replace <code>'YOUR_API_KEY'<\/code> with the API key you obtained from OpenWeatherMap.<\/p>\n<p>This code sets up the base URL for the OpenWeatherMap API and provides a <code>fetchWeather<\/code> function that takes latitude and longitude as parameters. It makes an HTTP GET request to the API and returns the response data.<\/p>\n<h2>Step 6: Retrieve the User&#8217;s Location<\/h2>\n<p>In the <code>src<\/code> directory, create a new file called <code>Location.js<\/code>. This file will contain a function to retrieve the user&#8217;s location.<\/p>\n<p>Open the <code>src\/Location.js<\/code> file and add the following code:<\/p>\n<pre><code class=\"language-javascript\">import Geolocation from 'react-native-geolocation-service';\n\nexport const getUserLocation = () =&gt; {\n  return new Promise((resolve, reject) =&gt; {\n    Geolocation.getCurrentPosition(\n      position =&gt; {\n        const { latitude, longitude } = position.coords;\n        resolve({ latitude, longitude });\n      },\n      error =&gt; {\n        reject(error);\n      },\n      { enableHighAccuracy: true, timeout: 15000, maximumAge: 10000 }\n    );\n  });\n};\n<\/code><\/pre>\n<p>This code uses the <code>getCurrentPosition<\/code> function from the <code>react-native-geolocation-service<\/code> library to retrieve the user&#8217;s current position. It returns a promise that resolves with the latitude and longitude.<\/p>\n<h2>Step 7: Create the Weather Component<\/h2>\n<p>In the <code>src<\/code> directory, create a new file called <code>Weather.js<\/code>. This file will contain the main component that displays the weather information.<\/p>\n<p>Open the <code>src\/Weather.js<\/code> file and add the following code:<\/p>\n<pre><code class=\"language-javascript\">import React, { useState, useEffect } from 'react';\nimport { View, Text } from 'react-native';\nimport { getUserLocation } from '.\/Location';\nimport { fetchWeather } from '.\/api';\n\nconst Weather = () =&gt; {\n  const [weatherData, setWeatherData] = useState(null);\n  const [loading, setLoading] = useState(true);\n\n  useEffect(() =&gt; {\n    const fetchWeatherData = async () =&gt; {\n      try {\n        const { latitude, longitude } = await getUserLocation();\n        const data = await fetchWeather(latitude, longitude);\n        setWeatherData(data);\n        setLoading(false);\n      } catch (error) {\n        console.error(error);\n      }\n    };\n\n    fetchWeatherData();\n  }, []);\n\n  if (loading) {\n    return (\n      &lt;View&gt;\n        &lt;Text&gt;Loading...&lt;\/Text&gt;\n      &lt;\/View&gt;\n    );\n  }\n\n  if (!weatherData) {\n    return (\n      &lt;View&gt;\n        &lt;Text&gt;Could not fetch weather data&lt;\/Text&gt;\n      &lt;\/View&gt;\n    );\n  }\n\n  const { main, description } = weatherData.weather[0];\n\n  return (\n    &lt;View&gt;\n      &lt;Text&gt;Main: {main}&lt;\/Text&gt;\n      &lt;Text&gt;Description: {description}&lt;\/Text&gt;\n    &lt;\/View&gt;\n  );\n};\n\nexport default Weather;\n<\/code><\/pre>\n<p>This code sets up a functional component called <code>Weather<\/code> that initializes the state variables <code>weatherData<\/code> and <code>loading<\/code> using the <code>useState<\/code> hook.<\/p>\n<p>In the <code>useEffect<\/code> hook, we fetch the user&#8217;s location and then use that information to fetch the weather data using the <code>fetchWeather<\/code> function from <code>api.js<\/code>. We update the state variables accordingly.<\/p>\n<p>The component then renders different views based on the <code>loading<\/code> and <code>weatherData<\/code> variables. While the data is being fetched, it shows a loading message. If the data couldn&#8217;t be fetched, it shows an error message. Otherwise, it displays the main weather condition and description.<\/p>\n<h2>Step 8: Render the Weather Component<\/h2>\n<p>Open the <code>App.js<\/code> file in the project directory and replace the existing code with the following:<\/p>\n<pre><code class=\"language-javascript\">import React from 'react';\nimport { View, StyleSheet } from 'react-native';\nimport Weather from '.\/src\/Weather';\n\nconst App = () =&gt; {\n  return (\n    &lt;View style={styles.container}&gt;\n      &lt;Weather \/&gt;\n    &lt;\/View&gt;\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n  },\n});\n\nexport default App;\n<\/code><\/pre>\n<p>This code sets up the main app component (<code>App<\/code>) and renders the <code>Weather<\/code> component inside a <code>View<\/code> component.<\/p>\n<p>We also define a simple style using the <code>StyleSheet.create<\/code> function to center the content within the <code>View<\/code>.<\/p>\n<h2>Step 9: Run the App<\/h2>\n<p>To run the app on your Android or iOS device, make sure you have the emulator or device connected to your computer.<\/p>\n<p>In the project directory, run the following command:<\/p>\n<pre><code>npx react-native run-android\n<\/code><\/pre>\n<p>or<\/p>\n<pre><code>npx react-native run-ios\n<\/code><\/pre>\n<p>This will compile the app and install it on your device. You should now see the weather information displayed on the screen.<\/p>\n<p>Congratulations! You have successfully created a weather app with React Native.<\/p>\n<h2>Conclusion<\/h2>\n<p>In this tutorial, you learned how to create a weather app with React Native. You set up a new React Native project, obtained an API key from OpenWeatherMap, retrieved the user&#8217;s location, made API requests to fetch weather data, and displayed the information in a component. You also learned how to handle loading and error states.<\/p>\n<p>Feel free to enhance the app by adding more features such as displaying more weather information, implementing location search, or customizing the UI. Happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>React Native is a popular framework for building cross-platform mobile applications using JavaScript and React. In this tutorial, you will learn how to create a weather app with React Native that can display the current weather conditions in your location. Prerequisites Before we begin, make sure you have the following <a href=\"http:\/\/localhost:10003\/how-to-create-a-weather-app-with-react-native\/\" class=\"btn btn-link continue-link\">Continue Reading<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[1307,1305,1309,1306,605,1310,1308,257],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.5 (Yoast SEO v21.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Create a Weather App with React Native - Pantherax Blogs<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/localhost:10003\/how-to-create-a-weather-app-with-react-native\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create a Weather App with React Native\" \/>\n<meta property=\"og:description\" content=\"React Native is a popular framework for building cross-platform mobile applications using JavaScript and React. In this tutorial, you will learn how to create a weather app with React Native that can display the current weather conditions in your location. Prerequisites Before we begin, make sure you have the following Continue Reading\" \/>\n<meta property=\"og:url\" content=\"http:\/\/localhost:10003\/how-to-create-a-weather-app-with-react-native\/\" \/>\n<meta property=\"og:site_name\" content=\"Pantherax Blogs\" \/>\n<meta property=\"article:published_time\" content=\"2023-11-04T23:14:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-05T05:48:01+00:00\" \/>\n<meta name=\"author\" content=\"Panther\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Panther\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\n\t    \"@context\": \"https:\/\/schema.org\",\n\t    \"@graph\": [\n\t        {\n\t            \"@type\": \"Article\",\n\t            \"@id\": \"http:\/\/localhost:10003\/how-to-create-a-weather-app-with-react-native\/#article\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/how-to-create-a-weather-app-with-react-native\/\"\n\t            },\n\t            \"author\": {\n\t                \"name\": \"Panther\",\n\t                \"@id\": \"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7\"\n\t            },\n\t            \"headline\": \"How to Create a Weather App with React Native\",\n\t            \"datePublished\": \"2023-11-04T23:14:03+00:00\",\n\t            \"dateModified\": \"2023-11-05T05:48:01+00:00\",\n\t            \"mainEntityOfPage\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/how-to-create-a-weather-app-with-react-native\/\"\n\t            },\n\t            \"wordCount\": 758,\n\t            \"publisher\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/#organization\"\n\t            },\n\t            \"keywords\": [\n\t                \"\\\"build weather app\\\"\",\n\t                \"\\\"create weather app\\\"\",\n\t                \"\\\"React Native tutorial\\\"\",\n\t                \"\\\"React Native weather app\\\"\",\n\t                \"\\\"React Native\\\"\",\n\t                \"\\\"weather app development\\\"]\",\n\t                \"\\\"weather application\\\"\",\n\t                \"[\\\"Weather App\\\"\"\n\t            ],\n\t            \"inLanguage\": \"en-US\"\n\t        },\n\t        {\n\t            \"@type\": \"WebPage\",\n\t            \"@id\": \"http:\/\/localhost:10003\/how-to-create-a-weather-app-with-react-native\/\",\n\t            \"url\": \"http:\/\/localhost:10003\/how-to-create-a-weather-app-with-react-native\/\",\n\t            \"name\": \"How to Create a Weather App with React Native - Pantherax Blogs\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/#website\"\n\t            },\n\t            \"datePublished\": \"2023-11-04T23:14:03+00:00\",\n\t            \"dateModified\": \"2023-11-05T05:48:01+00:00\",\n\t            \"breadcrumb\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/how-to-create-a-weather-app-with-react-native\/#breadcrumb\"\n\t            },\n\t            \"inLanguage\": \"en-US\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"ReadAction\",\n\t                    \"target\": [\n\t                        \"http:\/\/localhost:10003\/how-to-create-a-weather-app-with-react-native\/\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"BreadcrumbList\",\n\t            \"@id\": \"http:\/\/localhost:10003\/how-to-create-a-weather-app-with-react-native\/#breadcrumb\",\n\t            \"itemListElement\": [\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 1,\n\t                    \"name\": \"Home\",\n\t                    \"item\": \"http:\/\/localhost:10003\/\"\n\t                },\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 2,\n\t                    \"name\": \"How to Create a Weather App with React Native\"\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebSite\",\n\t            \"@id\": \"http:\/\/localhost:10003\/#website\",\n\t            \"url\": \"http:\/\/localhost:10003\/\",\n\t            \"name\": \"Pantherax Blogs\",\n\t            \"description\": \"\",\n\t            \"publisher\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/#organization\"\n\t            },\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"SearchAction\",\n\t                    \"target\": {\n\t                        \"@type\": \"EntryPoint\",\n\t                        \"urlTemplate\": \"http:\/\/localhost:10003\/?s={search_term_string}\"\n\t                    },\n\t                    \"query-input\": \"required name=search_term_string\"\n\t                }\n\t            ],\n\t            \"inLanguage\": \"en-US\"\n\t        },\n\t        {\n\t            \"@type\": \"Organization\",\n\t            \"@id\": \"http:\/\/localhost:10003\/#organization\",\n\t            \"name\": \"Pantherax Blogs\",\n\t            \"url\": \"http:\/\/localhost:10003\/\",\n\t            \"logo\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"http:\/\/localhost:10003\/#\/schema\/logo\/image\/\",\n\t                \"url\": \"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg\",\n\t                \"contentUrl\": \"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg\",\n\t                \"width\": 1024,\n\t                \"height\": 1024,\n\t                \"caption\": \"Pantherax Blogs\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/#\/schema\/logo\/image\/\"\n\t            }\n\t        },\n\t        {\n\t            \"@type\": \"Person\",\n\t            \"@id\": \"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7\",\n\t            \"name\": \"Panther\",\n\t            \"image\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"http:\/\/localhost:10003\/#\/schema\/person\/image\/\",\n\t                \"url\": \"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g\",\n\t                \"contentUrl\": \"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g\",\n\t                \"caption\": \"Panther\"\n\t            },\n\t            \"sameAs\": [\n\t                \"http:\/\/localhost:10003\"\n\t            ],\n\t            \"url\": \"http:\/\/localhost:10003\/author\/pepethefrog\/\"\n\t        }\n\t    ]\n\t}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Create a Weather App with React Native - Pantherax Blogs","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"http:\/\/localhost:10003\/how-to-create-a-weather-app-with-react-native\/","og_locale":"en_US","og_type":"article","og_title":"How to Create a Weather App with React Native","og_description":"React Native is a popular framework for building cross-platform mobile applications using JavaScript and React. In this tutorial, you will learn how to create a weather app with React Native that can display the current weather conditions in your location. Prerequisites Before we begin, make sure you have the following Continue Reading","og_url":"http:\/\/localhost:10003\/how-to-create-a-weather-app-with-react-native\/","og_site_name":"Pantherax Blogs","article_published_time":"2023-11-04T23:14:03+00:00","article_modified_time":"2023-11-05T05:48:01+00:00","author":"Panther","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Panther","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"http:\/\/localhost:10003\/how-to-create-a-weather-app-with-react-native\/#article","isPartOf":{"@id":"http:\/\/localhost:10003\/how-to-create-a-weather-app-with-react-native\/"},"author":{"name":"Panther","@id":"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7"},"headline":"How to Create a Weather App with React Native","datePublished":"2023-11-04T23:14:03+00:00","dateModified":"2023-11-05T05:48:01+00:00","mainEntityOfPage":{"@id":"http:\/\/localhost:10003\/how-to-create-a-weather-app-with-react-native\/"},"wordCount":758,"publisher":{"@id":"http:\/\/localhost:10003\/#organization"},"keywords":["\"build weather app\"","\"create weather app\"","\"React Native tutorial\"","\"React Native weather app\"","\"React Native\"","\"weather app development\"]","\"weather application\"","[\"Weather App\""],"inLanguage":"en-US"},{"@type":"WebPage","@id":"http:\/\/localhost:10003\/how-to-create-a-weather-app-with-react-native\/","url":"http:\/\/localhost:10003\/how-to-create-a-weather-app-with-react-native\/","name":"How to Create a Weather App with React Native - Pantherax Blogs","isPartOf":{"@id":"http:\/\/localhost:10003\/#website"},"datePublished":"2023-11-04T23:14:03+00:00","dateModified":"2023-11-05T05:48:01+00:00","breadcrumb":{"@id":"http:\/\/localhost:10003\/how-to-create-a-weather-app-with-react-native\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/localhost:10003\/how-to-create-a-weather-app-with-react-native\/"]}]},{"@type":"BreadcrumbList","@id":"http:\/\/localhost:10003\/how-to-create-a-weather-app-with-react-native\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/localhost:10003\/"},{"@type":"ListItem","position":2,"name":"How to Create a Weather App with React Native"}]},{"@type":"WebSite","@id":"http:\/\/localhost:10003\/#website","url":"http:\/\/localhost:10003\/","name":"Pantherax Blogs","description":"","publisher":{"@id":"http:\/\/localhost:10003\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/localhost:10003\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"http:\/\/localhost:10003\/#organization","name":"Pantherax Blogs","url":"http:\/\/localhost:10003\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/localhost:10003\/#\/schema\/logo\/image\/","url":"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg","contentUrl":"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg","width":1024,"height":1024,"caption":"Pantherax Blogs"},"image":{"@id":"http:\/\/localhost:10003\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7","name":"Panther","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/localhost:10003\/#\/schema\/person\/image\/","url":"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g","contentUrl":"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g","caption":"Panther"},"sameAs":["http:\/\/localhost:10003"],"url":"http:\/\/localhost:10003\/author\/pepethefrog\/"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts\/4104"}],"collection":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/comments?post=4104"}],"version-history":[{"count":1,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts\/4104\/revisions"}],"predecessor-version":[{"id":4460,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts\/4104\/revisions\/4460"}],"wp:attachment":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/media?parent=4104"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/categories?post=4104"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/tags?post=4104"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}