Hai, your tutorials are really Cool. Especially your voice and narration... Please make a simple crud application tutorial using React.js and Firebase.
Great video! Hope to see more React mini projects! In case someone is still watching, when defining a method(function) inside components, it is better to use arrow functions, because it saves you from having to bind(this): instead of: showHTML(x){ this.setState({ ........... }) } use: showHTML = (x)=>{ this.setState({ ............ }) } so there is no need for: this.showHTML.bind(this) arrow notation does the job for you automatically!
I had to change the path in two places in the index.html inside the Build folder - the main CSS and the JS, but your strategy worked. Thank you for uploading this.
In case someone wants to try this now, seems that hipsterjesus no longer works like in the vid, it returns a simple block of text without html, just saying so you wont have to spend 20 mins trying to get why it doesnt return p tags... well... enjoy the Tut and nice job Brad, everything else is working great, except for some CORS issues, but just installed a Chrome extension :)
The CORS-bug is an annoyance to anyone working with API's. I used a Heroku-app to bypass it. Replace your axios.get url with this: cors-anywhere.herokuapp.com/hipsterjesus.com/api. It will send traffic through the Heroku-app instead. If it's down, just test it again a few minutes later.
First, lemme say thank you. This is the best channel I've ever learned from and i've RUclips'd A LOT. I've bought both eduonix courses on react and react-native and they've been super helpful. I would like to request you do an "informative" episode on the 'business' aspect. For example, what is fare to charge in modern market. What sort of features/architectures demand $X or, perhaps, just your own personal montra on the money side of things. Anyways, that's my 2cents. Keep the good stuff coming! You rock!
ive got the same error for this tutorial, it's always kind of strange to me, some sites work with axios some others dont, when you get this error you can do the request with JSONP and it will work but its stupid :/ i dont understand why it worked for everyone else but not for us..
I tried to use this as a workaround, it should work in theory. It works, I get the response but there's still some error, I get a "missing semicolon" in my console log but when i click on the line number it points me to the json-object i got back from hipsterjesus anyway, this could be a JSONP workaround getSampleText_s() { $.ajax({ url: 'hipsterjesus.com/api/?paras=' + this.state.paras + '&html=' + this.state.html, type: 'GET', headers: {'X-Requested-With': 'XMLHttpRequest'}, crossDomain: true, dataType: 'jsonp', success: function (data) { data = JSON.parse(data); console.log(data); this.setState({text: data.text}); } }); }
yeap, definitely not working with hipsterjesus so I’ve changed with baconipsum.com/api/?type=all-meat¶s=3&start-with-lorem=1&format=html and modified state (format instead of html) and it worked. Additionally in 11:49 I’ve replaced “respond.data” instead of “respond.data.text” . I hope it helps.
Because the API you're requesting a GET doesn't allow your origin. So if this API is yours and running on your server, you have to setHeader("Access-Control-Allow-Origin", "replace with your origin, ex: localhost:3000, or * for any") on your response with nodejs.
there is one plugin for chrome browser called Allow-Control-Allow-Origin, install it and turn it on, and this will fix the issue with the cross origin calls! :)
I know this was posted a while ago, but I think you should do a weather api using react as one of your projects. Just a suggestion. Helps us to make api calls using this framework. I think it's good practice.
Hiya, I'm new to JS and React. I'm a bit confused as to where props.value at 14:55 comes from. I I understand what props is, but where does .value come from? Where is it inherited from? Is it a method? If so why can't I find it in the React API Docs? Also there seems to be another method called 'props.name' I found while traversing examples in the React Docs, similarly I can't seem to find an explicit section explaining what props.name is and where it inherits from within the React Docs either. Thanks in advance!
Great tutorial. Really concise and well-explained. Is the deployment really that easy? You said you're using a VPS . For us React newbies will this work on generalized hosting? Thanks.
Yes, create-react-app does build that easily. In fact, there's now a field to set the homepage so you don't have to edit the index.html file. Works great.
So weird how this works . Have been deploying front end react and it's been working perfectly on git pages but now all of a sudden yarn and npm are conflicting , tough day. Works well on another machine . Does this make your machine/workspace bloated over time going back and forth between yarn and npm?
Hi, can you explain the public_html part more in detail? That would be really helpful. I also have a server which runs on Ubuntu which I access via the IP address, I have run build on the files and have the static files now. But I cannot get the react application to run.
You always make awesome videos can you also make video on how to understand apis out there so that I can use it to practice. It's pretty hard I guess to understand apis like youtube apis, twitter apis & many more.
Hey brad....love your videos....they are great...ur videos help me alot.... Currently i m working in a small project..based on ionic2 and angular2 I have a problem,i am trying to dynmacially create a pdf file with some fields like name,age etc when ever user click on a button.. plz help me...
I did not understand the step after 20:00 in the Select component in its Onchange function how the (this.props.onChange(this.state.value)) is used in App component in its onchange , App component onChange ={this.showHtml.bind.(this)) ,what I know in React is we can get state of a parent compoenent to child by using props . please can anyone explain to me I am really stuck here
Cheeseburger it is jsx which is javascript syntax extension. React uses it to add markup. Very similar except for a few differences like classname instead of class
I got the error "Failed to load hipsterjesus.com/api/?paras=4&html=true: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'localhost:3000' is therefore not allowed access." anyone what's happening here and how can I fix it .thanks
You can download the chrome extension chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en to easily solve this
EDIT: It's ok now, I added some wode with allowCrossDomain Hello I have a problem with the axios line I think, I have this error message in my console : No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'localhost:3000' is therefore not allowed access. Someone know what I have to do? I read forum messages who told me to do cross stuff
anyone looking for a different API to avoid CORS issues and still have the option of conditional formats returned can use: baconipsum.com/json-api/ (e.g. baconipsum.com/api/?type=meat-and-filler¶s=5&format=html) You will need to change your props to support a format rather than a boolean html value
![Lyric Search App With React & Context API [2] - Lyrics Page](http://i.ytimg.com/vi/jiM0wqQZMWg/mqdefault.jpg)
![Megan Thee Stallion - Bigger In Texas [Official Video]](http://i.ytimg.com/vi/QxTkZTLWdo4/mqdefault.jpg)
Hai, your tutorials are really Cool. Especially your voice and narration...
Please make a simple crud application tutorial using React.js and Firebase.
Great video! Hope to see more React mini projects!
In case someone is still watching, when defining a method(function) inside components, it is better to use arrow functions, because it saves you from having to bind(this):
instead of:
showHTML(x){
this.setState({
...........
})
}
use:
showHTML = (x)=>{
this.setState({
............
})
}
so there is no need for:
this.showHTML.bind(this)
arrow notation does the job for you automatically!
I had to change the path in two places in the index.html inside the Build folder - the main CSS and the JS, but your strategy worked. Thank you for uploading this.
In case someone wants to try this now, seems that hipsterjesus no longer works like in the vid, it returns a simple block of text without html, just saying so you wont have to spend 20 mins trying to get why it doesnt return p tags... well... enjoy the Tut and nice job Brad, everything else is working great, except for some CORS issues, but just installed a Chrome extension :)
What Chrome tool should we install, to make this app work
This is a like to the Chrome CORS tool
chrome.google.com/webstore/detail/cors/dboaklophljenpcjkbbibpkbpbobnbld?hl=en
@@kamaboko1 thanks....
Same thing happened, and also the issue of No 'Access-Control-Allow-Origin' header is present on the requested resource.
The CORS-bug is an annoyance to anyone working with API's. I used a Heroku-app to bypass it. Replace your axios.get url with this: cors-anywhere.herokuapp.com/hipsterjesus.com/api. It will send traffic through the Heroku-app instead. If it's down, just test it again a few minutes later.
Pls don't stop making videos...I'm gonna make a huge donation the minute I get my first salary
Never stop :)
I also 💓
First, lemme say thank you. This is the best channel I've ever learned from and i've RUclips'd A LOT. I've bought both eduonix courses on react and react-native and they've been super helpful.
I would like to request you do an "informative" episode on the 'business' aspect. For example, what is fare to charge in modern market. What sort of features/architectures demand $X or, perhaps, just your own personal montra on the money side of things.
Anyways, that's my 2cents. Keep the good stuff coming! You rock!
Nice man, I am from Brazil and watch your content directly
Your way of explaining is very good. thanx for tutorial
This helped me with a deployment issue, thanks for uploading! ;)
HipsterJesus API no longer works. It does not return the text data when you change html or paras parameter. Hope to use another API for this project.
please suggest any similar api .Provide link here plaese
I am facing No 'Access-Control-Allow-Origin' header is present on the requested resource. issue pleas help me.
ive got the same error for this tutorial, it's always kind of strange to me, some sites work with axios some others dont, when you get this error you can do the request with JSONP and it will work but its stupid :/ i dont understand why it worked for everyone else but not for us..
I tried to use this as a workaround, it should work in theory. It works, I get the response but there's still some error, I get a "missing semicolon" in my console log but when i click on the line number it points me to the json-object i got back from hipsterjesus
anyway, this could be a JSONP workaround
getSampleText_s() {
$.ajax({
url: 'hipsterjesus.com/api/?paras=' + this.state.paras + '&html=' + this.state.html,
type: 'GET',
headers: {'X-Requested-With': 'XMLHttpRequest'},
crossDomain: true,
dataType: 'jsonp',
success: function (data) {
data = JSON.parse(data);
console.log(data);
this.setState({text: data.text});
}
});
}
yeap, definitely not working with hipsterjesus so I’ve changed with baconipsum.com/api/?type=all-meat¶s=3&start-with-lorem=1&format=html and modified state (format instead of html) and it worked. Additionally in 11:49 I’ve replaced “respond.data” instead of “respond.data.text” . I hope it helps.
Because the API you're requesting a GET doesn't allow your origin. So if this API is yours and running on your server, you have to setHeader("Access-Control-Allow-Origin", "replace with your origin, ex: localhost:3000, or * for any") on your response with nodejs.
there is one plugin for chrome browser called Allow-Control-Allow-Origin, install it and turn it on, and this will fix the issue with the cross origin calls! :)
I know this was posted a while ago, but I think you should do a weather api using react as one of your projects. Just a suggestion. Helps us to make api calls using this framework. I think it's good practice.
Hiya, I'm new to JS and React. I'm a bit confused as to where props.value at 14:55 comes from. I I understand what props is, but where does .value come from? Where is it inherited from? Is it a method? If so why can't I find it in the React API Docs? Also there seems to be another method called 'props.name' I found while traversing examples in the React Docs, similarly I can't seem to find an explicit section explaining what props.name is and where it inherits from within the React Docs either.
Thanks in advance!
Great tutorial. Really concise and well-explained. Is the deployment really that easy? You said you're using a VPS . For us React newbies will this work on generalized hosting? Thanks.
Yes, create-react-app does build that easily. In fact, there's now a field to set the homepage so you don't have to edit the index.html file. Works great.
ComponentWillMount is deprecated, thanks for the video man
You are awesome 8-)
I will for sure subscribe to your complete course online!!
So weird how this works . Have been deploying front end react and it's been working perfectly on git pages but now all of a sudden yarn and npm are conflicting , tough day.
Works well on another machine .
Does this make your machine/workspace bloated over time going back and forth between yarn and npm?
Hi,
can you explain the public_html part more in detail? That would be really helpful.
I also have a server which runs on Ubuntu which I access via the IP address, I have run build on the files and have the static files now. But I cannot get the react application to run.
You always make awesome videos can you also make video on how to understand apis out there so that I can use it to practice. It's pretty hard I guess to understand apis like youtube apis, twitter apis & many more.
Man, I love this channel.
You have no idea how much I love you
Hello, Can u please make a video on how to implement caching in CORE PHP ? Types of caching.
Hey brad....love your videos....they are great...ur videos help me alot....
Currently i m working in a small project..based on ionic2 and angular2
I have a problem,i am trying to dynmacially create a pdf file with some fields like name,age etc when ever user click on a button..
plz help me...
Does anyone know another good api url that i can replace in my code? The Hipsterjesus api doesn't work. Thanks in advance
I did not understand the step after 20:00 in the Select component in its Onchange function how the (this.props.onChange(this.state.value)) is used in App component in its onchange , App component onChange ={this.showHtml.bind.(this)) ,what I know in React is we can get state of a parent compoenent to child by using props .
please can anyone explain to me I am really stuck here
Please its not working, I followed as defined in your video, getting blank page
I'm new to javascript and I don't understand why this works: return (
That's because its not JS but JSX.
Cheeseburger it is jsx which is javascript syntax extension. React uses it to add markup. Very similar except for a few differences like classname instead of class
is it possible to create tutorial on the deploy server that you are using
I got the error "Failed to load hipsterjesus.com/api/?paras=4&html=true: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'localhost:3000' is therefore not allowed access." anyone what's happening here and how can I fix it .thanks
You can download the chrome extension chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en to easily solve this
For sending request you passed params like paras & html using concatenation can it be don using interpolation feature of es6?
When are you going to do the PHP project ? I been waiting for so long :(
what PHP project? He already has so many!. Beside PHP is getting behind :/.
Nice Video....i like too much for deployment process
I noticed that naming in react uses capitals for folders and files names...is that by convention or preference?
Convention for file names
HI , Url to REACT PROJECTS COURSE: is broken
EDIT: It's ok now, I added some wode with allowCrossDomain
Hello I have a problem with the axios line I think, I have this error message in my console :
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'localhost:3000' is therefore not allowed access.
Someone know what I have to do? I read forum messages who told me to do cross stuff
How did you fix it? Can you please explain in detail? Thx.
Sir make the part 5 of your CIBLOG please!
You`re on fire lately.
Hey, I don't get any text on the browser. What can it be?
The API is down. So the data we're trying to get isn't available right now.
anyone looking for a different API to avoid CORS issues and still have the option of conditional formats returned can use:
baconipsum.com/json-api/
(e.g. baconipsum.com/api/?type=meat-and-filler¶s=5&format=html)
You will need to change your props to support a format rather than a boolean html value
this was a perfect solution to Hipster Jesus being offline. Thanks Taylor!
Hey i want to make an app similar to google doc can using reacts js only . Can anyone help me out
Great tutorial! 😊
how to deploy next js app in vps server ?
did anyone have issues due to http and not https request?
Thank you
what inmotion plan do you have?
I actually have a reseller account with many different sub accounts. I also have a VPS with them.
@@TraversyMedia is a2hosting no good?
Thanks, Dude!
The mouse pointer is distracting, not gonna lie.
Sorry about that
It's ok, I'm not complaining, just... noticing :)
Watch the whole video and didn't notice it before lol
Routing is not working after build. Can anyone help me ?
github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/BrowserRouter.md
first