Coding

React – Common Questions (and Answers!)

  • 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