Build & Deploy A React JS Text Generator App

In this video we will put together a simple and useful React.js dummy text generator application and deploy it to a server. React is a popular JavaScript UI library
CODE: Code for this video
github.com/bradtraversy/sampl...
REACT PROJECTS COURSE:
www.traversymedia.com/course/p...
SUPPORT: We spend massive amounts of time creating these free videos, please donate to show your support:
www.paypal.me/traversymedia
/ traversymedia
FOLLOW TRAVERSY MEDIA:
/ traversymedia
/ traversymedia
/ bradtraversy

[@anooprajwal]

Hai, your tutorials are really Cool. Especially your voice and narration... Please make a simple crud application tutorial using React.js and Firebase.

[@roya67]

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.

[@keepforever726]

First, lemme say thank you. This is the best channel I've ever learned from and i've KZbin'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!

[@demian5511]

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!

[@ironmade3424]

This helped me with a deployment issue, thanks for uploading! ;)

[@ginoskotheon3]

Man, I love this channel.

[@programadorcarioca2662]

Nice man, I am from Brazil and watch your content directly

[@mrmeenee2788]

Pls don't stop making videos...I'm gonna make a huge donation the minute I get my first salary

[@TraversyMedia]

Never stop :)

[@babitabisht4563]

I also 💓

[@antoinearray7944]

You are awesome 8-) I will for sure subscribe to your complete course online!!

[@Jaskaransingh-hv5eb]

Your way of explaining is very good. thanx for tutorial

[@josem3933]

You have no idea how much I love you

[@aldocaamal5379]

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 :)

[@babitabisht4563]

What Chrome tool should we install, to make this app work

[@kamaboko1]

This is a like to the Chrome CORS tool chrome.google.com/webstore/detail/cors/dboaklophljenpcjkbbibpkbpbobnbld?hl=en

[@babitabisht4563]

@@kamaboko1 thanks....

[@xubair96]

Same thing happened, and also the issue of No 'Access-Control-Allow-Origin' header is present on the requested resource.

[@christerjohanzzon]

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.

[@coreo4230]

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!

[@valentinacalabrese4562]

Great tutorial! 😊

[@tushar000001]

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.

[@tushar000001]

For sending request you passed params like paras & html using concatenation can it be don using interpolation feature of es6?

[@CanoOnatli]

Does anyone know another good api url that i can replace in my code? The Hipsterjesus api doesn't work. Thanks in advance

[@kelvindavis7169]

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.

[@kalpeshpatel-ek5xo]

Nice Video....i like too much for deployment process

[@micosair]

You`re on fire lately.

[@vitaliiche2706]

Thanks, Dude!

[@FordExplorer-rm6ew]

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?

[@pouvoircerveau7826]

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

[@VibrantBelief]

is it possible to create tutorial on the deploy server that you are using

[@DungHo-rs3tz]

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.

[@RealSoundNow]

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.

[@RealSoundNow]

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.

[@aqibfayyaz1619]

Thank you

[@markcain2116]

I noticed that naming in react uses capitals for folders and files names...is that by convention or preference?

[@hazemayesh]

Convention for file names

[@RafaelSFTech]

ComponentWillMount is deprecated, thanks for the video man

[@skptricks8798]

how to deploy next js app in vps server ?

[@AnkitSingh-vv3xt]

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...

[@sourabhsurana6771]

I am facing No 'Access-Control-Allow-Origin' header is present on the requested resource. issue pleas help me.

[@yabba234]

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..

[@yabba234]

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}); } }); }

[@william1320]

yeap, definitely not working with hipsterjesus so I’ve changed with baconipsum.com/api/?type=all-meat&paras=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.

[@Assassunn]

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.

[@zlatkoiliev8927]

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! :)

[@rahulagarwal968]

Hello, Can u please make a video on how to implement caching in CORE PHP ? Types of caching.

[@YvonneVibe]

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

[@jimmyciaston7733]

You can download the chrome extension chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en to easily solve this

[@duartelucas8129]

Hey, I don't get any text on the browser. What can it be?

[@mattf.2142]

The API is down. So the data we're trying to get isn't available right now.

[@lakshaysharma3848]

Hey i want to make an app similar to google doc can using reacts js only . Can anyone help me out

[@codedance856]

did anyone have issues due to http and not https request?

[@BestofFortnite]

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

[@Somsubhra_Das]

How did you fix it? Can you please explain in detail? Thx.

[@gurubillishrinivasareddy4540]

Please its not working, I followed as defined in your video, getting blank page

[@9thwave744]

HI , Url to REACT PROJECTS COURSE: is broken

[@ChowChannel1]

When are you going to do the PHP project ? I been waiting for so long :(

[@kevinurielfonseca]

what PHP project? He already has so many!. Beside PHP is getting behind :/.

[@cutiel2692]

what inmotion plan do you have?

[@TraversyMedia]

I actually have a reseller account with many different sub accounts. I also have a VPS with them.

[@cutiel2692]

@@TraversyMedia is a2hosting no good?

[@cheeseburger1884]

I'm new to javascript and I don't understand why this works: return (

[@TheShotus]

That's because its not JS but JSX.

[@TraversyMedia]

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

[@wackydot3478]

Sir make the part 5 of your CIBLOG please!

[@jiadailiu5191]

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.

[@mandapatiganesh7409]

please suggest any similar api .Provide link here plaese

[@taylora.buckner5970]

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&paras=5&format=html) You will need to change your props to support a format rather than a boolean html value

[@Elon40k]

this was a perfect solution to Hipster Jesus being offline. Thanks Taylor!

[@marks3208]

first

[@geethureghunath8380]

Routing is not working after build. Can anyone help me ?

[@bimalpariyar3732]

github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/BrowserRouter.md

[@sandman7155]

The mouse pointer is distracting, not gonna lie.

[@TraversyMedia]

Sorry about that

[@sandman7155]

It's ok, I'm not complaining, just... noticing :)

[@Assassunn]

Watch the whole video and didn't notice it before lol