Coding

#11 The React Frontend | Build a Complete App with GraphQL, Node.js, MongoDB and React.js

  • 00:00:01 hi everyone welcome back to this serious
  • 00:00:04 in the last parts of this series or in
  • 00:00:07 all the parts of this series thus far we
  • 00:00:09 started working on the back end of this
  • 00:00:11 graph QL with node and react project
  • 00:00:14 now obviously the react part is still
  • 00:00:17 missing and in this video we'll get
  • 00:00:20 started building our react front-end so
  • 00:00:23 that we can gradually finish up this
  • 00:00:25 project though we'll still have some
  • 00:00:28 parts to go so let's dive in and let's
  • 00:00:31 start setting up our reactor as
  • 00:00:33 front-end for the graph QL API we built
  • 00:00:39 now let me be very clear here will not
  • 00:00:41 finish this serious in this video and
  • 00:00:43 also not in the next two videos I
  • 00:00:45 haven't finished recording all the parts
  • 00:00:47 so I don't know how long it will take
  • 00:00:49 but I find it really important to also
  • 00:00:51 explain stuff and don't just rush
  • 00:00:53 through it additionally I will obviously
  • 00:00:56 explain what we do but some basic react
  • 00:00:59 knowledge will definitely be required or
  • 00:01:02 at least helped a lot I'll not start at
  • 00:01:04 zero there I'll not explain everything
  • 00:01:06 in death so if you need to pick up some
  • 00:01:09 react knowledge first or if you want to
  • 00:01:11 do that my complete guide obviously is a
  • 00:01:13 great choice because it starts at
  • 00:01:15 absolutely zero knowledge and takes you
  • 00:01:18 to advanced react developer in like no
  • 00:01:20 time with that out of the way let's get
  • 00:01:23 started and here I have this back-end we
  • 00:01:27 worked on obviously so this is my graph
  • 00:01:30 tool API on the backend and what I will
  • 00:01:34 do here is just to here have it in one
  • 00:01:36 in the same project I will actually
  • 00:01:38 create a new folder in there and I will
  • 00:01:41 name it front-end and you can name it
  • 00:01:43 however you want but I'll name it like
  • 00:01:45 this and in there I want to create that
  • 00:01:47 react application which we work on you
  • 00:01:50 can also manage this in a totally
  • 00:01:51 different place and manage it in a
  • 00:01:53 separate IDE window I just want to have
  • 00:01:56 it in one place so that switching
  • 00:01:58 between files also is less confusing and
  • 00:02:00 it's in one in the same github
  • 00:02:02 repository now to create a react project
  • 00:02:06 in that folder there I will use create
  • 00:02:09 react app create react app is a tool
  • 00:02:12 developed and maintained by the Facebook
  • 00:02:15 team you can simply google for it to
  • 00:02:17 find the github repository for this
  • 00:02:19 project it's essentially a CLI a
  • 00:02:21 command-line interface which makes the
  • 00:02:24 creation of pre-configured
  • 00:02:26 projects react projects that have best
  • 00:02:29 practices and optimizations built in
  • 00:02:31 very easy to use it you can follow the
  • 00:02:35 commands you see here and this requires
  • 00:02:37 note j s and npm installed being
  • 00:02:40 installed on your system which is the
  • 00:02:42 case if you have no chairs installed and
  • 00:02:44 then you can use this npx command to use
  • 00:02:47 create react app without installing it
  • 00:02:49 first to create a new project in that
  • 00:02:51 folder
  • 00:02:53 now I actually already have a folder in
  • 00:02:56 which I want to create that so in my
  • 00:02:58 terminal I will navigate into that front
  • 00:03:00 and folder here and then I can run npx
  • 00:03:03 create react app dot here to tell this
  • 00:03:07 create react to app tool that I want to
  • 00:03:10 create the project in that folder I'm in
  • 00:03:12 and this will now set up my react
  • 00:03:14 project inside of that front and folder
  • 00:03:17 with a separate node modules folder and
  • 00:03:19 a separate package.json file and so on
  • 00:03:22 and again you can split this up I will
  • 00:03:24 keep it all in one place here so let's
  • 00:03:27 wait for this installation to finish now
  • 00:03:29 and here we are and now inside of the
  • 00:03:32 front that folder I have the the public
  • 00:03:34 folder with the index.html file we'll
  • 00:03:36 build a single page application here I
  • 00:03:37 should say make sense since we have a
  • 00:03:40 back-end API a graph QL API we want to
  • 00:03:43 have a rich front-end application which
  • 00:03:45 is managed on its own as a single page
  • 00:03:47 app and that index.html file will be our
  • 00:03:50 single page we serve to the user and in
  • 00:03:54 there do you react script kicks it kicks
  • 00:03:56 in and renders our react app in this
  • 00:03:59 place here in place of this div and that
  • 00:04:02 will happen because of the setup in our
  • 00:04:04 source folder and there we have that
  • 00:04:07 index.js file which is the first file to
  • 00:04:09 be executed the bundle generated by this
  • 00:04:12 project will be generated such that this
  • 00:04:14 is the first code to run and there you
  • 00:04:17 see we're rendering the app component in
  • 00:04:19 this place where the root element is the
  • 00:04:22 element with the ID root which is just
  • 00:04:25 that div here and that is how our react
  • 00:04:28 app will be hooked in there now I will
  • 00:04:31 get rid of that testing file I will get
  • 00:04:33 rid of the the styles and app CSS I will
  • 00:04:38 get rid of parts of the styles here I
  • 00:04:41 will override some parts there manually
  • 00:04:45 I will get rid of that logo which I
  • 00:04:47 don't need in in XJS I will get rid of
  • 00:04:52 that Service Worker here I'm not
  • 00:04:54 interested in having one here so we can
  • 00:04:56 remove that serviceworker file as well
  • 00:04:59 obviously you can make this PWA
  • 00:05:02 add a serviceworker in my PWA course but
  • 00:05:06 also on this YouTube channel I have some
  • 00:05:08 resources on that the PWA course is
  • 00:05:10 obviously entirely about that here I
  • 00:05:12 want to focus on just react so I will
  • 00:05:14 get rid of that in-app jeaious I get rid
  • 00:05:17 of that logo import because I deleted
  • 00:05:19 the logo and I will clear all that
  • 00:05:22 content in there and now we can start
  • 00:05:25 creating that project or that front end
  • 00:05:28 from scratch without these default
  • 00:05:30 settings or with very little off them
  • 00:05:32 let's get rid of that comment here queue
  • 00:05:35 so first of all in index CSS I will set
  • 00:05:38 a font family and here I'll use send
  • 00:05:42 cereth now obviously you can also bring
  • 00:05:44 in some google web font simply with an
  • 00:05:47 import there for example and use that
  • 00:05:49 that would be an alternative if you want
  • 00:05:50 to use different fonts i will just go
  • 00:05:53 with sensor for now we can tweak this
  • 00:05:55 later and now i want to render something
  • 00:05:58 to the screen here to see if that starts
  • 00:06:01 correctly so in there i will render a
  • 00:06:03 simple h1 tag where i just say it works
  • 00:06:07 and now let's save all these files and
  • 00:06:11 now navigate it into that front and
  • 00:06:14 folder where I have this react app I can
  • 00:06:17 now run NPM start and this will now run
  • 00:06:21 the start script in this package to
  • 00:06:23 Jason fall so not the one in the other
  • 00:06:25 package to Jason fault because I didn't
  • 00:06:27 run the command in that root folder I
  • 00:06:29 ran in the front end folder and
  • 00:06:31 therefore it takes the package to jason
  • 00:06:33 fall in their folder and that now starts
  • 00:06:35 up the development server which serves
  • 00:06:37 this react single page application on
  • 00:06:39 that host so let's visit that host here
  • 00:06:43 local host 3000 it is and indeed there
  • 00:06:49 we can see it works and that is our
  • 00:06:52 working react application so with that
  • 00:06:55 we're now set up and now it's obviously
  • 00:06:56 time to add some meat to this
  • 00:06:58 application now to understand what we
  • 00:07:01 want to add obviously we can have a look
  • 00:07:03 at our API and our schema here to get an
  • 00:07:06 idea for which features we have there
  • 00:07:09 and which features we probably want to
  • 00:07:11 have on the front end too and what you
  • 00:07:13 can see there is that we have different
  • 00:07:17 endpoints here query and mutate
  • 00:07:19 and points we can view all events we can
  • 00:07:23 view all bookings we can login we can
  • 00:07:27 create new events and create users and
  • 00:07:29 we can book events and cancel bookings
  • 00:07:31 these are things we can do and in our
  • 00:07:34 resolvers obviously which we created
  • 00:07:36 over the last parts well you can see
  • 00:07:40 what happens when we reach these end
  • 00:07:42 points so that is all nice and good
  • 00:07:47 before I actually connect my front end
  • 00:07:50 to the back end let's start sketching
  • 00:07:52 out the structure of the front end and
  • 00:07:55 let's start implementing it there with
  • 00:07:57 some dummy data at first and then we can
  • 00:07:59 connect to the back end as a next step
  • 00:08:01 so in app JS I want to start building
  • 00:08:04 the MIUI my user interface and since we
  • 00:08:09 can create events log users in and
  • 00:08:12 create users and book events we probably
  • 00:08:16 need authentication pages so pages where
  • 00:08:19 users can sign up our sign-in we also
  • 00:08:23 will later need to add protection to
  • 00:08:26 make sure we can access certain pages
  • 00:08:28 only after we were logged in and we need
  • 00:08:32 these protected pages we need pages
  • 00:08:34 where we can view all events where we
  • 00:08:37 can create a new event where we can also
  • 00:08:41 view our bookings and where we can book
  • 00:08:45 an event for example or where we can
  • 00:08:47 view our bookings and cancel a booking
  • 00:08:49 so basically only what we have on the
  • 00:08:53 backend in our schema we now need
  • 00:08:55 components on the front-end or pages on
  • 00:08:58 the front-end that allow us to interact
  • 00:09:00 with these back-end API endpoints there
  • 00:09:03 so let's maybe start by being able to
  • 00:09:09 log in or create users because we need
  • 00:09:12 that to do anything else
  • 00:09:14 because the rest of our back and API
  • 00:09:16 obviously relies on that if we create an
  • 00:09:19 event we need to be authenticated
  • 00:09:21 otherwise we throw an error and we also
  • 00:09:23 take that user ID each create a user
  • 00:09:25 that is to create an event that is
  • 00:09:27 connected to that user
  • 00:09:28 so having sign up and sign in place
  • 00:09:30 makes a lot of sense
  • 00:09:33 we will need to add routing for this and
  • 00:09:35 therefore I will cancel this development
  • 00:09:37 server with control C and this
  • 00:09:40 development process here and it will
  • 00:09:42 install another package with npm
  • 00:09:44 install' – – save – save it as a
  • 00:09:47 dependency in this front and folder so
  • 00:09:50 in the react app and that will be react
  • 00:09:52 router Dom which is a package that
  • 00:09:55 allows us to enable routing and react
  • 00:09:58 and important here is that it will stay
  • 00:10:01 a single page application even with
  • 00:10:03 routing added and the react router will
  • 00:10:06 basically just watch for changes in the
  • 00:10:09 URL and then render different components
  • 00:10:12 to the page or to the screen depending
  • 00:10:15 on which virtual page we are on and now
  • 00:10:19 just in case that whole component and
  • 00:10:22 single page application thing is totally
  • 00:10:24 brand-new – you take some dedicated
  • 00:10:27 resources like my complete guide or at
  • 00:10:29 least the official Docs to learn more
  • 00:10:32 about how react works what components
  • 00:10:34 are and so on we will build plenty of
  • 00:10:36 components together soon but that
  • 00:10:39 knowledge will still help you so let's
  • 00:10:41 wait for this installation to finish now
  • 00:10:43 and now with that finished we can start
  • 00:10:46 to implement routing in this application
  • 00:10:49 and for that I will import something
  • 00:10:54 from react router Dom which is that
  • 00:10:57 package I just installed and that
  • 00:10:59 something I want here is the browser
  • 00:11:02 router and this is a component provided
  • 00:11:06 by that package which we can wrap around
  • 00:11:08 the area in our react application where
  • 00:11:11 we want to use routing so here I will
  • 00:11:15 simply use my browser router as a global
  • 00:11:19 wrapper you could say around mind our an
  • 00:11:23 entire application around everything I
  • 00:11:25 have all my other components inside of
  • 00:11:28 the Drude component I will wrap with
  • 00:11:30 this browser router and now we can start
  • 00:11:34 defining some routes so from that very
  • 00:11:36 same package we can now install the
  • 00:11:39 route component and we can use it here
  • 00:11:42 route to define the different routes you
  • 00:11:45 want to support
  • 00:11:46 the way it is we're existent we add path
  • 00:11:49 property which defines two paths for
  • 00:11:52 which you want to load that route so we
  • 00:11:54 could say if the URL is our domain slash
  • 00:11:57 nothing so this path here then we want a
  • 00:12:01 render and that's the other part we need
  • 00:12:02 we want to render a certain component
  • 00:12:04 which doesn't exist yet I'll add it soon
  • 00:12:07 so you're all rendered null for now
  • 00:12:10 obviously not our final result now we
  • 00:12:13 don't just want to have a route route
  • 00:12:15 here we also might want to have an off
  • 00:12:18 route here so when we enter slash off
  • 00:12:20 then we want to render our
  • 00:12:22 authentication pages and maybe we also
  • 00:12:25 want to have routes for events and for
  • 00:12:28 bookings you could say so will very
  • 00:12:32 likely change this later but this could
  • 00:12:33 be our setup here and component that is
  • 00:12:38 rendered for a given path will basically
  • 00:12:40 be rendered in place of that route
  • 00:12:42 component you could say so wherever you
  • 00:12:44 place this component is where later this
  • 00:12:47 page component will be rendered and to
  • 00:12:50 make this easier to understand let's
  • 00:12:52 actually create one and for that in
  • 00:12:54 source I will create a subfolder and we
  • 00:12:57 could name those components but I want
  • 00:13:00 to store my components which act as
  • 00:13:02 pages in a separate folder named pages
  • 00:13:05 and don't that is totally up to you you
  • 00:13:07 can go for different setups – I want to
  • 00:13:09 use this one and there I will add my off
  • 00:13:12 J's file and this is where I will trade
  • 00:13:14 that off page component now I do assume
  • 00:13:17 that you know how to create components
  • 00:13:19 and react and one important thing here
  • 00:13:22 is I will not use the hooks feature the
  • 00:13:26 the hooks API which reactors it will
  • 00:13:28 introduce because at this point of time
  • 00:13:30 it's not stable yet things will change
  • 00:13:32 and chances are that if I use it now I
  • 00:13:35 use it in a way that is not working
  • 00:13:38 anymore once the final implementation of
  • 00:13:40 hooks is out I will very likely add a
  • 00:13:43 video to the serious once hooks are
  • 00:13:46 really implemented and stable to show
  • 00:13:48 you how to convert the code to hooks so
  • 00:13:52 definitely check out the entire series
  • 00:13:54 if you're watching this in the future
  • 00:13:55 here I will create a component in the
  • 00:13:58 traditional way
  • 00:14:00 by extending component because I need a
  • 00:14:03 class-based component here I want to
  • 00:14:04 manage some state here so I will import
  • 00:14:07 all that from react and then I create a
  • 00:14:10 new class with that class keyword I will
  • 00:14:13 name it off page but the name is up to
  • 00:14:15 you and this will extend this component
  • 00:14:18 object I import from react and in there
  • 00:14:22 we need a render method which react will
  • 00:14:24 call for us and in there we will need to
  • 00:14:26 return some JSX code that defines which
  • 00:14:29 HTML code in the end gets rendered to
  • 00:14:32 the screen and then I'll export this off
  • 00:14:35 page as a default in this file so that
  • 00:14:38 we can use it in our files now here I
  • 00:14:41 will simply render an h1 tag for now the
  • 00:14:45 off page and that is it that is all I
  • 00:14:49 want to render for now and in my app J's
  • 00:14:52 file I now want to import that so I will
  • 00:14:55 import off page from and then I go to
  • 00:14:59 the pages folder and there from off j/s
  • 00:15:04 without yes you can omit that so just
  • 00:15:06 from off from the file name and that is
  • 00:15:10 the component I want to render here when
  • 00:15:12 you is it off so here I will render the
  • 00:15:14 off page now for just slash I actually
  • 00:15:17 want to redirect to that page so what I
  • 00:15:20 will do is I will import redirect which
  • 00:15:23 is an aberrant exposed by react router
  • 00:15:25 Dom and redirect can also be used here
  • 00:15:28 and this allows me to add from slash so
  • 00:15:34 when we visit slash and then I define to
  • 00:15:36 what I want to redirect and here I want
  • 00:15:38 to redirect Q / off now important for
  • 00:15:42 this to work however I need yet another
  • 00:15:43 component switch and I will wrap that
  • 00:15:47 around all my routes switch essentially
  • 00:15:50 means that only one the first matching
  • 00:15:52 of all these alternatives will be used
  • 00:15:54 so if we wizard slash it will instantly
  • 00:15:56 redirect and not evaluate the other
  • 00:15:58 routes if I'm on /off then it will
  • 00:16:01 ignore this redirection and go to that
  • 00:16:03 where at least I will do that once I add
  • 00:16:06 exact here to indicate that I only want
  • 00:16:08 to redirect if the full path is exactly
  • 00:16:11 slash otherwise it will use this as a
  • 00:16:13 prefix and they
  • 00:16:14 it would also redirect if we have any
  • 00:16:17 other route starting with Slash and
  • 00:16:19 obviously every route path starts with a
  • 00:16:21 slash so we need exact here to avoid
  • 00:16:24 infinite redirection loops so now when
  • 00:16:27 we visit slash nothing we should get
  • 00:16:28 forwarded to slash off and for a slash
  • 00:16:31 off I render the off page that's the
  • 00:16:33 idea at least so let's save all files
  • 00:16:36 and restart NPM start now and if
  • 00:16:39 everything is set up correctly we should
  • 00:16:42 now see the off page as a h1 tag once
  • 00:16:46 this page reloads because that is slash
  • 00:16:49 nothing and we should get forwarded
  • 00:16:51 therefore let's reload yes we are
  • 00:16:54 forwarded to slash off and we see the
  • 00:16:57 off page and if I open my developer
  • 00:17:00 tools we also have no error here which
  • 00:17:03 is a good sign obviously whenever we
  • 00:17:06 have that basic set up regarding the off
  • 00:17:08 page obviously we have two other pages
  • 00:17:10 here events and bookings and for now I
  • 00:17:12 will just add boring placeholders events
  • 00:17:15 J s and bookings j s and I will just
  • 00:17:19 copy what I have in my off page here and
  • 00:17:22 I will just say the bookings page and I
  • 00:17:26 will rename that obviously here to
  • 00:17:28 bookings page and the events I'll also
  • 00:17:31 copy that in and I will rename this year
  • 00:17:36 to events page and with that all renamed
  • 00:17:40 I can go to app J s and import these
  • 00:17:44 pages so I will import my bookings page
  • 00:17:47 from dot slash pages bookings and I will
  • 00:17:52 repeat that and do the same for the
  • 00:17:55 events page and now with these
  • 00:17:57 components imported these are the
  • 00:17:59 components I want to render here here I
  • 00:18:01 will use the events page and here I will
  • 00:18:04 use the bookings page and now if we save
  • 00:18:07 that we obviously still are on the off
  • 00:18:10 page and since we have no navigation we
  • 00:18:12 have no other way to navigate around
  • 00:18:13 other than changing the path manual here
  • 00:18:17 but if I do change it to events I'm on
  • 00:18:19 the events page if I do change it to
  • 00:18:22 bookings here I'm on the bookings page
  • 00:18:25 so this now all seems to work if I go
  • 00:18:28 back
  • 00:18:28 to slash nothing I get forwarded to the
  • 00:18:31 off-page again and that is the basic
  • 00:18:33 setup with which we will continue
  • 00:18:35 obviously a lot of missing and all the
  • 00:18:38 components all the layout navigation all
  • 00:18:40 of that is missing and we'll start
  • 00:18:42 adding that in the next lecture but we
  • 00:18:44 have a solid starting set up right now
  • 00:18:47 so on we move