- 00:00:01 welcome to this video where I want to
- 00:00:03 have a look at some common react
- 00:00:05 questions that I see quite a lot let's
- 00:00:08 step right into it and by the way this
- 00:00:10 is just a collection of the questions
- 00:00:12 that came into my head that came to my
- 00:00:15 mind
- 00:00:15 you got more if you got other things you
- 00:00:17 see a lot please share them in the video
- 00:00:19 comments and I'll see what I can do in
- 00:00:21 the future so let's start
- 00:00:27 let's start with one super popular
- 00:00:29 question do I need a complex setup and
- 00:00:32 workflow for reactors can be really
- 00:00:34 confusing because on the official page
- 00:00:37 if you use that QuickStart tutorial on
- 00:00:39 reaction org you simply use some code in
- 00:00:44 code pan so you drop in a import and
- 00:00:46 you're ready to go and still thereafter
- 00:00:48 and then the majority of all courses and
- 00:00:51 tutorials you got more complex build
- 00:00:53 workflows with webpack with a local dev
- 00:00:55 server and all that fun stuff
- 00:00:57 so which setup do you actually need it
- 00:01:01 depends on which kind of app you're
- 00:01:02 building you can drop the react imports
- 00:01:06 react Reyes and react Dom j/s into your
- 00:01:09 HTML files and start using react
- 00:01:12 functional he's on these files you can
- 00:01:15 also use create react app which is like
- 00:01:19 a CLI for react to get a feature-rich
- 00:01:21 work flow with zero setup that still is
- 00:01:24 100% customizable because you can eject
- 00:01:27 or you build your own workflow or use
- 00:01:31 some boilerplate you find on github
- 00:01:33 there you can of course tailor your
- 00:01:35 workflow from scratch or build up on the
- 00:01:38 existing boilerplate now the drop in
- 00:01:40 approach is great for multi-page
- 00:01:42 applications so where react should not
- 00:01:44 manage the entire front end and for
- 00:01:47 smaller projects for bigger projects and
- 00:01:50 single page applications I recommend
- 00:01:52 using create react app though it gives
- 00:01:55 you a really cool and optimized workflow
- 00:01:58 and project setup that is still being
- 00:02:01 worked on create react app is actively
- 00:02:03 maintained and therefore it gives you a
- 00:02:05 lot of features you want to have in big
- 00:02:07 apps a lot of optimizations and so on
- 00:02:10 and a custom workflow could also be
- 00:02:13 great for that but you need to know what
- 00:02:15 you do so for highly specific
- 00:02:17 requirements that might be best because
- 00:02:19 there you can't build everything exactly
- 00:02:21 as you wanted to be right from the start
- 00:02:24 but in general create react app with the
- 00:02:27 option of ejecting and then customizing
- 00:02:30 everything anyways seems like the best
- 00:02:32 way to me except for multi-page
- 00:02:34 applications where you often work with
- 00:02:36 drop in imports here's another thing I
- 00:02:40 see sometimes single curly braces versus
- 00:02:44 double curly braces if you're coming
- 00:02:47 from view or angular you know that in
- 00:02:49 your templates you output dynamic
- 00:02:52 content between double curly braces in
- 00:02:54 react templates you use single curly
- 00:02:58 braces the reason for it is simple react
- 00:03:02 doesn't use templates it doesn't use
- 00:03:03 HTML it uses JSX which behind the scenes
- 00:03:07 is just JavaScript just some enhanced
- 00:03:10 version that looks like HTML and since
- 00:03:13 it's just JavaScript you don't need a
- 00:03:16 specific templating language which it
- 00:03:19 can be distinguished from normal HTML
- 00:03:21 you use single curly braces like you do
- 00:03:25 in normal JavaScript anyways for example
- 00:03:29 to create an object this is a syntax
- 00:03:31 then understood by react or transformed
- 00:03:34 to normal JavaScript in the end and
- 00:03:37 therefore we have no specific templating
- 00:03:40 language we have no specific syntax for
- 00:03:43 that you can see the same for loops by
- 00:03:45 the way where you use an array and map
- 00:03:48 it to an array of JSX elements instead
- 00:03:51 of using directives and stuff like that
- 00:03:53 it's really all coming down to the
- 00:03:55 JavaScript only nature of react speaking
- 00:03:59 of the nature of react there's another
- 00:04:01 important thing functional vs.
- 00:04:03 class-based components which one should
- 00:04:06 you use in which circumstances so
- 00:04:10 functional components also refer to as
- 00:04:13 stateless components receive props as an
- 00:04:16 argument and return some JSX this is
- 00:04:19 what they do they create a component
- 00:04:21 with this minimum set up they don't
- 00:04:24 manage any internal state state of
- 00:04:27 course as an important concept and react
- 00:04:29 you know that but it's not relevant for
- 00:04:31 functional components they don't have
- 00:04:33 internal state all the day that they use
- 00:04:35 are or is received wire props and you
- 00:04:39 don't have lifecycle methods in there
- 00:04:41 you can't run through the lifecycle of
- 00:04:43 the component in a stateless component a
- 00:04:46 class-based or state full component on
- 00:04:49 the other hand has a render method to
- 00:04:51 return JSX
- 00:04:52 and excesses props
- 00:04:53 this props it also manages internal
- 00:04:57 state accessible wire this state and can
- 00:05:00 change the state to rerender parts of
- 00:05:03 the app parts of the JSX code to the Dom
- 00:05:06 and also can you use lifecycle methods
- 00:05:09 so that's the core difference when
- 00:05:13 should you use which use state less
- 00:05:15 components whenever possible which
- 00:05:18 actually is in a quite a lot of times
- 00:05:21 you can use stateless components a lot
- 00:05:23 use state full components whenever you
- 00:05:26 need to manage state in a component and
- 00:05:29 mostly you should use them as containers
- 00:05:32 so you have a couple of route containers
- 00:05:35 class-based components in the end which
- 00:05:38 manage state which then pass down the
- 00:05:41 state and therefore of course also any
- 00:05:43 state changes wire props to a bunch of
- 00:05:46 functional components why is this a good
- 00:05:48 pattern because if you manage your state
- 00:05:51 in a selected few components then it's
- 00:05:54 much easier to manage your app and
- 00:05:56 maintain your app because it's always
- 00:05:58 clear only in places where the state can
- 00:06:00 change and if that's just a couple of
- 00:06:02 components that's much easier to manage
- 00:06:04 so therefore try to keep the usage of
- 00:06:07 class-based stateful components to a
- 00:06:09 minimum another thing that sometimes
- 00:06:12 unclear is the set state syntax is you
- 00:06:16 can use so this is set state we can set
- 00:06:19 a new state with it and calling it will
- 00:06:22 trigger react to re-render the Dom if
- 00:06:26 there are changes at least so this is
- 00:06:30 set state and one thing not everyone
- 00:06:32 knows is that it runs asynchronously so
- 00:06:36 old state updates might not be reflected
- 00:06:39 in this state immediately if you execute
- 00:06:41 some code after set state often they are
- 00:06:44 but it's not guaranteed it's
- 00:06:46 asynchronous there is a second version
- 00:06:49 of set state this one here where you
- 00:06:52 pass a function to set state a function
- 00:06:55 that receives the previous state and
- 00:06:57 previous props now the important
- 00:07:00 difference to the first version is in
- 00:07:01 the first version we used this state
- 00:07:04 inside of set state and due to the async
- 00:07:07 nature we might referring to an older
- 00:07:10 this state than we expected
- 00:07:12 we're guaranteed to always get the last
- 00:07:14 valid previous state and if we then need
- 00:07:19 some property from that old state we now
- 00:07:21 guaranteed got the latest version of it
- 00:07:24 and use it to set a new state important
- 00:07:27 in that function you return the same
- 00:07:29 object you would have passed to set
- 00:07:32 state in the first syntax anyways
- 00:07:33 speaking of syntax what does this map
- 00:07:37 method do you see that map method a lot
- 00:07:40 in react apps and it's basically used to
- 00:07:44 output an array of items to the screen
- 00:07:47 so if you come from angular this would
- 00:07:50 be your equivalent to the ng4 directive
- 00:07:52 kind of now since we're not working with
- 00:07:54 a template in react apps but with just
- 00:07:57 JavaScript code we use just JavaScript
- 00:07:59 features and outputting an array of data
- 00:08:03 onto the screen with this syntax does
- 00:08:05 one thing essentially it Maps
- 00:08:08 this array into a new array so the goal
- 00:08:12 is to output the JSX elements or die's
- 00:08:16 this data as JSX elements I should say
- 00:08:18 and map maps that into a new array react
- 00:08:23 is capable of outputting an array into
- 00:08:26 the Dom but that array needs to consist
- 00:08:28 of JSX elements so this is what we do
- 00:08:31 with this map syntax we just return a
- 00:08:34 new array where every element of the
- 00:08:36 array is based on elements in the old
- 00:08:38 array but of transformed elements so we
- 00:08:42 can transform that array with the syntax
- 00:08:45 you see at the very top of the slide to
- 00:08:47 disarray where we now have an array of
- 00:08:49 JSX elements incorporating the old data
- 00:08:52 and this is really the whole idea behind
- 00:08:54 map we map an old array of just strings
- 00:08:57 numbers whatever it is into a new array
- 00:09:00 of JSX elements that can be rendered to
- 00:09:03 the real dawn styling react is another
- 00:09:07 common source of issues we get a lot of
- 00:09:10 different styling approaches which one
- 00:09:12 should you choose why is it so difficult
- 00:09:15 the first thing you learn in most
- 00:09:18 tutorials is inline Styles ie
- 00:09:20 you assign the styles directly on the
- 00:09:22 JSX elements with the style prop this
- 00:09:26 works but becomes cumbersome if you need
- 00:09:28 media queries it essentially doesn't
- 00:09:30 work or if you got more complex styles
- 00:09:33 Radium then is a package that could be a
- 00:09:36 solution so Google radium to learn more
- 00:09:38 about it it essentially is a package
- 00:09:40 that allows you to use media queries and
- 00:09:43 more CSS like features in your react app
- 00:09:46 because keep in mind with inline Styles
- 00:09:48 you're not really using CSS style
- 00:09:51 components is another package with
- 00:09:53 Google for so these are all really
- 00:09:55 package names radium and styled
- 00:09:57 components you can search for that too
- 00:09:59 follows a different approach than radium
- 00:10:01 but also with an approach or with the
- 00:10:03 idea of giving you scoped styles so
- 00:10:07 Styles that only apply to one component
- 00:10:10 and giving you access to the full
- 00:10:13 feature bandwidth off CSS you could alt
- 00:10:17 use BM which is a CSS concept which
- 00:10:20 allows you to or which is all about
- 00:10:23 creating CSS class names that do the
- 00:10:26 scoping so if your issue is that you
- 00:10:28 want to ensure that certain Styles only
- 00:10:32 apply to certain components then you
- 00:10:34 could create clearly defined class names
- 00:10:39 in normal CSS and a normal CSS file no
- 00:10:42 package is needed for that and then use
- 00:10:45 these CSS class names in your JSX code
- 00:10:48 and you can google for BM to find more
- 00:10:51 information about it and how to
- 00:10:53 structure these class names the idea is
- 00:10:55 to really create kind of components in
- 00:10:58 CSS with normal CSS features so without
- 00:11:02 any package if you don't want to create
- 00:11:05 these long CSS class names on your own
- 00:11:08 though you can have a look at CSS
- 00:11:09 modules which is a feature you can
- 00:11:13 unlock and create react app for example
- 00:11:16 if you google for create react app CSS
- 00:11:18 modules the idea behind it is that you
- 00:11:21 create a normal CSS file still but this
- 00:11:25 package world is changed configuration
- 00:11:28 in your workflow as you do it for the
- 00:11:30 create react app setup for example
- 00:11:33 transform your short normal CSS names
- 00:11:37 into unique ones on a per component
- 00:11:40 level so then each component will get
- 00:11:43 its unique CSS class names which you
- 00:11:46 don't have to write but which you get
- 00:11:48 ones compilation once the build workflow
- 00:11:50 is finished so this is a nice approach
- 00:11:53 which I personally like a lot because it
- 00:11:56 gives you really scoped Styles without
- 00:11:59 you having to worry about manually
- 00:12:01 creating the appropriate CSS class names
- 00:12:04 and these are just some of the features
- 00:12:06 some of the possible solutions I can
- 00:12:10 recommend that you google that you'll
- 00:12:11 learn about to find the one you enjoy
- 00:12:14 the most
- 00:12:15 speaking of CSS how can you use
- 00:12:18 third-party CSS libraries it's actually
- 00:12:21 pretty simple you can add a CDN link to
- 00:12:25 index.html or a link in index.html to a
- 00:12:28 local file of course or you use a local
- 00:12:32 file and in most workflows you can
- 00:12:36 import that into your JavaScript files
- 00:12:38 even though it's a CSS file but most
- 00:12:41 react setups like the one you get with
- 00:12:43 create react app also support imports of
- 00:12:48 CSS files which behind the scenes will
- 00:12:51 of course not be mixed with your
- 00:12:52 JavaScript code but will be kept
- 00:12:54 separate but your bundler web Pakistan
- 00:12:57 aware of them and can process them
- 00:12:58 that's the idea behind the imports so
- 00:13:01 this is an our common approach you can
- 00:13:03 of course also use the NPM or yarn to
- 00:13:06 download to install these packages if
- 00:13:08 you're using bootstrap for example but
- 00:13:11 still adding a import to your JavaScript
- 00:13:13 files should work fine and this new
- 00:13:15 approach
- 00:13:16 I recommend it sounds strange but it
- 00:13:18 works in most workflows and if you use
- 00:13:21 create reactor for example it definitely
- 00:13:23 works
- 00:13:24 what about third-party JavaScript
- 00:13:26 libraries how can you add these
- 00:13:29 essentially you get the same options you
- 00:13:31 can add script imports to see the end
- 00:13:34 links or local files in index.html and
- 00:13:36 this is of course all referring to
- 00:13:38 single page applications but you can
- 00:13:40 also import it like that in multi page
- 00:13:41 applications of course or you import the
- 00:13:45 local files into your JavaScript file
- 00:13:47 which of course works in a react app
- 00:13:50 especially when creating a single page
- 00:13:52 application you're importing JavaScript
- 00:13:54 files from other files all the time
- 00:13:57 you're constantly writing import
- 00:13:59 statements and of course you can import
- 00:14:01 any third-party library into your
- 00:14:03 JavaScript file into your react
- 00:14:05 JavaScript file as well and you can
- 00:14:07 start using the features of that library
- 00:14:09 just like that that should work fine and
- 00:14:12 of course you can also use NPM and yarn
- 00:14:14 for that this should also work let's go
- 00:14:17 back to some core react functionalities
- 00:14:20 and let's talk about immutability that's
- 00:14:23 something I see that can be hard to
- 00:14:26 understand so let me try to make it a
- 00:14:30 bit easier what is immutability about we
- 00:14:33 hear about it a lot when we're working
- 00:14:34 with redux for example and you can find
- 00:14:36 an article with a lot of information on
- 00:14:38 it in the video description actually so
- 00:14:41 the idea behind immutability is simple
- 00:14:44 objects and arrays are reference types
- 00:14:47 in JavaScript reference types mean that
- 00:14:50 when we store an array in a new variable
- 00:14:54 and the same is true for objects we
- 00:14:55 don't actually create and copy a copy of
- 00:14:58 the value but only of the pointer
- 00:15:00 pointing to some point in memory so the
- 00:15:03 value still is the same even if we store
- 00:15:05 it in two different properties or
- 00:15:07 variables therefore to fix this to get a
- 00:15:11 real copy which we can change without
- 00:15:14 also altering the other one which would
- 00:15:16 happen by default we have to manually
- 00:15:19 clone so really copy deeply copy any
- 00:15:23 array or object we want to manipulate
- 00:15:24 and which we also want to copy so how
- 00:15:28 does this work well here's the situation
- 00:15:30 let's say we have an array one two three
- 00:15:32 and we're storing it in a new constant
- 00:15:35 new array this does work but what
- 00:15:38 doesn't work what I mean with that that
- 00:15:40 if we then would try to change new array
- 00:15:43 we would also change old array because
- 00:15:45 of that reference type thing so the
- 00:15:48 solution is to instead clone the old
- 00:15:50 array for example with the slice method
- 00:15:53 which returns a brand-new array object
- 00:15:56 so not a pointer to the same array but a
- 00:15:58 brand new one if we then change clone
- 00:16:01 ray we don't also change all the rain if
- 00:16:04 you're using a setup which allows you to
- 00:16:06 use next-generation JavaScript features
- 00:16:08 you can also use the spread operator
- 00:16:11 instead of the slice method now for
- 00:16:14 objects is pretty much the same here we
- 00:16:17 get the same problem we can't copy it
- 00:16:20 like that there we could use object
- 00:16:22 assign to create a copy of an old object
- 00:16:26 into a new object or the spread operator
- 00:16:30 for objects with this syntax you can see
- 00:16:32 at the bottom of the box important still
- 00:16:36 what we're doing here is shallow cloning
- 00:16:38 so we're only copying or cloning the
- 00:16:41 first level of properties of an object
- 00:16:44 for example let me show you what I mean
- 00:16:46 with that here we have an object which
- 00:16:50 also has an array not just a name
- 00:16:51 property but also the hobbies property
- 00:16:54 which is an array of strings
- 00:16:56 if we now clone the older object with
- 00:16:59 object assign we do have a real new
- 00:17:01 object with new properties that match
- 00:17:04 the old properties but the array hobbies
- 00:17:08 all there's a reference type and it
- 00:17:11 didn't clone that because it only cloned
- 00:17:13 the first level so only the property
- 00:17:15 names you could say so therefore if we
- 00:17:18 now push something onto the hobbies
- 00:17:20 array in the cloned object we would
- 00:17:23 actually still edit the array in the old
- 00:17:25 object the solution to that is to really
- 00:17:28 manually clone all the levels we plan on
- 00:17:32 changing doesn't hurt if we don't do it
- 00:17:34 if we don't plan on change it changing
- 00:17:36 it but if we do plan on changing
- 00:17:38 something we need to clone it so here
- 00:17:40 the cloned object would spread out the
- 00:17:42 old object and then explicitly overwrite
- 00:17:45 the hobbies property by overwriting it
- 00:17:48 with a new array where we also use the
- 00:17:50 spread operator to clone the elements of
- 00:17:53 the old object hobbies array and now we
- 00:17:56 get an object with a new hobbies array –
- 00:17:59 this is something to keep in mind again
- 00:18:02 there is a link with more information in
- 00:18:04 the video description if you want to
- 00:18:05 dive deeper I hope it's a bit clearer
- 00:18:08 now at least here's another thing I see
- 00:18:11 a lot everyone can see my code and it's
- 00:18:14 true
- 00:18:15 everyone can see your code if you open
- 00:18:17 the developer tools in your browser and
- 00:18:19 you inspect a react app there you can
- 00:18:22 access the source files the script files
- 00:18:25 and you can read the script code of
- 00:18:27 course and there's nothing you can do
- 00:18:29 it's JavaScript it runs on the client so
- 00:18:33 you can't hide your code the solution is
- 00:18:36 to not put any security relevant
- 00:18:39 information in there don't put anything
- 00:18:42 in there that you don't want others to
- 00:18:44 see because you can't hide it you can't
- 00:18:46 prevent this that is just how the web
- 00:18:48 works in the end can I use react without
- 00:18:51 Redux and now a question I see a lot and
- 00:18:53 the answer is yes of course you can
- 00:18:55 react by default if you start a new
- 00:18:58 react app doesn't use Redux it can be
- 00:19:01 confusing for newcomers because the
- 00:19:03 majority of tutorials is always react
- 00:19:05 plus Redux so it's my course by the way
- 00:19:08 because it's such a popular combination
- 00:19:11 but in my course for example we start
- 00:19:13 without Redux because it's not a must
- 00:19:15 you can use it it becomes important for
- 00:19:18 bigger apps it makes managing the state
- 00:19:20 much easier then but it's not a must and
- 00:19:23 especially for smaller to medium-sized
- 00:19:25 apps there might be no need to use Redux
- 00:19:28 and now a question I see a lot is if you
- 00:19:31 can use react with PHP or the lateral
- 00:19:34 framework for that or node or any
- 00:19:37 average server-side language or
- 00:19:38 framework and the answer is yes let me
- 00:19:41 show you how it depends on whether
- 00:19:43 you're building a single-page
- 00:19:44 application or a multi-page application
- 00:19:47 though if you're building a single-page
- 00:19:50 application then react controls the
- 00:19:53 entire front end through that one single
- 00:19:56 index.html file which was sent by the
- 00:19:58 server if you're building a multi-page
- 00:20:00 application then react controls only
- 00:20:03 parts of the various pages your server
- 00:20:06 sends you the views the server sends you
- 00:20:08 react controlled so-called
- 00:20:11 widgets so maybe image carousel or maybe
- 00:20:15 an accordion on something like that now
- 00:20:18 for these single page application
- 00:20:19 approach we have the server which sends
- 00:20:21 the index.html file and that could also
- 00:20:24 be a different server than the server
- 00:20:25 where your business
- 00:20:27 object and runs on by the way any static
- 00:20:29 host does the trick and then your react
- 00:20:32 app which runs in the index.html file
- 00:20:34 still can communicate with that or an
- 00:20:37 average server through a restful api
- 00:20:39 this is how that works you communicate
- 00:20:42 through a restful api the server doesn't
- 00:20:44 render views you have the dress Ville
- 00:20:47 api instead now if you're creating a
- 00:20:49 multi-page application with react then
- 00:20:52 you also have a server which renders a
- 00:20:55 couple of views not just one and
- 00:20:57 whenever you interact with that views
- 00:21:00 you click a link or something like that
- 00:21:01 you send a new request to the server and
- 00:21:04 you get back a new view and react can be
- 00:21:07 part of a couple or all of these views
- 00:21:10 to control parts of these HTML pages the
- 00:21:14 widgets I already mentioned this is how
- 00:21:17 these two different approaches work and
- 00:21:19 it shows of course you can use react
- 00:21:21 with any server-side language by the way
- 00:21:24 because it only runs in a browser it
- 00:21:26 doesn't care about the language you're
- 00:21:29 running on your server
- 00:21:30 it also doesn't care about any databases
- 00:21:32 you might use there speaking of react
- 00:21:35 running on the client something I hear a
- 00:21:38 lot is my state is lost after page
- 00:21:40 reloads what can I do it's true if
- 00:21:43 you're coming from a traditional web
- 00:21:45 page world where you use sessions on the
- 00:21:48 server to manage user state like if the
- 00:21:50 user is logged in then this doesn't work
- 00:21:53 for react if you hit that refresh button
- 00:21:55 your JavaScript code runs again and
- 00:21:58 since it's detached from the server
- 00:22:00 there is no session management there is
- 00:22:02 no session now you get two alternative
- 00:22:05 approaches for managing state one is
- 00:22:07 local storage and one is using a data
- 00:22:10 base on the server important with
- 00:22:13 neither of the two approaches you're
- 00:22:15 going to use a classical traditional
- 00:22:16 session unless you're using a multi page
- 00:22:19 building a multi page yep so this is all
- 00:22:21 referring to single page apps I should
- 00:22:22 say so local storage is a client-side
- 00:22:26 storage sitting in a browser it's
- 00:22:28 accessed by our JavaScript and with not
- 00:22:32 under your control I mean that you can't
- 00:22:33 access it from the server and it's a
- 00:22:36 simple key value store it's great for
- 00:22:38 storing a JSON web token for it
- 00:22:41 a common authentication mechanism in
- 00:22:43 react single page applications which
- 00:22:46 allows you to kind of rebuild a session
- 00:22:48 like experience because you can when
- 00:22:50 your app starts check whether that token
- 00:22:53 already is stored in the storage and you
- 00:22:55 can pick up that state and that's not
- 00:22:57 just true for the token you can of
- 00:22:59 course store any information and local
- 00:23:01 storage that you want to check for on
- 00:23:04 the next app start and that you want to
- 00:23:06 possibly initialize your app with now a
- 00:23:10 server-side database of course is well
- 00:23:12 running on the server and therefore
- 00:23:13 fully under your control the user can't
- 00:23:16 clear it uninstall it or anything like
- 00:23:17 that as you can do with the local
- 00:23:20 storage it's accessible only from the
- 00:23:22 server which improves security and it of
- 00:23:26 course can be any database you want so
- 00:23:28 you are not limited to a key value store
- 00:23:31 here it's of course the right solution
- 00:23:33 for data that needs to be long
- 00:23:35 persistent so if you want to ensure that
- 00:23:38 data can't be erased by the user or by
- 00:23:40 the operating system if the operating
- 00:23:43 system is running out of space it might
- 00:23:44 clear unnecessary data like data and
- 00:23:47 local storage of browsers so any data
- 00:23:51 that needs to persist should be stored
- 00:23:53 on the server therefore can you host
- 00:23:56 your app on here OCO and so on that's
- 00:23:58 not a question I get a lot now the
- 00:24:01 important thing is that we need to
- 00:24:02 understand what a react app is in the
- 00:24:05 end once it's done it's just a bunch of
- 00:24:08 build artifacts generated by our build
- 00:24:11 workflow if we run or run our production
- 00:24:14 build process and this again refers to
- 00:24:17 single page applications if you're
- 00:24:19 building a multi-page application of
- 00:24:20 course if you're building it with PHP or
- 00:24:22 node or any language supported by Heroku
- 00:24:25 your just deploy it there for single
- 00:24:27 page applications though we get these
- 00:24:29 build artifacts which is just the
- 00:24:31 index.html file some JavaScript files
- 00:24:34 and some style files for example now all
- 00:24:37 these are static files there is no
- 00:24:39 server-side code in there the JavaScript
- 00:24:41 file is not no js' but a JavaScript file
- 00:24:45 for the browser
- 00:24:46 hence hiroko and so on might be overkill
- 00:24:49 because there you need to write an
- 00:24:51 application with PHP with no chess or
- 00:24:54 stuff like that just to serve that
- 00:24:56 index.html file and the average static
- 00:25:00 files so a better solution here is to
- 00:25:03 use AWS s3 firebase hosting or some
- 00:25:07 other static host simply Google for
- 00:25:09 static web host to find some possible
- 00:25:12 services you can use these services are
- 00:25:15 best for serving your react single page
- 00:25:18 application because you have no
- 00:25:20 server-side language why would you take
- 00:25:22 the overhead of installing everything
- 00:25:24 and setting up some dummy app that just
- 00:25:26 serves some static files here's another
- 00:25:29 common error my routes don't work after
- 00:25:32 deployment so let's say you're the user
- 00:25:36 and you're visiting a page on the server
- 00:25:38 my page comm now on the server you then
- 00:25:43 return the index.html file where your
- 00:25:45 react app runs and where you display
- 00:25:48 content then you click somewhere in that
- 00:25:51 app and you navigate to my page comm
- 00:25:53 slash products and since we have routing
- 00:25:57 set up in our single page application
- 00:25:59 and this is referring to single page
- 00:26:01 applications only what I'm saying here
- 00:26:03 since we have routes set up there do you
- 00:26:05 react router parses that new URL and
- 00:26:08 renders the right content on the server
- 00:26:11 you have no routes set up because it's a
- 00:26:13 single page application all that logic
- 00:26:16 lives in your client side app in your
- 00:26:18 react app now if you don't navigate
- 00:26:22 around by clicking where react and the
- 00:26:24 end catches the click and doesn't send a
- 00:26:27 real request but just see what you
- 00:26:28 wanted to do and re render the page if
- 00:26:31 you instead hit refresh you really send
- 00:26:34 a new request to the server now the
- 00:26:36 problem is you will get back a 404 error
- 00:26:39 because the server doesn't know the
- 00:26:42 slash products route it only exists in
- 00:26:44 your react routing setup so to go around
- 00:26:48 to this problem we need to set our
- 00:26:51 server up in a special way we need to
- 00:26:54 ensure that we always return the
- 00:26:56 index.html file also in 404 error cases
- 00:27:02 this then allows react and its router to
- 00:27:06 always take a
- 00:27:07 and parse the incoming requests and
- 00:27:10 render the right page and if you want to
- 00:27:12 still render 404 pages for certain
- 00:27:15 routes you need to set this
- 00:27:16 configuration up in the react single
- 00:27:19 page application why at the router
- 00:27:21 they're not on the server you always
- 00:27:24 need to return the index.html file and
- 00:27:27 that was it I hope you enjoyed it you
- 00:27:31 learned some new things maybe got some
- 00:27:33 answers to some questions you might have
- 00:27:34 had about react definitely share any
- 00:27:37 other questions in the video comments I
- 00:27:40 probably won't answer them there but I
- 00:27:43 will note them and I might do an
- 00:27:45 additional video in the future so all
- 00:27:49 the best to you I hope to see you again
- 00:27:50 on a keto mind in the future bye