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

You may also like