Sign in Go Pro

Build a React Native Application

Consuming a Node.js HTTP API in React Native

This lesson is for PRO members.

Upgrade today to get access to all the PRO lessons.

Unlock this lesson
Autoplay

Up next

Previous

About

Most mobile apps will require some type of network calls. We use fetch to make an HTTP call to a simple REST API server.

The server can get and update tasks, and uses JSON to communicate data back and forth with React Native.

Server Code

ToDo API server here

Summary of Content:

  • Download and run the simple HTTP server
  • Use fetch to call the server and get a list of todo items
  • Modify the existing components to account for the new data structure
  • Mark tasks as completed with a PUT request
  • Make new tasks with a POST request

Instructor

Links

Comments

When using the Android emulator, as you mentioned, you replace localhost, I think you replace it with: 10.0.2.2 (I found this on StackOverflow, and also noticed, this is IP the reloader is reporting when I reinstall the app). Hope this helps some Android folks.

Hello Chris.

Unfortunately my app is in infinite loop. See:
http://bit.ly/2NYad0d

I copied all your source code, and run the server as explained in the video. Yet, the app is in infinite loop.

Any tips here?

Oh, nope! I know what it is - you have localhost in there, but the android emulator doesn't work with "localhost" (it has it's own localhost) - so use the actual local ip address of your computer there instead.

I am running in a physical device, my Nexus 5X.

Hm - can you, in the component did mount, print the response to the server call? My guess is something is going wrong there (so, line 27 in the screenshot you sent)

Now I solved, replacing "localhost" per the IP of my machine.

I got my IP using the command " ifconfig | grep inet" on Mac OS X.

Then, I created a constant to store this IP, following the instructions from this post:
https://medium.com/@austinpaley32/how-to-add-a-constants-file-to-your-react-project-6ce31c015774

>
You need to go PRO to post comments.

Lessons in Build a React Native Application

1. Installing React Native and Creating Your First React Native App
02:17
Chris Achard
2. Editing the React Native Component to Display Data on the UI
03:20
Chris Achard
3. Extracting and Writing React Native Components
03:23
Chris Achard
4. Debugging Errors in React Native
03:41
Chris Achard
5. Reuse Components with Props in React Native
01:57
Chris Achard
6. Make React Native Components Dynamic with State
03:11
Chris Achard
7. Dynamically Rendering Components in React Native
Pro
01:28
Chris Achard
8. Rendering Lists in React Native with ScrollView and FlatList
Pro
02:06
Chris Achard
9. Styling React Native Components
Pro
04:18
Chris Achard
10. Layout Components in React Native with Flexbox
Pro
03:28
Chris Achard
11. Installing and Using Third Party React Native Libraries
Pro
03:31
Chris Achard
12. React Native Routing and Navigation with the React Navigation Library
Pro
03:48
Chris Achard
13. Reacting to Input Events with React Native Controlled Components
Pro
02:23
Chris Achard
14. Setting State in React Native with setState
Pro
03:03
Chris Achard
15. Exploring Lifecycle Methods in React Native
Pro
02:18
Chris Achard
16. Consuming a Node.js HTTP API in React Native
Pro
05:16
Chris Achard
17. Displaying Images and Icons in React Native
Pro
04:26
Chris Achard
18. Deleting a ToDo Item from a React Native List
Pro
01:31
Chris Achard
19. Refactoring Network Code into a React Native Shared Library
Pro
01:38
Chris Achard
20. Platform Specific React Native Code and Styles
Pro
03:13
Chris Achard
21. Filtering Data with a React Native Segment Component
Pro
02:01
Chris Achard
22. Deploying a React Native Application to a iOS or Android Device
Pro
02:17
Chris Achard
23. Building a React Native Android APK for Google Play
Pro
02:12
Chris Achard
24. Building a React Native iOS IPA file for the App Store
Pro
01:29
Chris Achard