Just a note: componentDidMount() happens BEFORE the render. If you console.log("life cycle name") in each life cycle and check the console you will see that componentDidMount will happen before the render. It's actually where an API call should go. componentWillMount isn't guaranteed to mount. And why would you want to call an API if the component doesn't mount? Putting it in componentDidMount means the API only gets called IF a render is about to happen.
Thanks for this video. Very useful info. I will check out your other videos as well. I like how you strike a balance between explaining things but not over-explaining them.
thank u very helpful, just what i needed, a simple clean way to get an ajax call. everyone decides to make shit so fuking complicated for no reason, but good looks on bein straight to the point. i appreciate u
I was not able to recreate this example. I believe the api now requires a key as the response to my request was: {"Response":"False","Error":"No API key provided."} I still learned a lot from this video though.
Hello, I am doing everything as indicated on the video. However, when I type the word star I can't see the movies being the returned from the database like you. Why? Please help. Send me a message if you would like for me to send a screenshot of my error. Thanks.
+Divjot Singh It's partially out of habit. We use lodash quite a bit and so I revert to using it quite often. A couple of years ago we were burned by a browser specific bug - the browser didn't support map so I started using only underscore/lodash. That's less of an issue these days. With lodash you to get the added benefit of being able to chain other methods when you need it i.e. compact, sort, etc.
I have a project where I have to use the Wiki API and I am so determined to use React for it. IT's just the CORS issue is driving me nuts! I wanna develop on my local machine and I can't find a video/article out there addressing how to do that using React. I am using the creat-react-app tool too. Can you make a video that shows how to get around that issue?
The CORS configuration is on the server side so Wiki API would be the one to add it. Alternatively, you can setup a proxy and call the API through the proxy. I'll see if we can walk through creating a proxy.
Awesome tutorial. Unfortunately they have changed their policy and now you can only access the API if you pay at least $1,00/month so you can have an API key.
That's unfortunate. The process is still the same, but we'll have to find a different service to work with for future tutorials. Thanks for letting us know!
How do you get your error messages in the console to look like that when using webpack, specifically, how do you get the errors to output the exact line number that the error occurs on? What is your webpack configuration?
thank you for sharing Justin! Unfortunately, I am having trouble identifying the direct code that enables this functionality. Is it simply a matter of including the "friendly-errors-webpack-plugin" to my config, or are the HtmlBuilderPlugin and FlowCompilerPlugin necessary as well?
Just a note: componentDidMount() happens BEFORE the render. If you console.log("life cycle name") in each life cycle and check the console you will see that componentDidMount will happen before the render. It's actually where an API call should go. componentWillMount isn't guaranteed to mount. And why would you want to call an API if the component doesn't mount? Putting it in componentDidMount means the API only gets called IF a render is about to happen.
Thanks for this video. Very useful info. I will check out your other videos as well. I like how you strike a balance between explaining things but not over-explaining them.
Man, you're awesome. Thanks for sharing your knowledge!
thank u very helpful, just what i needed, a simple clean way to get an ajax call. everyone decides to make shit so fuking complicated for no reason, but good looks on bein straight to the point.
i appreciate u
wow, i really like your explanation and the library u use, quite different from other youtubers, I learned things, Great thanks U earn my sub~
Thanks man!! Very informative especially the debugger in dev tools.
Thanks mate....which keyboard do you use ?by the way sounds good
I was not able to recreate this example. I believe the api now requires a key as the response to my request was:
{"Response":"False","Error":"No API key provided."}
I still learned a lot from this video though.
this is perfect to what I am trying to learn! Thanks so much!
pro trick: watch movies at Flixzone. Me and my gf have been using them for watching lots of of movies recently.
@Kieran Cain definitely, I've been watching on Flixzone for years myself =)
Great video. Take er easy on the keyboard ;)
Great explanation!
I've heard that it's good practice to seperate out the data fetching into a 'container' component - would you recommend this why?
thank you so much for the help!!
Hello, I am doing everything as indicated on the video. However, when I type the word star I can't see the movies being the returned from the database like you. Why? Please help. Send me a message if you would like for me to send a screenshot of my error. Thanks.
Thanks for the video!
BTW why loadash map over ES5 map ?
+Divjot Singh It's partially out of habit. We use lodash quite a bit and so I revert to using it quite often. A couple of years ago we were burned by a browser specific bug - the browser didn't support map so I started using only underscore/lodash. That's less of an issue these days. With lodash you to get the added benefit of being able to chain other methods when you need it i.e. compact, sort, etc.
How to render the total of numbers and make an pagination ?
easy on the keyboard, poor keyboard :D Thank you
I have a project where I have to use the Wiki API and I am so determined to use React for it. IT's just the CORS issue is driving me nuts! I wanna develop on my local machine and I can't find a video/article out there addressing how to do that using React. I am using the creat-react-app tool too.
Can you make a video that shows how to get around that issue?
The CORS configuration is on the server side so Wiki API would be the one to add it. Alternatively, you can setup a proxy and call the API through the proxy. I'll see if we can walk through creating a proxy.
awesome :)
great
Awesome tutorial. Unfortunately they have changed their policy and now you can only access the API if you pay at least $1,00/month so you can have an API key.
That's unfortunate. The process is still the same, but we'll have to find a different service to work with for future tutorials. Thanks for letting us know!
I was trying to authorize my react app using the var URL object but I get the error 401. any clue how to get rid of the error?
Check to make sure the url is spelled correctly. I'm pretty sure IMDB doesn't have any authentication in place that would block your request.
How do you get your error messages in the console to look like that when using webpack, specifically, how do you get the errors to output the exact line number that the error occurs on? What is your webpack configuration?
Here's a link to the code we use to generate our webpack config github.com/atomicjolt/atomic-reactor/blob/master/webpack.config.js
thank you for sharing Justin! Unfortunately, I am having trouble identifying the direct code that enables this functionality. Is it simply a matter of including the "friendly-errors-webpack-plugin" to my config, or are the HtmlBuilderPlugin and FlowCompilerPlugin necessary as well?
You are correct. Just add the friendly-errors-webpack-plugin.
What do if the cors is not enabled? And how one can enable while creating his or her own API?
It's a question to backend, not React app.
In general there are already many libraries to allow CORS. What language do you user on server?
following this video, i got this on my console
Each child in an array or iterator should have a unique key prop.
how i can add the key on that?
Just like Mah Lu showed, just make sure the key is always unique
which your sublime theme?
It's the solarized theme
thanks mate
Great tutorial, but you missed one vital piece of code :
"Star Trek as better than Star Wars".
I'm new to React. Why didn't you just say this.state.movies.map ((movie)=>.....?
You can do that. We use lodash all the time so I just used it out of habit.
Great explanation, but your voice is not consistent please work on that