Working with External Data in React | kirupa.com

programming
1

by kirupa | 2 December 2016

Dealing with external data is pretty much standard in web apps today. This "dealing" typically looks as follows:

This is a companion discussion topic for the original entry at http://www.kirupa.com/react/working_with_external_data.htm
2

Dear Kirupa & co, thanks for another great lesson! :grinning:

1 Like
3

Glad you liked it :slight_smile:

4

Really great stuff here Kirupa. In 2 days I’ve gone from a total React NOOB to ready to tackle all the other tricky tutorials on the web and build out my first React app. Huge thank you!!! :pray:

1 Like
5

Thanks Kirupa this has been really helpful I was wondering if I wanted to add a header to this how would I do it?

6

You can just create a Header component, create the HTML/CSS that will define how the header looks (inside your render method usually), and just instantiate the component where you are constructing your entire page.

7

Loving the lessons! I’ve pre-ordered the next version of your book. I would personally name the callback processResponse rather than processRequest as I think it is clearer, but I’m being picky and others may not agree.

8

A bigger issue I have now hit. It seems to use a global xhr variable. My javascript is very rusty, but if I want to make it non global, is simply adding this. before all of them the way to go?

I could added it to the state, but presumably that would be silly as it would never be passed down.

9

Using this would work! Have you tried it? You should place it in the constructor.

10

Thanks, yes it did work. I think I put it in the componentdidmount method. Now reading various things about which is the better place to initialise things.

11

What about using ES6 promises? :slight_smile:

12

It will totally work! If you used the fetch API, you are basically using a version of that :slight_smile:

1 Like
13

Would love to see this rewritten using fetch() and hooks

1 Like